Custom 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-এর সাথে যুক্ত হয়, তখন নিম্নলিখিত সিকোয়েন্সটি ট্রিগার হয়:

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

Implementation Guide

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

The Golden Rule: Design for Zero Internet Connectivity

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

ডিফেন্সিভলি ডিজাইন করতে, নিচের Mobile-First Captive Portal Design Checklist-টি বাস্তবায়ন করুন:

১. Viewport কনফিগারেশন

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

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

২. CSS ইনলাইন করা এবং বাহ্যিক ডিপেনডেন্সি অপসারণ করা

কখনই বাহ্যিক 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** হিসেবে এনকোড করা:

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

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

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

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

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

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

• শর্তাবলী এবং গোপনীয়তা নীতির জন্য একটি ডিফল্টরূপে আনচেক করা চেকবক্স প্রদান করুন।
• মূল লগইন ফর্মটিকে স্ক্রিনের উপরের অংশে রাখতে স্ক্রোলযোগ্য, সীমিত-উচ্চতার কন্টেইনারে (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 অটো-জুম প্রতিরোধ করতে ফন্ট সাইজ অবশ্যই কমপক্ষে ১৬ পিক্সেল হতে হবে */
        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-এর মাধ্যমে পরিবেশন করা হচ্ছে [২]।

২. DNS রেজোলিউশন ব্যর্থতা (দ্য ওয়াল্ড গার্ডেন ট্র্যাপ)

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

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

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

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

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

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

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

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

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

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

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

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

$$\text{Annual Support Savings} = (\text{Total Annual Guest Visits} \times \text{Portal Failure Rate} \times \text{Helpdesk Contact Rate}) \times \text{Cost Per Support Ticket}$$

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

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

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

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

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

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

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

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

• CNA স্যান্ডবক্স অত্যন্ত সীমাবদ্ধ: Apple এর iOS ওয়েবশীট এবং macOS CNA হলো অত্যন্ত স্যান্ডবক্সড এনভায়রনমেন্ট যা বাহ্যিক অ্যাসেট, কুকিজ এবং ওয়েব ফন্ট ব্লক করে। সমস্ত স্টাইলিং এবং অ্যাসেট অবশ্যই স্বয়ংসম্পূর্ণ হতে হবে (ইনলাইন CSS, Base64 ইমেজ, সিস্টেম ফন্ট) [1]।
• AJAX টেকনিক iOS এক্সিট হ্যান্ডশেককে ব্যাহত করে: iOS ডিভাইসকে সফলভাবে "captive" থেকে "connected" মোডে স্থানান্তর করতে (উপরের ডানদিকের বোতামটি "Cancel" থেকে "Done" এ পরিবর্তন করতে), আপনাকে অবশ্যই একটি ফুল-পেজ HTTP রিডাইরেক্ট ট্রিগার করতে হবে। অ্যাসিনক্রোনাস DOM আপডেট ডিভাইসটিকে একটি ক্যাপটিভ লুপের মধ্যে ফেলে দেবে।
• মোবাইল-ফার্স্ট ডিজাইন করা বাধ্যতামূলক: ৯০% এর বেশি লগইন মোবাইলে ঘটে। তাই একটি সিঙ্গেল-কলাম লেআউট (সর্বোচ্চ প্রস্থ: 480px) ডিজাইন করুন, টাচ-ফ্রেন্ডলি ট্যাপ টার্গেট (নূন্যতম 44px x 44px) ব্যবহার করুন এবং স্বয়ংক্রিয় iOS ব্রাউজার জুমিং প্রতিরোধ করতে সমস্ত টেক্সট ইনপুটে নূন্যতম 16px ফন্ট সাইজ প্রয়োগ করুন।
• ওয়াল্ড গার্ডেন DNS নিয়ন্ত্রণ করে: লগইনের সময় ব্যবহৃত যেকোনো বাহ্যিক ডোমেন (যেমন, সোশ্যাল লগইন API) ওয়্যারলেস কন্ট্রোলারের ওয়াল্ড গার্ডেনে স্পষ্টভাবে হোয়াইটলিস্ট করা থাকতে হবে, অন্যথায় পৃষ্ঠাটি লোড হতে ব্যর্থ হবে।
• Purple ব্যাকএন্ডের জটিলতা দূর করে: Purple এর পোর্টাল বিল্ডার ব্যবহার করলে ডেভেলপাররা একটি কাস্টম এডিটরের মাধ্যমে সম্পূর্ণ HTML/CSS নিয়ন্ত্রণ পান, পাশাপাশি RADIUS, মাল্টি-ভেন্ডর AP ইন্টিগ্রেশন এবং GDPR-কমপ্লায়েন্ট ডাটাবেস ব্যবস্থাপনার বিশাল নিরাপত্তা, স্কেলিং এবং কমপ্লায়েন্সের দায়বদ্ধতা থেকে মুক্তি পান [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] How to Implement 802.1X Authentication with Cloud RADIUS
• [5] Cisco Wireless APs: 2026 Guide to Products & Deployment
• [6] Purple WiFi Marketing & Analytics Platform

-

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

কাস্টম captive portals এর টেকনিক্যাল সীমাবদ্ধতা এবং ইমপ্লিমেন্টেশন স্ট্র্যাটেজি নিয়ে একজন সিনিয়র সলিউশন আর্কিটেক্টের আলোচনা শুনুন: