কাস্টম Captive Portal: HTML এবং CSS নির্দেশিকা

এক্সিকিউটিভ সামারি

এন্টারপ্রাইজ ভেন্যুগুলোর জন্য - যার মধ্যে বিলাসবহুল হোটেল Hospitality এবং রিটেল চেইন Retail থেকে শুরু করে ট্রানজিট হাব Transport এবং আধুনিক মেডিকেল ক্যাম্পাস Healthcare অন্তর্ভুক্ত রয়েছে - গেস্ট WiFi স্প্ল্যাশ পেজ হলো ডিজিটাল সদর দরজা। তবে, ৯০% এরও বেশি গেস্ট WiFi লগইন সম্পন্ন হয় মোবাইল ডিভাইসে, যেখানে রেন্ডারিং স্ট্যান্ডার্ড ব্রাউজার যেমন Safari বা Chrome দ্বারা নিয়ন্ত্রিত হয় না, বরং অত্যন্ত সীমাবদ্ধ Captive Network Assistant (CNA) ওয়েবভিউ দ্বারা নিয়ন্ত্রিত হয় [1]। এই "মিনি-ব্রাউজার" গুলো কঠোর স্যান্ডবক্স সীমাবদ্ধতা প্রয়োগ করে: এগুলো এক্সটার্নাল CDN ব্লক করে, পারসিস্টেন্ট কুকিজ নিষ্ক্রিয় করে, এক্সটার্নাল ওয়েব ফন্ট উপেক্ষা করে এবং নিরাপত্তা ঝুঁকি কমাতে ও সেশন হাইজ্যাকিং প্রতিরোধ করতে JavaScript এক্সিকিউশন মারাত্মকভাবে সীমাবদ্ধ করে [2]।

যখন একজন ডেভেলপার প্রচলিত ওয়েব স্ট্যান্ডার্ড ব্যবহার করে একটি স্প্ল্যাশ পেজ ডিজাইন করেন, তখন এই সীমাবদ্ধতাগুলোর কারণে লেআউট ভেঙে যায়, ব্র্যান্ড অ্যাসেট অনুপস্থিত থাকে এবং লগইন বোতাম কাজ করে না, যা সরাসরি কাস্টমার স্যাটিসফ্যাকশন এবং ডিজিটাল এনগেজমেন্টকে প্রভাবিত করে। এই গাইডটি এই চ্যালেঞ্জগুলোর সমাধান প্রদান করে, ডিফেন্সিভ কোডিং অনুশীলনের চিত্র তুলে ধরে - যেমন ইনলাইন CSS, Base64 অ্যাসেট এনকোডিং, সিস্টেম ফন্ট স্ট্যাক এবং সুনির্দিষ্ট নেভিগেশন-চালিত অথেন্টিকেশন হ্যান্ডশেক - যা নির্বিঘ্ন ক্রস-প্ল্যাটফর্ম রেন্ডারিং নিশ্চিত করে। উপরন্তু, আমরা আলোচনা করব কীভাবে Purple-এর পোর্টাল বিল্ডারের মতো একটি ম্যানেজড সলিউশন ব্যবহার করে ডেভেলপাররা RADIUS অথেন্টিকেশন, ডেটাবেস স্কেলিং, GDPR/PCI কমপ্লায়েন্স এবং মাল্টি-ভেন্ডর AP ইন্টিগ্রেশন আউটসোর্স করার পাশাপাশি সম্পূর্ণ HTML/CSS ক্রিয়েটিভ কন্ট্রোল বজায় রাখতে পারেন [3]।

টেকনিক্যাল ডিপ-ডাইভ

একটি স্থিতিস্থাপক কাস্টম ক্যাপটিভ পোর্টাল তৈরি করতে, ডেভেলপারদের অবশ্যই নেটওয়ার্ক-লেভেল ইন্টারসেপশন এবং ব্রাউজার ভার্চুয়ালাইজেশন বুঝতে হবে যা ঘটে যখন একজন গেস্ট একটি ওপেন SSID-এর সাথে যুক্ত হয়।

ক্যাপটিভ পোর্টাল লাইফসাইকেল

যখন একটি ক্লায়েন্ট ডিভাইস একটি ক্যাপটিভ SSID-এর সাথে যুক্ত হয়, তখন নিম্নলিখিত সিকোয়েন্সটি ট্রিগার হয়:

১. IP অ্যাসোসিয়েশন: ডিভাইসটি একটি 3-ওয়ে হ্যান্ডশেক সম্পন্ন করে এবং DHCP-এর মাধ্যমে একটি IP অ্যাড্রেসের জন্য অনুরোধ করে। ২. অ্যাক্টিভ কানেক্টিভিটি প্রোব: অপারেটিং সিস্টেমের ব্যাকগ্রাউন্ড নেটওয়ার্ক ম্যানেজার অবিলম্বে একটি ডেডিকেটেড ভেন্ডর-নিরপেক্ষ কানারি URL-এ একটি HTTP GET অনুরোধ পাঠায় (যেমন, Apple-এর http://captive.apple.com/hotspot-detect.html বা Google-এর http://connectivitycheck.gstatic.com/generate_204) [1]। ৩. DNS/HTTP ইন্টারসেপশন: লোকাল ওয়্যারলেস ল্যান কন্ট্রোলার (WLC) বা Access Point (AP) এই পোর্ট ৮০ HTTP অনুরোধটিকে ইন্টারসেপ্ট বা বাধা দেয়। প্রত্যাশিত HTTP 200 বা 204 স্ট্যাটাস ফেরত দেওয়ার পরিবর্তে, গেটওয়েটি একটি HTTP 302 রিডাইরেক্টের মাধ্যমে ক্লায়েন্টের ট্রাফিককে ক্যাপটিভ পোর্টালের ল্যান্ডিং পেজ URL-এ রিডাইরেক্ট করে [2]। ৪. ওয়েবভিউ স্পনিং: রিডাইরেক্ট শনাক্ত করে, OS রিডাইরেক্ট করা স্প্ল্যাশ পেজটি প্রদর্শন করতে তার নেটিভ Captive Network Assistant (CNA) মিনি-ব্রাউজারটি চালু করে, যার ফলে ব্যবহারকারীর ম্যানুয়ালি একটি সম্পূর্ণ ব্রাউজার খোলার প্রয়োজন হয় না।5. Authentication and State Transition: ব্যবহারকারী লগইন ফর্মটি পূরণ করেন, পোর্টাল সার্ভারে ক্রেডেনশিয়াল জমা দেন, যা গেটওয়েকে (প্রায়শই একটি RADIUS Access-Accept বা বাহ্যিক API কলের মাধ্যমে) MAC অ্যাড্রেসটি অথরাইজ করার নির্দেশ দেয়। 6. CNA Exit Handshake: CNA মিনি-ব্রাউজারটি তার ক্যানারি URL-এ অন্য একটি HTTP GET সম্পাদন করে। যদি এটি প্রত্যাশিত 200/204 রেসপন্স পায়, তবে এটি তার উপরের ডানদিকের বোতামটি "Cancel" থেকে "Done"-এ পরিবর্তন করে এবং প্রাথমিক নেটওয়ার্ক ইন্টারফেস হিসাবে WiFi সংযোগটি স্থাপন করে।

Platform-Specific Mini-Browser Constraints

প্রতিটি অপারেটিং সিস্টেম বিভিন্ন ওয়েবভিউ এনভায়রনমেন্টের মধ্যে এই লাইফসাইকেলটি পরিচালনা করে, যার ফলে অত্যন্ত খণ্ডিত আচরণ দেখা যায়। নিচের টেবিলে এই গুরুত্বপূর্ণ সীমাবদ্ধতাগুলো বিস্তারিত দেওয়া হলো:

Coding Around the Apple CNA "Done" Button Trap

কাস্টম পোর্টাল ডেভেলপমেন্টের ক্ষেত্রে সবচেয়ে ঘন ঘন ব্যর্থতার একটি মোড হলো iOS ডিভাইসে "Done" Button Trap। যখন একজন ব্যবহারকারী অথেন্টিকেট করেন, তখন iOS Websheet ওয়েবভিউকে অবশ্যই সনাক্ত করতে হবে যে নেটওয়ার্কটি আর ক্যাপটিভ অবস্থায় নেই। এটি তার ব্যাকগ্রাউন্ড ক্যানারি রিকোয়েস্টের সাফল্য পর্যবেক্ষণ করে এই কাজটি সম্পন্ন করে।অত্যন্ত গুরুত্বপূর্ণ বিষয় হলো, iOS CNA শুধুমাত্র একটি সম্পূর্ণ-পৃষ্ঠার HTTP নেভিগেশনের (অবস্থান রিডাইরেক্ট) পরেই এই পরীক্ষাটি শুরু করবে। কোনো ডেভেলপার যদি একটি আধুনিক Single Page Application (SPA) তৈরি করেন যা একটি অ্যাসিঙ্ক্রোনাস AJAX কল (যেমন- fetch() বা Axios) এর মাধ্যমে ফর্ম ডেটা সাবমিট করে এবং URL পরিবর্তন না করে ডাইনামিকালি DOM আপডেট করে, তবে CNA তার কানেক্টিভিটি চেকটি কখনোই পুনরায় রান করবে না। ব্যবহারকারী গেটওয়ে স্তরে প্রমাণীকরণ বা অথেন্টিকেশন সম্পন্ন করবেন, কিন্তু ডানদিকের উপরের কোণায় থাকা CNA বোতামটি "Cancel" হিসেবেই থেকে যাবে। হতাশ ব্যবহারকারী যদি "Cancel" এ ক্লিক করেন, তবে iOS ডিভাইসটি অবিলম্বে SSID থেকে বিচ্ছিন্ন হয়ে যাবে এবং WiFi সেশনটি বন্ধ করে দেবে [1]।

এটি প্রতিরোধ করতে, অথেন্টিকেশন সফল হওয়ার হ্যান্ডলারকে অবশ্যই একটি ফিজিক্যাল ল্যান্ডিং পেজে সম্পূর্ণ-পৃষ্ঠার রিডাইরেক্ট সম্পন্ন করতে হবে (যেমন- window.location.href = '/success') অথবা একটি স্ট্যান্ডার্ড HTTP POST অ্যাকশনের মাধ্যমে নেটিভভাবে লগইন ফর্মটি সাবমিট করতে হবে।

বাস্তবায়ন গাইড

সব প্ল্যাটফর্ম জুড়ে সামঞ্জস্যপূর্ণ রেন্ডারিং নিশ্চিত করতে, ডেভেলপারদের আধুনিক ও অ্যাসেট-ভারী ওয়েব ডিজাইন থেকে সরে এসে একটি অত্যন্ত স্বয়ংসম্পূর্ণ, ডিফেন্সিভ কোডিং স্টাইল গ্রহণ করতে হবে।

সুবর্ণ নিয়ম: শূন্য ইন্টারনেট কানেক্টিভিটির জন্য ডিজাইন করুন

ক্যাপটিভ অবস্থায় থাকাকালীন, ক্লায়েন্ট ডিভাইসের উইডার ইন্টারনেটে কোনো অ্যাক্সেস থাকে না। এটি শুধুমাত্র ওয়্যারলেস কন্ট্রোলারের Walled Garden-এ (যেমন স্বয়ং Captive Portal সার্ভারের IP) স্পষ্টভাবে হোয়াইটলিস্ট করা IP অ্যাড্রেস এবং ডোমেনগুলোই রিসলভ এবং অ্যাক্সেস করতে পারে। তাই, আপনার HTML-এ রেফারেন্স করা যেকোনো বাহ্যিক অ্যাসেট লোড হতে ব্যর্থ হবে, যার ফলে লেআউটটি ভেঙে যাবে।

ডিফেন্সিভ ডিজাইনের জন্য, নিম্নলিখিত মোবাইল-ফার্স্ট Captive Portal ডিজাইন চেকলিস্টটি বাস্তবায়ন করুন:

১. ভিউপোর্ট কনফিগারেশন

মোবাইল ডিভাইসগুলো যাতে ভিউপোর্টটিকে ডেস্কটপ উইডথ-এ (সাধারণত ৯৮০ পিক্সেল) ছোট করে না ফেলে, তার জন্য HTML <head>-এ অবশ্যই একটি রেসপন্সিভ ভিউপোর্ট মেটা ট্যাগ অন্তর্ভুক্ত করতে হবে। এটি ছাড়া, মোবাইল ডিভাইসে টেক্সট এবং ইনপুট ফিল্ডগুলো অত্যন্ত ক্ষুদ্র দেখাবে:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

২. সিএসএস ইনলাইন করা এবং বাহ্যিক ডিপেন্ডেন্সিগুলো সরিয়ে ফেলা

বাহ্যিক CSS ফাইল বা CDN (যেমন- Bootstrap, Tailwind, বা Google Fonts) এর সাথে কখনোই লিঙ্ক করবেন না। সমস্ত CSS অবশ্যই HTML <head>-এর একটি <style> ব্লকের মধ্যে এমবেড করা থাকতে হবে।

টাইপোগ্রাফির জন্য, একটি সিস্টেম ফন্ট স্ট্যাক ব্যবহার করুন যা আগে থেকে ইনস্টল করা লোকাল অপারেটিং সিস্টেম ফন্টগুলোকে রেফারেন্স করে। এটি সম্পূর্ণভাবে HTTP রিকোয়েস্ট এড়ায় এবং ডিভাইসের নেটিভ, উচ্চ-মানের স্যান্স-সেরিফ টাইপফেস ব্যবহার করে পৃষ্ঠাটি তাত্ক্ষণিকভাবে লোড হওয়া নিশ্চিত করে:

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #F5F1ED; /* Pearl White Brand Colour */
    color: #011638; /* Dark Blue Brand Colour */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

৩. Base64 অ্যাসেট এনকোডিং

ইমেজ, লোগো এবং আইকনগুলোকে এক্সটার্নাল HTTP URL-এর মাধ্যমে রেফারেন্স করা উচিত নয়, যদি না হোস্টিং ডোমেনটি গেটওয়ের ওয়াল্ড গার্ডেনে হোয়াইটলিস্ট করা থাকে। সবচেয়ে নির্ভরযোগ্য পদ্ধতি হলো ছোট ভিজ্যুয়াল অ্যাসেট (যেমন PNG বা SVG লোগো) সরাসরি HTML বা CSS-এ Base64 ডেটা URI হিসেবে এনকোড করা:

<!-- Inline Base64 Logo Example -->
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0iIzc0NThGRCIvPjwvc3ZnPg==" alt="Purple Logo" class="brand-logo">

৪. ইনপুট ফিল্ড এবং ট্যাপ টার্গেট অপ্টিমাইজেশন

মোবাইল ব্যবহারযোগ্যতার মানদণ্ড (যেমন Apple-এর Human Interface Guidelines) মেনে চলার জন্য, সমস্ত ইন্টারেক্টিভ এলিমেন্ট স্পর্শ ইনপুটের জন্য অপ্টিমাইজ করা আবশ্যক:

• ইনপুট ফন্ট সাইজ: ইনপুট টেক্সটের ফন্টের সাইজ কমপক্ষে ১৬ পিক্সেল হতে হবে। ফন্টের সাইজ এর চেয়ে কম হলে (যেমন, ১৪ পিক্সেল), iOS Safari এবং CNA ইনপুট ফিল্ড ফোকাস করার সময় স্বয়ংক্রিয়ভাবে জুম ইন করবে, যা পেজের লেআউটকে নষ্ট করে দেয় [১]।
• ট্যাপ টার্গেট: ভুলবশত ক্লিক করা বা ব্যবহারকারীর বিরক্তি এড়াতে বোতাম, চেকবক্স এবং লিঙ্কগুলোর ন্যূনতম স্পর্শ টার্গেট এরিয়া ৪৪ পিক্সেল x ৪৪৪ পিক্সেল হতে হবে।

৫. আইনি সম্মতি এবং GDPR কমপ্লায়েন্স

গেস্ট ডেটা (যেমন- ইমেল, ফোন নম্বর বা সোশ্যাল প্রোফাইল) ক্যাপচার করার সময়, HTML স্ট্রাকচার অবশ্যই সুনির্দিষ্ট আইনি সম্মতি সমর্থন করবে। GDPR-এর অধীনে, আগে থেকে টিক চিহ্ন দেওয়া চেকবক্স বা পরোক্ষ সম্মতি বিবরণী (যেমন "লগ ইন করার মাধ্যমে আপনি আমাদের শর্তাবলীতে সম্মত হচ্ছেন") কমপ্লায়েন্ট নয় [৩]।

• শর্তাবলী এবং গোপনীয়তা নীতির জন্য একটি ডিফল্টরূপে আনটিক করা চেকবক্স প্রদান করুন।
• মূল লগইন ফর্মটিকে স্ক্রিনের উপরের অংশে (above the fold) রাখার জন্য বিস্তারিত আইনি টেক্সটকে একটি স্ক্রোলযোগ্য, সীমিত-উচ্চতার কন্টেইনারে (max-height: 120px; overflow-y: auto;) রাখুন।

<div class="consent-container">
    <input type="checkbox" id="terms_consent" name="terms_consent" required>
    <label for="terms_consent">
        I explicitly agree to the <a href="#" onclick="showTerms()">Terms of Service</a> and consent to the processing of my data in accordance with the <a href="#" onclick="showPrivacy()">Privacy Policy</a>.
    </label>
</div>

কাস্টম Captive Portal HTML/CSS টেমপ্লেট

নিচে একটি সম্পূর্ণ, প্রোডাকশন-রেডি, একক-ফাইলের HTML/CSS টেমপ্লেট দেওয়া হয়েছে যা সমস্ত মোবাইল-ফার্স্ট, CNA-কমপ্লায়েন্ট সর্বোত্তম অনুশীলনকে অন্তর্ভুক্ত করে। এটিতে একটি রেসপনসিভ লেআউট, একটি সিস্টেম ফন্ট স্ট্যাক, Base64-রেডি অ্যাসেট প্লেসহোল্ডার, স্পর্শ-বান্ধব ইনপুট এবং সুনির্দিষ্ট GDPR-কমপ্লায়েন্ট সম্মতি স্ট্রাকচার রয়েছে:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Guest WiFi Login</title>
    <style>
        /* CSS Reset & Variable Declarations */
        :root {
            --color-primary: #7458FD; /* Purple Brand Colour */
            --color-dark: #011638; /* Dark Blue */
            --color-light: #F5F1ED; /* Pearl White */
            --color-white: #FFFFFF;
            --color-border: #D1D5DB;
            --radius-container: 12px;
            --radius-element: 6px;
        }
        
        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--color-light);
            color: var(--color-dark);
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }
        
        /* রেসপনসিভ কার্ড লেআউট */
        .portal-card {
            background-color: var(--color-white);
            width: 100%;
            max-width: 420px;
            padding: 32px 24px;
            border-radius: var(--radius-container);
            box-shadow: 0 4px 20px rgba(1, 22, 56, 0.05);
            text-align: center;
        }
        
        .logo-container {
            margin-bottom: 24px;
        }
        
        /* এমবেডেড Base64 লোগো প্লেসহোল্ডার */
        .logo {
            width: 120px;
            height: auto;
        }
        
        h1 {
            font-size: 24px;
            font-weight: 700;
            margin: 0 0 8px 0;
            color: var(--color-dark);
        }
        
        p {
            font-size: 14px;
            color: #4B5563;
            margin: 0 0 24px 0;
            line-height: 1.5;
        }
        
        /* ফর্মের স্টাইলসমূহ */
        .form-group {
            text-align: left;
            margin-bottom: 16px;
        }
        
        label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 6px;
            color: var(--color-dark);
        }
        
        /* গুরুত্বপূর্ণ: iOS অটো-জুম প্রতিরোধ করতে ফন্টের আকার কমপক্ষে 16px হতে হবে */
        input[type="email"],
        input[type="text"] {
            width: 100%;
            height: 48px;
            padding: 12px 16px;
            font-size: 16px;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-element);
            background-color: var(--color-white);
            color: var(--color-dark);
            outline: none;
            transition: border-color 0.2s;
        }
        
        input[type="email"]:focus,
        input[type="text"]:focus {
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(116, 88, 253, 0.15);
        }
        
        /* সম্মতি সংক্রান্ত স্টাইলসমূহ */
        .consent-group {
            display: flex;
            align-items: flex-start;
            text-align: left;
            margin: 20px 0;
        }
        
        /* স্পর্শ-বান্ধব টার্গেট সাইজিং */
        input[type="checkbox"] {
            width: 20px;
            height: 20px;
            margin: 2px 12px 0 0;
            flex-shrink: 0;
            cursor: pointer;
            accent-color: var(--color-primary);
        }
        
        .consent-label {
            font-size: 13px;
            line-height: 1.4;
            color: #4B5563;
            user-select: none;
        }
        
        .consent-label a {
            color: var(--color-primary);
            text-decoration: none;
            font-weight: 600;
        }
        
        .consent-label a:hover {
            text-decoration: underline;
        }
        
        /* Touch-Friendly CTA Button (Minimum 44px height) */
        .btn-submit {
            width: 100%;
            height: 48px;
            background-color: var(--color-primary);
            color: var(--color-white);
            border: none;
            border-radius: var(--radius-element);
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .btn-submit:hover {
            background-color: #5B3EE3;
        }
        
        .btn-submit:active {
            background-color: #4A2FD4;
        }
        
        /* Legal Terms Scrollbox */
        .terms-scrollbox {
            display: none; /* Toggled via JS */
            text-align: left;
            font-size: 11px;
            color: #6B7280;
            background-color: var(--color-light);
            padding: 12px;
            border-radius: var(--radius-element);
            max-height: 100px;
            overflow-y: auto;
            margin-bottom: 16px;
            border: 1px solid var(--color-border);
        }
        
        .footer {
            margin-top: 24px;
            font-size: 11px;
            color: #9CA3AF;
        }
    </style>
</head>
<body>

    <div class="portal-card">
        <div class="logo-container">
            <!-- Replace src with your actual Base64-encoded SVG or PNG -->
            <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30">
                <rect width="100" height="30" rx="6" fill="#7458FD"/>
                <text x="50" y="20" font-family="sans-serif" font-size="12" fill="#FFFFFF" font-weight="bold" text-anchor="middle">YOUR BRAND</text>
            </svg>
        </div>
        
        <h1>অতিথি WiFi-তে স্বাগতম</h1>
        <p>সুরক্ষিত ও উচ্চ-গতির ইন্টারনেট অ্যাক্সেস পেতে অনুগ্রহ করে নিচে আপনার বিবরণ লিখুন।</p>
        
        <!-- Form must submit natively (full page navigation) to clear Apple CNA -->
        <form action="/login/submit" method="POST" onsubmit="return validateForm()">
            <div class="form-group">
                <label for="guest_name">পুরো নাম</label>
                <input type="text" id="guest_name" name="name" placeholder="John Doe" required autocomplete="name">
            </div>
            
            <div class="form-group">
                <label for="guest_email">ইমেইল ঠিকানা</label>
                <input type="email" id="guest_email" name="email" placeholder="john@example.com" required autocomplete="email">
            </div>
            
            <div class="consent-group">
                <input type="checkbox" id="terms_consent" name="terms_accepted" required>
                <label for="terms_consent" class="consent-label">
                    আমি <a href="#" onclick="toggleTerms(event)">সেবার শর্তাবলী</a> স্বীকার করছি এবং GDPR নিয়ম মেনে ডেটা প্রসেস করার সম্মতি দিচ্ছি।
                </label>
            </div>
            
            <div id="terms_box" class="terms-scrollbox">
                <strong>WiFi সেবার শর্তাবলী:</strong><br>
                ১. এই সেবাটি কোনো ওয়ারেন্টি ছাড়াই যেভাবে আছে সেভাবেই প্রদান করা হচ্ছে।<br>
                ২. ব্যবহারকারীরা কোনো অবৈধ ব্যান্ডউইথ-নিবিড় কার্যকলাপে লিপ্ত হতে পারবেন না।<br>
                ৩. আমাদের গোপনীয়তা নীতি অনুযায়ী শুধুমাত্র অথেন্টিকেশন এবং মার্কেটিং অপ্ট-ইন এর জন্য ব্যক্তিগত ডেটা সংগ্রহ করা হয়।
            </div>
            
            <button type="submit" class="btn-submit">WiFi এর সাথে যুক্ত হোন</button>
        </form>
        
        <div class="footer">
            Powered by Purple | Secure Guest WiFi
        </div>
    </div>

    <script>
        function toggleTerms(e) {
            e.preventDefault();
            var box = document.getElementById('terms_box');
            box.style.display = (box.style.display === 'block') ? 'none' : 'block';
        }
        
        function validateForm() {
            var consent = document.getElementById('terms_consent');
            if (!consent.checked) {
                alert('যুক্ত হওয়ার জন্য আপনাকে অবশ্যই সেবার শর্তাবলী স্বীকার করতে হবে।');
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

ট্রাবলশুটিং ও ঝুঁকি প্রশমন

কাস্টম-কোডেড HTML/CSS Captive Portal স্থাপন করার সময়, IT অপারেশন টিমগুলো প্রায়শই কয়েকটি গুরুতর অপারেশনাল ঝুঁকির সম্মুখীন হয়:

১. SSL/TLS সার্টিফিকেট ওয়ার্নিং লুপ

যেহেতু Captive Portal ট্রাফিক ইন্টারসেপ্ট করার মাধ্যমে কাজ করে, তাই আধুনিক HTTPS ওয়েব সিকিউরিটির সাথে এদের একটি মৌলিক দ্বন্দ্ব তৈরি হয়। যখন একজন ব্যবহারকারী কোনো HTTPS সাইট (যেমন, https://www.google.com) ভিজিট করার চেষ্টা করেন, এবং গেটওয়ে সেই ট্রাফিকটিকে একটি HTTP Captive Portal-এ রিডাইরেক্ট করার চেষ্টা করে, তখন ব্রাউজার SSL সার্টিফিকেটের অমিল সনাক্ত করে এবং একটি ঝুঁকিপূর্ণ "আপনার কানেকশনটি প্রাইভেট নয়" সিকিউরিটি ওয়ার্নিং দেখায়।

• প্রশমন: কখনোই সরাসরি HTTPS ট্রাফিক ইন্টারসেপ্ট করার চেষ্টা করবেন না। সম্পূর্ণভাবে অপারেটিং সিস্টেমের নেটিভ CNA হেল্পারের ওপর নির্ভর করুন (যা রিডাইরেক্ট ট্রিগার করতে একটি আনএনক্রিপ্টেড HTTP রিকোয়েস্ট পাঠায়)। নিশ্চিত করুন যে আপনার Captive Portal ডোমেনের একটি বৈধ, পাবলিকলি বিশ্বস্ত SSL সার্টিফিকেট রয়েছে (যেমন, Let's Encrypt বা DigiCert) এবং প্রাথমিক HTTP রিডাইরেক্ট সফলভাবে ব্যবহারকারীকে আপনার পোর্টাল ডোমেনে রাউট করার পরই কেবল সেটি HTTPS এর মাধ্যমে পরিবেশন করা হচ্ছে [2]।

২. DNS রেজোলিউশন ব্যর্থতা (The Walled Garden Trap)

আপনার কাস্টম HTML পেজটি যদি কোনো বাহ্যিক রিসোর্স নির্দেশ করে—যেমন একটি সোশ্যাল লগইন OAuth এন্ডপয়েন্ট (যেমন, Facebook, Google) বা কোনো পেমেন্ট গেটওয়ে—তবে ওয়্যারলেস কন্ট্রোলারের Walled Garden-এ স্পষ্টভাবে হোয়াইটলিস্ট না করা পর্যন্ত এই ডোমেনগুলির জন্য DNS অনুরোধগুলি ব্যর্থ হবে। যদি হোয়াইটলিস্টে কোনো ডোমেন অনুপস্থিত থাকে, তবে লগইন প্রক্রিয়াটি থমকে যাবে এবং একটি ফাঁকা স্ক্রিন দেখাবে।

• প্রশমন: একটি কঠোর, ন্যূনতম Walled Garden তালিকা বজায় রাখুন। সোশ্যাল লগইন ব্যবহার করার সময়, আইডেন্টিটি প্রোভাইডারদের দ্বারা সুপারিশকৃত নির্দিষ্ট ওয়াইল্ডকার্ড ডোমেনগুলি হোয়াইটলিস্ট করুন (যেমন, *.google.com, *.gstatic.com)।

৩. সেশন টাইমআউট এবং MAC স্পুফিং দুর্বলতা

স্ট্যান্ডার্ড ক্যাপটিভ পোর্টালগুলি ডিভাইসের MAC অ্যাড্রেসের উপর ভিত্তি করে প্রমাণীকরণ করে। তবে, আধুনিক মোবাইল অপারেটিং সিস্টেম (iOS 14+ এবং Android 10+) ডিফল্টরূপে র্যান্ডমাইজড MAC অ্যাড্রেস (ব্যক্তিগত WiFi অ্যাড্রেস) ব্যবহার করে, যা পর্যায়ক্রমে পরিবর্তিত হয়। এর ফলে অতিথিদের বারবার পুনরায় প্রমাণীকরণ করতে বলা হতে পারে, যা ব্যবহারকারীর অভিজ্ঞতাকে নষ্ট করে [১]।

• প্রশমন: বাসি সেশনগুলি প্রতিরোধ করতে RADIUS সার্ভারে যুক্তিসঙ্গত সেশন টাইমআউট (যেমন, ২৪ ঘণ্টা) প্রয়োগ করুন, এবং নির্বিঘ্ন, নিরাপদ অনবোর্ডিংয়ের জন্য Passpoint (Hotspot 2.0) বা WPA3-Enterprise-এর মতো আধুনিক প্রমাণীকরণ স্ট্যান্ডার্ডগুলি ব্যবহার করুন যা MAC-ভিত্তিক ক্যাপটিভ পোর্টালগুলিকে সম্পূর্ণরূপে বাইপাস করে।

Purple প্রোডাক্টের প্রাসঙ্গিকতা: নিজে তৈরি বনাম কিনে নেওয়া

যদিও একটি একক HTML পেজ কোড করা সহজ, তবুও একটি কাস্টম ক্যাপটিভ পোর্টাল পরিকাঠামো হোস্ট করা, সুরক্ষিত করা এবং স্কেল করা অত্যন্ত বড় প্রযুক্তিগত এবং কমপ্লায়েন্স সংক্রান্ত বাধা তৈরি করে। নিচের টেবিলটি একটি কাস্টম পোর্টাল নিজে হোস্ট করা বনাম Purple-এর ম্যানেজড এন্টারপ্রাইজ প্ল্যাটফর্ম ব্যবহার করার ইঞ্জিনিয়ারিং এবং অপারেশনাল বাস্তবতার তুলনা করে:

Purple-এর প্ল্যাটফর্ম "তৈরি বনাম কেনা" (Build vs. Buy)-এর দ্বিধাদ্বন্দ্ব দূর করে। এটি ডেভেলপারদের একটি কাস্টম HTML/CSS ওয়ার্কস্পেসের সম্পূর্ণ সৃজনশীল স্বাধীনতা প্রদান করে, পাশাপাশি স্কেলে সুরক্ষিত RADIUS অথেন্টিকেশন সমর্থন করার জন্য প্রয়োজনীয় জটিল, উচ্চ-ঝুঁকিপূর্ণ ব্যাকএন্ড ইনফ্রাস্ট্রাকচার ইঞ্জিনিয়ারিং দূর করে।

ROI এবং ব্যবসায়িক প্রভাব

একটি পেশাদারভাবে তৈরি, রেসপন্সিভ কাস্টম captive portal-এ বিনিয়োগ করা আইটি অপারেশন, মার্কেটিং এবং আইনি কমপ্লায়েন্স জুড়ে পরিমাপযোগ্য রিটার্ন প্রদান করে।

১. অপারেশনাল খরচ হ্রাস (IT হেল্পডেস্ক টিকিট)

স্টেডিয়াম বা মাল্টি-সাইট রিটেইল চেইনের মতো বৃহৎ আকারের স্থাপনায়, একটি ত্রুটিপূর্ণ captive portal আইটি হেল্পডেস্কের কাজের চাপ বাড়ার অন্যতম প্রধান কারণ। গেস্টরা যখন একটি "হোয়াইট স্ক্রিন" বা অকার্যকর লগইন বোতামের সম্মুখীন হন, তখন তারা অন-সাইট কর্মীদের ওপর চাপ সৃষ্টি করেন অথবা সাপোর্ট টিকিট জমা দেন।

$$\text{বার্ষিক সাপোর্ট সাশ্রয়} = (\text{মোট বার্ষিক গেস্ট সংখ্যা} \times \text{পোর্টালের ব্যর্থতার হার} \times \text{হেল্পডেস্ক যোগাযোগের হার}) \times \text{প্রতি সাপোর্ট টিকিটের খরচ}$$

• দৃশ্যপট: প্রতি বছর ১,০০০,০০০ ভিজিটর আসা একটি কনভেনশন সেন্টার। একটি দুর্বল কোডের পোর্টাল পুরোনো iOS ডিভাইসগুলোতে ৫% ব্যর্থতার সম্মুখীন হয়, যার ফলে ১০% হেল্পডেস্কের সাথে যোগাযোগের ঘটনা ঘটে। প্রতি সাপোর্ট টিকিটে ইন্ডাস্ট্রি-স্ট্যান্ডার্ড ১৫ ডলার খরচ ধরলে, অপারেশনাল খরচ দাঁড়ায়: $$(1,000,000 \times 0.05 \times 0.10) \times $15 = \text{বার্ষিক } $75,000 \text{ যা এড়ানো সম্ভব এমন অতিরিক্ত সাপোর্ট খরচ}$$
• ফলাফল: একটি CNA-অপ্টিমাইজড, মোবাইল-ফার্স্ট টেমপ্লেটে স্থানান্তরিত হওয়ার মাধ্যমে পোর্টাল ব্যর্থতার হার ০.১%-এর নিচে নেমে আসে, যা কার্যত এই অপারেশনাল খরচ দূর করে।

২. মার্কেটিং ডেটা সংগ্রহ এবং অপ্ট-ইন অপ্টিমাইজেশন

রিটেইল এবং হসপিটালিটি ভেন্যুগুলোর জন্য, গেস্ট WiFi পোর্টাল হলো নির্ভুল, ফার্স্ট-পার্টি কাস্টমার ডেটা সংগ্রহের প্রাথমিক মাধ্যম। ছোট টেক্সট বা জটিল ফর্ম লেআউট সহ একটি দুর্বলভাবে ডিজাইন করা ইউজার ইন্টারফেসের কারণে উচ্চ বাউন্স রেট দেখা দেয় - ব্যবহারকারীরা লগইন প্রক্রিয়াটি সম্পূর্ণ না করেই চলে যান, যার ফলে বিপণনের সুযোগ নষ্ট হয়।

• কেস স্টাডি (রিটেইল): একটি জাতীয় রিটেইল চেইন Purple-এর প্ল্যাটফর্ম ব্যবহার করে একটি মোবাইল-ফার্স্ট অপ্টিমাইজড captive portal চালু করেছে। একটি মাল্টি-স্টেপ লগইন ফর্মের পরিবর্তে একটি সিঙ্গেল-ফিল্ড ইমেল ইনপুট (ফন্ট-সাইজ: ১৬ পিক্সেল) এবং একটি অপ্টিমাইজড ৪৮ পিক্সেল ট্যাপ-টার্গেট বোতাম ব্যবহার করে, তারা প্রথম প্রান্তিকের মধ্যেই সম্পূর্ণ রেজিস্ট্রেশনের সংখ্যা ৪২% বৃদ্ধি এবং মার্কেটিং নিউজলেটার অপ্ট-ইন ২৮% বৃদ্ধি করতে সক্ষম হয়েছে [6]।

৩. আইনি এবং নিয়ন্ত্রক ঝুঁকি হ্রাস

GDPR এবং CCPA এর অধীনে, নীতি বহির্ভূত ডেটা সংগ্রহ অত্যন্ত কঠোর আর্থিক জরিমানা ডেকে আনে (GDPR এর অধীনে বৈশ্বিক বার্ষিক টার্নওভারের ৪% পর্যন্ত)। আপনার স্প্ল্যাশ পেজে আগে থেকে টিক চিহ্ন দেওয়া সম্মতি বক্সের ওপর নির্ভর করা বা একটি স্পষ্ট, সহজে অ্যাক্সেসযোগ্য প্রাইভেসি পলিসি প্রদান করতে ব্যর্থ হওয়া এন্টারপ্রাইজকে বিশাল আইনি ঝুঁকির মুখে ফেলে দেয়।

• ঝুঁকি কমানোর ROI: একটি সুনির্দিষ্ট, আগে থেকে টিক চিহ্ন না দেওয়া সম্মতি বক্স এবং অপ্টিমাইজ করা স্ক্রলবক্সের মধ্যে ব্যবহারের শর্তাবলী হোস্ট করার মাধ্যমে ১০০% নিয়ন্ত্রক সম্মতি নিশ্চিত হয়, যা মিলিয়ন ডলারের আইনি জরিমানার ঝুঁকি হ্রাস করে এবং ব্র্যান্ডের সুনাম রক্ষা করে।

মূল বিষয়ের সংক্ষিপ্তসার

• CNA স্যান্ডবক্স অত্যন্ত সীমাবদ্ধ: Apple এর iOS ওয়েবশীট এবং macOS CNA হলো অত্যন্ত কঠোরভাবে স্যান্ডবক্স করা পরিবেশ যা বাহ্যিক অ্যাসেট, কুকি এবং ওয়েব ফন্ট ব্লক করে। সমস্ত স্টাইলিং এবং অ্যাসেট অবশ্যই নিজস্ব ফাইলের ভেতরেই সীমাবদ্ধ হতে হবে (ইনলাইন CSS, Base64 ইমেজ, সিস্টেম ফন্ট) [1]।
• AJAX প্রযুক্তি iOS এক্সিট হ্যান্ডশেককে বাধাগ্রস্ত করে: iOS ডিভাইসটিকে সফলভাবে "ক্যাপটিভ" থেকে "কানেক্টেড" অবস্থায় নিয়ে যেতে (উপরের ডানদিকের বোতামটি "Cancel" থেকে "Done" এ পরিবর্তন করতে), আপনাকে একটি ফুল-পেজ HTTP রিডাইরেক্ট ট্রিগার করতে হবে। অ্যাসিনক্রোনাস DOM আপডেট ডিভাইসটিকে একটি ক্যাপটিভ লুপের মধ্যে আটকে রাখবে।
• মোবাইল-ফার্স্ট ডিজাইন বাধ্যতামূলক: ৯০% এরও বেশি লগইন মোবাইলে ঘটে। তাই একটি সিঙ্গেল-কলাম লেআউট (সর্বোচ্চ উইডথ: 480px) ডিজাইন করুন, টাচ-ফ্রেন্ডলি ট্যাপ টার্গেট (সর্বনিম্ন 44px x 44px) ব্যবহার করুন এবং সমস্ত টেক্সট ইনপুটে ন্যূনতম 16px ফন্ট সাইজ প্রয়োগ করুন যাতে iOS ব্রাউজারের অটোমেটিক জুমিং প্রতিরোধ করা যায়।
• ওয়াল্ড গার্ডেনস DNS নিয়ন্ত্রণ করে: লগইনের সময় ব্যবহৃত যেকোনো বাহ্যিক ডোমেনকে (যেমন, সোশ্যাল লগইন API) অবশ্যই ওয়্যারলেস কন্ট্রোলারের ওয়াল্ড গার্ডেন তালিকায় সুনির্দিষ্টভাবে যুক্ত করতে হবে, অন্যথায় পেজটি লোড হতে ব্যর্থ হবে।
• Purple ব্যাকএন্ডের জটিলতা দূর করে: Purple এর পোর্টাল বিল্ডার ব্যবহার করলে ডেভেলপাররা একটি কাস্টম এডিটরের মাধ্যমে সম্পূর্ণ HTML/CSS নিয়ন্ত্রণ লাভ করেন, যেখানে RADIUS, মাল্টি-ভেন্ডর AP ইন্টিগ্রেশন এবং GDPR-সম্মত ডেটাবেস ম্যানেজমেন্টের মতো বিশাল নিরাপত্তা, স্কেলিং ও কমপ্লায়েন্স সংক্রান্ত জটিলতাগুলোর দায়ভার Purple গ্রহণ করে [3]।

তথ্যসূত্র

• [1] Wireless Broadband Alliance: Captive Network Portal Behaviour
• [2] Android Open Source Project: Captive Portal Login Webview Integration
• [3] European Data Protection Board: Guidelines on Consent under Regulation 2016/679
• [4] কিভাবে Cloud RADIUS এর সাহায্যে 802.1X অথেন্টিকেশন ইমপ্লিমেন্ট করবেন
• [5] Cisco ওয়্যারলেস APs: পণ্য এবং স্থাপনার ২০২৬ গাইড
• [6] Purple WiFi মার্কেটিং এবং অ্যানালিটিক্স প্ল্যাটফর্ম

টেকনিক্যাল ব্রিফিং শুনুন

একজন সিনিয়র সলিউশন আর্কিটেক্টের কাছ থেকে কাস্টম captive portal এর প্রযুক্তিগত সীমাবদ্ধতা এবং বাস্তবায়ন কৌশল সম্পর্কে শুনুন: