Custom Captive Portal: HTML এবং CSS গাইড

এই নির্ভরযোগ্য টেকনিক্যাল রেফারেন্স গাইডটিতে একটি কাস্টম captive portal ল্যান্ডিং পেজ ডিজাইন এবং কোড করার জন্য প্রয়োজনীয় ডেভেলপমেন্ট স্ট্যান্ডার্ড, CSS আর্কিটেকচার এবং নেটওয়ার্ক-লেভেলের সীমাবদ্ধতাগুলো তুলে ধরা হয়েছে। এটি ফ্রন্টএন্ড ডেভেলপার এবং নেটওয়ার্ক আর্কিটেক্টদের Apple CNA এবং Android ওয়েবভিউ এনভায়রনমেন্টগুলো পরিচালনা করার জন্য কার্যকরী কৌশল প্রদান করে, যা পিক্সেল-পারফেক্ট, কমপ্লায়েন্ট এবং অত্যন্ত পারফরম্যান্ট গেস্ট WiFi অভিজ্ঞতা নিশ্চিত করে।

📖 11 মিনিট পাঠ📝 2,731 শব্দ🔧 2 সমাধানকৃত উদাহরণ❓ 3 অনুশীলনী প্রশ্ন📚 8 মূল সংজ্ঞা

এই গাইডটি শুনুন

পডকাস্ট ট্রান্সক্রিপ্ট দেখুন

কাস্টম Captive Portal: HTML এবং CSS গাইড — একটি Purple টেকনিক্যাল ব্রিফিং

[INTRODUCTION]

Purple টেকনিক্যাল ব্রিফিং সিরিজে আপনাকে স্বাগত। আজ আমরা এমন একটি বিষয় নিয়ে বিস্তারিত আলোচনা করব যা প্রতিটি গেস্ট WiFi ডেপ্লয়মেন্টকে প্রভাবিত করে — তা হলো captive portal। নির্দিষ্টভাবে বলতে গেলে, একটি কাস্টম captive portal ল্যান্ডিং পেজের জন্য কীভাবে পরিচ্ছন্ন, নির্ভরযোগ্য HTML এবং CSS লিখতে হয় তা নিয়ে আমরা কথা বলছি।

আপনি যদি কখনও হোটেলের WiFi-এ কানেক্ট করার পর একটি ভাঙা স্প্ল্যাশ পেজ দেখে থাকেন — যেখানে ছবি নেই, আনস্টাইলড টেক্সট, অথবা একটি লগইন বোতাম যা স্পর্শে কাজ করছে না — তবে আপনি বুঝতে পারবেন যখন একজন ডেভেলপার পরিবেশের সীমাবদ্ধতা না বুঝেই পোর্টাল তৈরি করেন তখন কী ঘটে। আজ আমরা নিশ্চিত করব যেন আপনার সাথে এমনটি না ঘটে।

এই ব্রিফিংটি ফ্রন্টএন্ড ডেভেলপার, ক্রিয়েটিভ ডিজাইনার এবং ওয়েব ডেভেলপারদের উদ্দেশ্যে তৈরি করা হয়েছে যারা একদম শুরু থেকে একটি captive portal তৈরি করছেন বা কোনো বিদ্যমান টেমপ্লেট কাস্টমাইজ করছেন। আমরা HTML স্ট্রাকচার, গুরুত্বপূর্ণ CSS নিয়মাবলী, Apple CNA মিনি-ব্রাউজারের সীমাবদ্ধতা যা অভিজ্ঞ ডেভেলপারদেরও বিভ্রান্ত করে, এবং কীভাবে Purple-এর পোর্টাল বিল্ডারের মতো প্ল্যাটফর্মগুলো এই জটিলতার বেশিরভাগ অংশ পুরোপুরি দূর করতে পারে তা নিয়ে আলোচনা করব।

চলুন শুরু করা যাক।

[TECHNICAL DEEP-DIVE]

প্রথমে নেটওয়ার্ক স্তরে captive portal আসলে কী তা প্রতিষ্ঠা করা যাক। যখন কোনো ডিভাইস এমন একটি WiFi নেটওয়ার্কের সাথে কানেক্ট হয় যার জন্য অথেন্টিকেশন প্রয়োজন, তখন নেটওয়ার্কটি HTTP ট্রাফিককে ইন্টারসেপ্ট করে এবং ব্যবহারকারীকে একটি ল্যান্ডিং পেজে রিডাইরেক্ট করে। এটিই হলো captive portal। ব্যবহারকারী একটি স্প্ল্যাশ পেজ দেখতে পান, একটি অ্যাকশন সম্পন্ন করেন — যেমন ইমেল দেওয়া, শর্তাবলী মেনে নেওয়া, সোশ্যাল মিডিয়ার মাধ্যমে লগইন করা — এবং এরপর নেটওয়ার্কটি সম্পূর্ণ ইন্টারনেট অ্যাক্সেস প্রদান করে।

সবচেয়ে গুরুত্বপূর্ণ বিষয়টি হলো এই পেজটি কোথায় রেন্ডার হচ্ছে তা বোঝা। iOS ডিভাইসে, এটি Apple-এর Captive Network Assistant — অর্থাৎ CNA-এর ভেতরে ওপেন হয় — যা একটি স্ট্রিপড-ডাউন WebKit ওয়েবভিউ। এটি Safari নয়। এতে কোনো পারসিস্টেন্ট কুকি থাকে না। এটি কোনো এক্সটার্নাল রিসোর্স লোড করতে পারে না। এতে সীমিত JavaScript সাপোর্ট রয়েছে। এবং ব্যবহারকারী অন্য কোনো অ্যাপে স্যুইচ করার সাথে সাথেই এটি বন্ধ হয়ে যায়। macOS-এ, CNA একটি নির্দিষ্ট ৯০০ বাই ৫৭২ পিক্সেল সাইজে রেন্ডার হয়। Android-এ, আধুনিক ডিভাইসগুলো Chrome Custom Tabs ব্যবহার করে, যা তুলনামূলকভাবে অনেক বেশি সক্ষম। Windows 10 ব্যবহারকারীর ডিফল্ট ব্রাউজার ওপেন করে। Samsung ডিভাইসগুলো Samsung Internet ব্যবহার করে।

প্ল্যাটফর্মের এই ভিন্নতাই হলো প্রোডাকশনে ভেঙে যাওয়া captive portal-এর সবচেয়ে বড় কারণ। ডেভেলপাররা তাদের Android ফোনে টেস্ট করেন, সবকিছু চমৎকার দেখায়, এবং তারপর হোটেলের iPhone ব্যবহারকারী অতিথিরা আনস্টাইলড টেক্সট সহ একটি সাদা স্ক্রিন দেখতে পান। তাই চলুন ডিফেন্সিভ কোডিং কীভাবে করতে হয় তা নিয়ে আলোচনা করি।

captive portal HTML এবং CSS-এর সুবর্ণ নিয়মটি হলো: পেজটিকে এমনভাবে বিবেচনা করুন যেন এতে কোনো ইন্টারনেট কানেকশন নেই। কারণ অথেন্টিকেশন পর্ব চলাকালীন, আসলেই কোনো কানেকশন থাকে না। নেটওয়ার্কটি ক্যাপটিভ থাকে। আপনার পেজটি কোনো এক্সটার্নাল URL থেকে যে রিসোর্সই লোড করার চেষ্টা করুক না কেন — যেমন একটি Google Font, একটি CDN-হোস্টেড স্টাইলশিট, একটি JavaScript লাইব্রেরি, একটি লোগো ইমেজ — তা নীরবে ব্যর্থ হবে অথবা একটি লোডিং স্পিনার দেখাবে যা কখনই শেষ হবে না।HTML স্ট্রাকচার দিয়ে শুরু করা যাক। আপনার ডকুমেন্টটি একটি পরিচ্ছন্ন HTML5 পেজ হওয়া উচিত। হেডের (head) মধ্যে, আপনার একটি ভিউপোর্ট মেটা ট্যাগ প্রয়োজন যার কনটেন্ট সেট করা থাকবে width equals device-width এবং initial-scale equals one। মোবাইল রেন্ডারিংয়ের জন্য এটি অত্যন্ত আবশ্যক। এটি ছাড়া, iOS পেজটিকে ৯৮০ পিক্সেল চওড়া হিসেবে রেন্ডার করবে এবং এটিকে ছোট করে দেখাবে, যার ফলে সবকিছু অতি ক্ষুদ্র দেখাবে।

আপনার CSS অবশ্যই ইনলাইন হতে হবে — হয় হেড এলিমেন্টের ভেতরে একটি স্টাইল ব্লকে, অথবা ব্যক্তিগত এলিমেন্টগুলোতে ইনলাইন স্টাইল অ্যাট্রিবিউট হিসেবে। লিঙ্ক ট্যাগের মাধ্যমে যুক্ত কোনো এক্সটার্নাল স্টাইলশিট ব্যবহার করবেন না। সেই স্টাইলশিটটি আপনার সার্ভারে থাকে, যা অথেন্টিকেশনের সময় Captive Portal অ্যাক্সেস করতে পারে না। ফলে পেজটি সম্পূর্ণ স্টাইল ছাড়া রেন্ডার হবে।

ফন্টের জন্য, একটি সিস্টেম ফন্ট স্ট্যাক ব্যবহার করুন। যেমন: font-family — apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif। এটি ব্রাউজারকে নির্দেশ দেয় যে সিস্টেমে যে ফন্টটি উপলব্ধ আছে সেটিই ব্যবহার করতে। Google Fonts ব্যবহার করবেন না। ইম্পোর্ট কলটি ব্যর্থ হবে এবং আপনার ফলব্যাক ফন্ট হবে Times New Roman, যা আপনার ক্লায়েন্ট যে ব্র্যান্ড অভিজ্ঞতার জন্য অর্থ প্রদান করছেন তার সাথে মেলে না।

ছবির জন্য — আপনার লোগো, ব্যাকগ্রাউন্ড গ্রাফিক্স, আলংকারিক উপাদান — আপনার কাছে দুটি বিকল্প রয়েছে। হয় সেগুলোকে একই Captive Portal সার্ভার থেকে পরিবেশন করুন, যার অর্থ সেগুলো একই লোকাল নেটওয়ার্কে রয়েছে এবং অথেন্টিকেশন সম্পন্ন হওয়ার আগেই অ্যাক্সেসযোগ্য। অথবা, আরও ভালো হয় যদি সেগুলোকে সরাসরি আপনার HTML বা CSS-এ Base64 ডেটা URI হিসেবে এনকোড করে নেন। এটি এক্সটার্নাল ডিপেন্ডেন্সি সম্পূর্ণভাবে দূর করে।

এবার পেজ লেআউট নিয়ে কথা বলা যাক। যেহেতু Captive Portal লগইনের নব্বই শতাংশেরও বেশি মোবাইল ডিভাইসে ঘটে, তাই আপনার ডিজাইনটি মোবাইল-ফার্স্ট হওয়া উচিত। এর অর্থ হলো একটি সিঙ্গেল-কলাম লেআউট, যার সর্বোচ্চ প্রস্থ হবে প্রায় ৪৮০ পিক্সেল এবং পেজের মাঝখানে থাকবে। বডি এলিমেন্টে ফ্লেক্সবক্স ব্যবহার করুন — display flex, flex-direction column, align-items centre, justify-content centre, min-height 100 viewport height। এটি যেকোনো স্ক্রিন সাইজে আপনার কনটেন্ট কার্ডটিকে উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্রে নিয়ে আসে।

আপনার প্রাইমারি কল-টু-অ্যাকশন বোতামটি টাচ-ফ্রেন্ডলি হওয়া প্রয়োজন। Apple-এর হিউম্যান ইন্টারফেস গাইডলাইনস অনুযায়ী ন্যূনতম ট্যাপ টার্গেট ৪৪ বাই ৪৪ পিক্সেল হতে হবে। বাস্তবে, একটি প্রাইমারি CTA-এর জন্য আপনার প্রায় ৪৮ পিক্সেল লম্বা, কন্টেইনারের পুরো প্রস্থ জুড়ে এবং বর্ডার-রেডিয়াস প্রায় ৮ থেকে ১২ পিক্সেল হওয়া উচিত।

ফর্ম ফিল্ডের জন্য — ইমেল ইনপুট, নাম ইনপুট — ফন্ট-সাইজ কমপক্ষে ১৬ পিক্সেল সেট করুন। এটি অত্যন্ত গুরুত্বপূর্ণ। iOS Safari এবং CNA ১৬ পিক্সেলের কম ফন্ট-সাইজ বিশিষ্ট যেকোনো ইনপুট ফিল্ডকে স্বয়ংক্রিয়ভাবে জুম করবে, যা আপনার যত্নসহকারে তৈরি করা লেআউটটিকে নষ্ট করে দেয়। ফন্ট-সাইজ ১৬ পিক্সেল বা তার বেশি সেট করলে এই জুম হওয়া প্রতিরোধ করা যায়।

আইনি সম্মতি (legal consent) বিভাগটির প্রতি বিশেষ মনোযোগ দেওয়া প্রয়োজন। GDPR-এর অধীনে, আপনি যদি ব্যক্তিগত তথ্য সংগ্রহ করেন — এমনকি শুধুমাত্র একটি ইমেল ঠিকানাও — তবে আপনার স্পষ্ট, অবহিত সম্মতি প্রয়োজন। এর অর্থ হলো একটি চেকবক্স যা ডিফল্টভাবে আনচেক করা থাকবে এবং সাথে একটি দৃশ্যমান লেবেল থাকবে যা স্পষ্টভাবে উল্লেখ করবে ব্যবহারকারী কিসে সম্মতি দিচ্ছেন। চেকবক্সটি আগে থেকে টিক দিয়ে রাখবেন না। সম্মতির চেকবক্সটি স্ক্রোল না করেই স্পষ্টভাবে দৃশ্যমান হতে হবে।

এখন, বিশেষভাবে iOS CNA-এর জন্য একটি অত্যন্ত গুরুত্বপূর্ণ ইমপ্লিমেন্টেশন ডিটেইল। ব্যবহারকারী যখন অথেন্টিকেশন সম্পন্ন করেন, তখন CNA মনিটর করে যে Captive Portal ডোমেনটি অ্যাক্সেসযোগ্য হয়েছে কিনা। এই পরীক্ষাটি ফুল পেজ নেভিগেশনের মাধ্যমে ট্রিগার হয়, জাভাস্ক্রিপ্ট AJAX কলের মাধ্যমে নয়। এর মানে হল আপনি যদি এমন একটি সিঙ্গেল-পেজ অ্যাপ তৈরি করেন যা fetch বা XMLHttpRequest-এর মাধ্যমে ফর্ম সাবমিট করে এবং ফুল পেজ রিডাইরেক্ট ছাড়াই DOM আপডেট করে, তবে CNA কখনই সনাক্ত করতে পারবে না যে অথেন্টিকেশন সম্পন্ন হয়েছে। অথেন্টিকেশনের পরে আপনাকে অবশ্যই একটি নতুন URL-এ রিডাইরেক্ট করতে হবে — একটি সম্পূর্ণ HTTP রিডাইরেক্ট, কোনো জাভাস্ক্রিপ্ট DOM ম্যানিপুলেশন নয়। এটি Captive Portal ডেভেলপমেন্টের সবচেয়ে সাধারণ ভুলগুলোর একটি।

জাভাস্ক্রিপ্টের ক্ষেত্রে, এটি যতটা সম্ভব মিনিমাল রাখুন। CNA-তে সীমিত JS সাপোর্ট রয়েছে এবং localStorage বা sessionStorage-এ কোনো অ্যাক্সেস নেই। CNA বন্ধ হয়ে গেলে কুকিজ ধ্বংস হয়ে যায়। এই ব্রাউজার API-গুলোর ওপর নির্ভরশীল যেকোনো স্টেট ম্যানেজমেন্ট ব্যর্থ হবে। ভ্যানিলা জাভাস্ক্রিপ্ট ইভেন্ট লিসেনারগুলো ঠিকঠাক কাজ করবে। jQuery হল একটি ৩০-কিলোবাইটের এক্সটার্নাল ডিপেন্ডেন্সি যা লোড হতে ব্যর্থ হবে।

[ইমপ্লিমেন্টেশন সুপারিশ এবং সম্ভাব্য ভুলত্রুটি]

আমি আপনাকে প্র্যাক্টিক্যাল ইমপ্লিমেন্টেশনের একটি চেকলিস্ট দিচ্ছি। প্রথমত: ভিউপোর্ট মেটা ট্যাগ, সবসময়। দ্বিতীয়ত: সমস্ত CSS ইনলাইন, কোনো এক্সটার্নাল স্টাইলশিট নয়। তৃতীয়ত: সমস্ত ইমেজ হয় Captive Portal সার্ভার থেকে পরিবেশন করতে হবে অথবা Base64-এনকোডেড হতে হবে। চতুর্থত: সিস্টেম ফন্ট স্ট্যাক, কোনো ওয়েব ফন্ট নয়। পঞ্চমত: সমস্ত ইনপুট ফিল্ডে ন্যূনতম ১৬ পিক্সেল ফন্ট সাইজ। ষষ্ঠত: টাচ-ফ্রেন্ডলি ট্যাপ টার্গেট, ন্যূনতম ৪৪ বাই ৪৪ পিক্সেল। সপ্তমত: সিঙ্গেল কলাম লেআউট, সর্বোচ্চ প্রস্থ ৪৮০ পিক্সেল। অষ্টমত: অথেন্টিকেশনের পর ফুল পেজ রিডাইরেক্ট, কোনো জাভাস্ক্রিপ্ট স্টেট আপডেট নয়। নবমত: GDPR-সম্মত সম্মতি চেকবক্স, যা ডিফল্টভাবে আনচেক করা থাকবে। দশমত: ব্রাউজার প্রিভিউ নয়, বরং একটি আসল captive নেটওয়ার্ক ব্যবহার করে একটি আসল iOS ডিভাইসে পরীক্ষা করুন।

প্রোডাকশনে আমি সবচেয়ে বেশি যে ভুলগুলো দেখতে পাই। নম্বর এক: Google Fonts — ইম্পোর্টটি সরিয়ে ফেলুন, এটি ব্যর্থ হবে। নম্বর দুই: এক্সটার্নাল জাভাস্ক্রিপ্ট লাইব্রেরি — Bootstrap, jQuery, যেকোনো CDN-হোস্টেড স্ক্রিপ্ট ব্যর্থ হবে। নম্বর তিন: এক্সটার্নাল স্টাইলশিটে ডিক্লেয়ার করা CSS ভেরিয়েবল — এগুলো অবশ্যই আপনার ইনলাইন স্টাইল ব্লকে থাকতে হবে। নম্বর চার: URL দ্বারা রেফারেন্স করা ব্যাকগ্রাউন্ড ইমেজ — এগুলোকে Base64 এনকোড করুন। নম্বর পাঁচ: পোস্ট-অথেন্টিকেশন রিডাইরেক্ট ছাড়া AJAX ফর্ম সাবমিশন — CNA অথেন্টিকেশন সম্পন্ন হওয়ার বিষয়টি সনাক্ত করতে পারবে না।

এখন, নিজে তৈরি করা বনাম কিনে নেওয়ার বিষয়ে একটি সৎ আলোচনা করা যাক। স্ক্র্যাচ থেকে একটি কাস্টম Captive Portal তৈরি করার অর্থ হল আপনি ব্যাকএন্ড ইনফ্রাস্ট্রাকচারের জন্যও দায়ী — RADIUS সার্ভার, ডেটাবেস, SSL সার্টিফিকেট, DNS কনফিগারেশন, আপনার অ্যাক্সেস পয়েন্টগুলোর সাথে নেটওয়ার্ক ইন্টিগ্রেশন এবং চলমান সিকিউরিটি প্যাচিং। এটি একটি বিশাল ইঞ্জিনিয়ারিং প্রতিশ্রুতি।

Purple-এর পোর্টাল বিল্ডার আপনাকে একটি ড্র্যাগ-এন্ড-ড্রপ ইন্টারফেসের সাথে কাস্টম HTML এবং CSS এডিটর দেয় সেইসব ডেভেলপারদের জন্য যাদের পিক্সেল-পারফেক্ট কন্ট্রোল প্রয়োজন, পাশাপাশি এটি সমস্ত ব্যাকএন্ড ইনফ্রাস্ট্রাকচার পরিচালনা করে — অথেন্টিকেশন, ডেটা ক্যাপচার, অ্যানালিটিক্স, GDPR কমপ্লায়েন্স টুলিং এবং ২০০টিরও বেশি অ্যাক্সেস পয়েন্ট ভেন্ডরের সাথে নেটওয়ার্ক ইন্টিগ্রেশন। আপনি ইনফ্রাস্ট্রাকচারের ঝামেলা ছাড়াই ক্রিয়েটিভ কন্ট্রোল পেয়ে যাচ্ছেন।

[র‌্যাপিড-ফায়ার প্রশ্নোত্তর]

আমি কি Captive Portal-এ CSS Grid ব্যবহার করতে পারি? হ্যাঁ, তবে বিশেষভাবে iOS CNA-তে পরীক্ষা করুন। পুরোনো WebKit সংস্করণগুলোতে Flexbox-এর আরও ব্যাপক সমর্থন রয়েছে। আমি কি SVG লোগো ব্যবহার করতে পারি? হ্যাঁ, ইনলাইন SVG সম্পূর্ণ সমর্থিত এবং লোগোর জন্য Base64-এনকোড করা PNG-এর চেয়ে বেশি পছন্দনীয় কারণ এগুলো রেটিনা ডিসপ্লেতে নিখুঁতভাবে স্কেল করে। macOS CNA কি iOS CNA-এর মতো একই সীমাবদ্ধতা সমর্থন করে? ব্যাপকভাবে হ্যাঁ, তবে একটি পার্থক্য রয়েছে: macOS CNA একটি নির্দিষ্ট ৯০০ বাই ৫৭২ পিক্সেল উইন্ডোতে রেন্ডার হয়। আমি কি Tailwind-এর মতো CSS ফ্রেমওয়ার্ক ব্যবহার করতে পারি? শুধুমাত্র যদি আপনি একটি পার্জড, সেলফ-কন্টেইন্ড CSS ফাইল তৈরি করেন এবং এটি আপনার স্টাইল ব্লকে ইনলাইন করেন। HTTPS-এর ক্ষেত্রে কী হবে? প্রাথমিক রিডাইরেক্ট কাজ করার জন্য আপনার Captive Portal অবশ্যই HTTP-এর মাধ্যমে পরিবেশন করতে হবে — HTTPS সংযোগগুলো ক্যাপটিভ নেটওয়ার্ক দ্বারা ইন্টারসেপ্ট করা যায় না।

[সংক্ষেপ এবং পরবর্তী পদক্ষেপ]

আজকের ব্রিফিংয়ের সারসংক্ষেপ করতে। একটি কাস্টম Captive Portal হলো একটি সীমাবদ্ধ ওয়েব পরিবেশ, কোনো স্ট্যান্ডার্ড ব্রাউজার প্রসঙ্গ নয়। Apple CNA এবং Android ওয়েবভিউগুলো বাহ্যিক রিসোর্স, কুকিজ, JavaScript এবং সেশন স্টেটের ওপর কঠোর সীমাবদ্ধতা আরোপ করে। এর সমাধান হলো ইনলাইন CSS, সিস্টেম ফন্ট, Base64-এনকোড করা ইমেজ এবং অথেন্টিকেশনের পর ফুল-পেজ রিডাইরেক্ট সহ সেলফ-কন্টেইন্ড HTML পেজ তৈরি করা।

ভেন্যু অপারেটর এবং IT টিমগুলোর জন্য যারা তাদের বিকল্পগুলো মূল্যায়ন করছেন: আপনার প্রয়োজনীয়তা যদি কাস্টম HTML এবং CSS সহ একটি সম্পূর্ণ ব্র্যান্ডেড, বেসপোক পোর্টাল হয়, তবে পছন্দটি হলো সম্পূর্ণ স্ট্যাকটি নিজেই তৈরি করা এবং রক্ষণাবেক্ষণ করা — যা একটি বড় ইঞ্জিনিয়ারিং প্রতিশ্রুতি — অথবা Purple-এর মতো একটি প্ল্যাটফর্ম ব্যবহার করা যা একটি প্রোডাকশন-গ্রেড ব্যাকএন্ড ইনফ্রাস্ট্রাকচারের ওপর কাস্টম HTML এবং CSS এডিটিং সুবিধা প্রদান করে।

এখান থেকে পরবর্তী পদক্ষেপগুলো হলো: Purple-এর পোর্টাল এডিটর ডকুমেন্টেশন পর্যালোচনা করুন, আজ আমরা যে মোবাইল-ফার্স্ট চেকলিস্টটি আলোচনা করেছি তার বিপরীতে আপনার বিদ্যমান পোর্টালটি অডিট করুন, এবং আপনি যদি একদম শুরু থেকে শুরু করেন, তবে আমাদের আউটলাইন করা HTML টেমপ্লেট স্ট্রাকচারটি আপনার বেসলাইন হিসেবে ব্যবহার করুন। শোনার জন্য ধন্যবাদ, এবং পরবর্তী ব্রিফিংয়ে আপনার সাথে দেখা হবে।

মূল বিষয়বস্তু

✓Captive Portal-গুলি অত্যন্ত সীমাবদ্ধ মিনি-ব্রাউজারে (যেমন Apple-এর iOS Websheet) চলে যা এক্সটার্নাল স্টাইলশিট, ওয়েব ফন্ট, কুকিজ এবং লোকাল স্টোরেজ ব্লক করে।
✓'Zero Connectivity'-এর জন্য ডিজাইন করা বাধ্যতামূলক: সমস্ত CSS অবশ্যই ইনলাইন হতে হবে এবং ভিজ্যুয়াল অ্যাসেটগুলি সরাসরি Base64 Data URI হিসেবে এমবেড করা উচিত।
✓iOS এক্সিট হ্যান্ডশেক ট্রিগার করার জন্য সফল লগইনের পরে একটি ফুল-পেজ HTTP রিডাইরেক্ট প্রয়োজন; AJAX-ভিত্তিক DOM আপডেট ডিভাইসগুলিকে একটি ক্যাপটিভ লুপের মধ্যে আটকে রাখবে।
✓মোবাইল-ফার্স্ট লেআউটে অবশ্যই একটি সিঙ্গেল-কলাম কার্ড স্ট্রাকচার (সর্বোচ্চ প্রস্থ: 480px), টাচ-ফ্রেন্ডলি টার্গেট (সর্বনিম্ন 44px) এবং অটো-জুমিং প্রতিরোধ করতে কমপক্ষে 16px-এর ইনপুট ফন্ট থাকতে হবে।
✓GDPR-এর অধীনে আইনি সম্মতির জন্য মার্কেটিং অপ্ট-ইনের জন্য স্পষ্ট, ডিফল্টরূপে আনচেক করা চেকবক্স প্রয়োজন, যা স্ট্যান্ডার্ড ব্যবহারের শর্তাবলীর (Terms of Service) চুক্তি থেকে আলাদা থাকবে।
✓কাস্টম কোডিং সম্পূর্ণ ক্রিয়েটিভ স্বাধীনতা প্রদান করলেও, RADIUS সার্ভার হোস্টিং ও স্কেলিং, ডেটাবেস সিকিউরিটি এবং মাল্টি-ভেন্ডর ইন্টিগ্রেশন বিশাল অপারেশনাল ওভারহেড তৈরি করে।
✓Purple-এর প্ল্যাটফর্ম ডেভেলপার-লেভেলের HTML/CSS ওয়ার্কস্পেস নিয়ন্ত্রণের সাথে একটি সুরক্ষিত, ক্লাউড-নেটিভ, বিশ্বব্যাপী বিতরণ করা RADIUS ইনফ্রাস্ট্রাকচার এবং নেটিভ কমপ্লায়েন্স টুলসকে একত্রিত করে।

📚 Part of our core series: Captive Portals-এর চূড়ান্ত গাইড →

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

এন্টারপ্রাইজ ভেন্যুগুলোর জন্য—যার মধ্যে রয়েছে লাক্সারি হোটেল 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]।

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

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

Captive Portal লাইফসাইকেল

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

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

Platform-Specific Mini-Browser Constraints

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

Platform / Webview	Display Method	Persistent Cookies	External Web Fonts	JavaScript Execution	Window Dimensions	Exit Handshake Trigger
Apple iOS CNA (Websheet)	Mini-Browser Popup	Blocked (বন্ধ করার সাথে সাথে ধ্বংস হয়ে যায়)	Blocked (অফলাইন)	Limited (কোনো localStorage/sessionStorage নেই)	Responsive (ডিভাইসের প্রস্থ অনুযায়ী)	Full-page HTTP Redirect Only [১]
Apple macOS CNA (Captive Network Assistant)	Mini-Browser Popup	Blocked	Blocked	Limited (কোনো অ্যালার্ট/কনফার্ম ডায়ালগ নেই)	Fixed (৯০০px x ৫৭২px)	Full-page HTTP Redirect Only
Android (Google) (CaptivePortalLogin)	Push Notification -> Chrome Custom Tab	Allowed (Chrome-এর সাথে শেয়ার করা)	Allowed (যদি walled garden-এ হোয়াইটলিস্ট করা থাকে)	Full	Responsive	Automatic (Captive Portal API / ২০৪ চেক) [২]
Samsung Android (Samsung Internet)	Push Notification -> Mini-Browser	Allowed	Allowed	Full	Responsive	Automatic
Windows 10/11 (Default Browser)	Auto-Launch Default Browser	Allowed (সম্পূর্ণ ব্রাউজার কনটেক্সট)	Allowed	Full	Responsive	Manual / Automatic

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-এ স্পষ্টভাবে হোয়াইটলিস্ট করা IP অ্যাড্রেস এবং ডোমেনগুলোই রিসলভ এবং অ্যাক্সেস করতে পারে (যেমন Captive Portal সার্ভারের নিজস্ব IP)। তাই, আপনার HTML-এ রেফারেন্স করা যেকোনো বাহ্যিক অ্যাসেট লোড হতে ব্যর্থ হবে, যার ফলে লেআউটটি ভেঙে যাবে।

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

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

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

২. CSS ইনলাইন করা এবং বাহ্যিক ডিপেন্ডেন্সিগুলো বাদ দেওয়া

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

<div class="portal-card">
    <div class="logo-container">
        
        
            
            YOUR BRAND
        
    </div>
    
    <h1>গেস্ট WiFi-এ আপনাকে স্বাগত</h1>
    <p>সুরক্ষিত, হাই-স্পিড ইন্টারনেট অ্যাক্সেস পেতে অনুগ্রহ করে নিচে আপনার বিবরণ লিখুন।</p>
    
    
    
        <div class="form-group">
            সম্পূর্ণ নাম
            
        </div>
        
        <div class="form-group">
            ইমেল ঠিকানা
            
        </div>
        
        <div class="consent-group">
            
            
                আমি <a href="#">পরিষেবার শর্তাবলী</a> মেনে নিচ্ছি এবং GDPR রেগুলেশন মেনে ডেটা প্রসেসিংয়ের সম্মতি দিচ্ছি।
            
        </div>
        
        <div id="terms_box" class="terms-scrollbox">
            <strong>WiFi পরিষেবার শর্তাবলী:</strong><br />
            ১. এই পরিষেবাটি কোনো ওয়ারেন্টি ছাড়াই যেভাবে আছে সেভাবে প্রদান করা হচ্ছে।<br />
            ২. ব্যবহারকারীরা কোনো অবৈধ ব্যান্ডউইথ-নিবিড় কার্যকলাপে লিপ্ত হতে পারবেন না।<br />
            ৩. আমাদের গোপনীয়তা নীতি মেনে শুধুমাত্র প্রমাণীকরণ এবং মার্কেটিং অপ্ট-ইন-এর জন্য ব্যক্তিগত ডেটা সংগ্রহ করা হয়।
        </div>
        
        WiFi-এর সাথে কানেক্ট করুন
    
    
    <div class="footer">
        Powered by Purple | Secure Guest WiFi
    </div>
</div>


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

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

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

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

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

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

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

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

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

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

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

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

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

| ফিচার / অপারেশনাল প্রয়োজনীয়তা | নিজে হোস্ট করা কাস্টম পোর্টাল | Purple এন্টারপ্রাইজ WiFi প্ল্যাটফর্ম |
| :--- | :--- | :--- |
| **HTML/CSS কাস্টমাইজেশন** | সম্পূর্ণ ম্যানুয়াল কোডিং, প্রতিটি আলাদা AP বা লোকাল ওয়েব সার্ভারে ফাইল আপলোড করা। | কাস্টম HTML/CSS ইনজেক্ট করার সুবিধাসহ **পিক্সেল-পারফেক্ট ডেভেলপার এডিটর**, সাথে একটি ড্র্যাগ-অ্যান্ড-ড্রপ ভিজ্যুয়াল বিল্ডার।
| **RADIUS ইনফ্রাস্ট্রাকচার** | অত্যন্ত নির্ভরযোগ্য FreeRADIUS বা ক্লাউড RADIUS সার্ভার স্থাপন, কনফিগার এবং রক্ষণাবেক্ষণ করতে হবে [4]। | অ্যাক্টিভ-অ্যাক্টিভ রিডান্ডেন্সি এবং ৯৯.৯৯% আপটাইম SLA সহ **বিল্ট-ইন, বিশ্বব্যাপী বিস্তৃত, ক্লাউড-নেটিভ RADIUS**।
| **মাল্টি-ভেন্ডর AP সাপোর্ট** | প্রতিটি হার্ডওয়্যার ভেন্ডরের (Cisco, Aruba, Meraki, Ruckus) জন্য কাস্টম ইন্টিগ্রেশন স্ক্রিপ্ট প্রয়োজন [5]। | ২০০টিরও বেশি হার্ডওয়্যার মডেলের সাথে **নেটিভ, আউট-অফ-দ্য-বক্স ইন্টিগ্রেশন**; মিশ্র-হার্ডওয়্যার এস্টেট জুড়ে ইউনিফাইড পোর্টাল ডেপ্লয়মেন্ট।
| **ডেটা প্রাইভেসি ও কমপ্লায়েন্স** | সুরক্ষিত ডেটাবেস এনক্রিপশন এবং ডেটা মুছে ফেলার ওয়ার্কফ্লো সহ GDPR, CCPA এবং PCI DSS কমপ্লায়েন্সের জন্য ভেন্যু ১০০% আইনি দায়ভার গ্রহণ করে। | **ডিজাইনগতভাবেই সম্পূর্ণ কমপ্লায়েন্ট**। বিল্ট-ইন কনসেন্ট ম্যানেজমেন্ট, স্বয়ংক্রিয় ডেটা-সাবজেক্ট ডিলিট করার অনুরোধ এবং সুরক্ষিত ISO 27001-প্রত্যয়িত হোস্টিং।
| **Analytics &amp; Marketing** | কাস্টম ডেটা ইনজেশন পাইপলাইন তৈরি এবং থার্ড-পার্টি মার্কেটিং টুল ইন্টিগ্রেট করার প্রয়োজন হয়। | রিয়েল-টাইম ফুটফল ট্র্যাকিং, রিটার্ন-রেট মেট্রিক্স এবং স্বয়ংক্রিয় মার্কেটিং ক্যাম্পেইন ট্রিগার সহ **এন্টারপ্রাইজ-গ্রেড অ্যানালিটিক্স ড্যাশবোর্ড** [6]।
| **Identity Provider Integrations** | Google, Facebook, Apple এবং স্থানীয় SMS গেটওয়ের সাথে ম্যানুয়াল OAuth2 ইন্টিগ্রেশন। | প্রধান সোশ্যাল প্ল্যাটফর্ম, SMS গেটওয়ে এবং কর্পোরেট গেস্টদের জন্য Azure AD / Okta-এর সাথে **ওয়ান-ক্লিক ইন্টিগ্রেশন**।

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

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

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

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

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

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

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

### ২. মার্কেটিং ডেটা ক্যাপচার এবং অপ্ট-ইন অপ্টিমাইজেশন

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

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

### ৩. আইনি এবং নিয়ন্ত্রক ঝুঁকি প্রশমন

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

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

## মূল বিষয়গুলোর সংক্ষিপ্তসার

* **CNA স্যান্ডবক্স অত্যন্ত সীমাবদ্ধ**: Apple-এর iOS Websheet এবং macOS CNA হলো অত্যন্ত স্যান্ডবক্সড পরিবেশ যা বাহ্যিক অ্যাসেট, কুকিজ এবং ওয়েব ফন্ট ব্লক করে। সমস্ত স্টাইলিং এবং অ্যাসেট অবশ্যই স্বয়ংসম্পূর্ণ হতে হবে (ইনলাইন CSS, Base64 ইমেজ, সিস্টেম ফন্ট) [1]।
* **AJAX-এর কারণে iOS এক্সিট হ্যান্ডশেক ব্যাহত হয়**: iOS ডিভাইসটিকে সফলভাবে "ক্যাপটিভ" থেকে "কানেক্টেড" অবস্থায় রূপান্তর করতে (উপরের ডানদিকের বোতামটি "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 Behavior](https://captivebehavior.wballiance.com/)
* [2] [Android Open Source Project: Captive Portal Login Webview Integration](https://source.android.com/docs/core/connect/android-custom-tabs-captive-portal)
* [3] [European Data Protection Board: Guidelines on Consent under Regulation 2016/679](https://edpb.europa.eu/our-work-tools/our-documents/guidelines/guidelines-052020-consent-under-regulation-2016679_en)
* [4] [How to Implement 802.1X Authentication with Cloud RADIUS](/guides/implementing-8021x-with-cloud-radius)
* [5] [Cisco Wireless APs: 2026 Guide to Products &amp; Deployment](/blog/cisco-wireless-ap)
* [6] [Purple WiFi Marketing &amp; Analytics Platform](/guest-wifi-marketing-analytics-platform)

---

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

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

মূল সংজ্ঞাসমূহ

Captive Portal

একটি ওয়েব পেজ যা একটি Wi-Fi নেটওয়ার্কের নতুন সংযুক্ত ব্যবহারকারীদের নেটওয়ার্ক রিসোর্সে আরও ব্যাপক অ্যাক্সেস দেওয়ার আগে প্রদর্শিত হয়, সাধারণত প্রমাণীকরণ, অর্থপ্রদান বা পরিষেবার শর্তাবলী প্রদর্শনের জন্য ব্যবহৃত হয়।

IT টিম গেস্ট অ্যাক্সেস নিয়ন্ত্রণ করতে, ব্যবহারকারীর ডেটা সংগ্রহ করতে এবং আইনি সম্মতি প্রয়োগ করতে গেটওয়ে স্তরে captive portals স্থাপন করে।

Captive Network Assistant (CNA)

একটি অত্যন্ত সীমাবদ্ধ, স্যান্ডবক্সযুক্ত মিনি-ব্রাউজার যা একটি captive network রিডাইরেক্ট সনাক্ত করার পরে অপারেটিং সিস্টেম (যেমন Apple iOS এবং macOS) দ্বারা স্বয়ংক্রিয়ভাবে তৈরি হয়, যা শুধুমাত্র পোর্টাল প্রমাণীকরণের সুবিধার্থে ডিজাইন করা হয়েছে।

CNA ওয়েবভিউগুলি কঠোর সীমাবদ্ধতা প্রয়োগ করে, যার মধ্যে বাহ্যিক CDN, স্থায়ী কুকিজ এবং স্থানীয় স্টোরেজ ব্লক করা অন্তর্ভুক্ত, যা প্রায়শই স্ট্যান্ডার্ড ওয়েব ডিজাইনগুলিকে ব্যাহত করে।

Walled Garden

IP অ্যাড্রেস, সাবনেট বা ডোমেন নামের একটি সীমাবদ্ধ তালিকা যা একজন অপ্রমাণিত গেস্ট ব্যবহারকারীকে Captive Portal লগইন প্রক্রিয়া সম্পন্ন করার আগে গেটওয়ের মাধ্যমে অ্যাক্সেস করার অনুমতি দেওয়া হয়।

ডেভেলপারদের অবশ্যই নিশ্চিত করতে হবে যে কোনো বাহ্যিক রিসোর্স (যেমন সোশ্যাল লগইন API বা পেমেন্ট গেটওয়ে) walled garden-এ হোয়াইটলিস্ট করা আছে যাতে লগইন প্রক্রিয়া থমকে না যায়।

Base64 Encoding

একটি বাইনারি-টু-টেক্সট এনকোডিং স্কিম যা বাইনারি ডেটাকে (যেমন ছবি) একটি ASCII স্ট্রিং হিসাবে উপস্থাপন করে, যার ফলে অ্যাসেটগুলিকে সরাসরি HTML বা CSS ডকুমেন্টের মধ্যে এম্বেড করা যায়।

লোগো এবং আইকনগুলির জন্য Base64 encoding ব্যবহার করার ফলে বাহ্যিক HTTP রিকোয়েস্টের প্রয়োজন হয় না, যা অফলাইন CNA এনভায়রনমেন্টের মধ্যেও অ্যাসেটগুলি নিখুঁতভাবে রেন্ডার হওয়া নিশ্চিত করে।

RADIUS (Remote Authentication Dial-In User Service)

একটি নেটওয়ার্কিং প্রোটোকল যা একটি নেটওয়ার্ক পরিষেবা সংযোগকারী এবং ব্যবহারকারী গ্রাহকদের জন্য কেন্দ্রীভূত প্রমাণীকরণ, অনুমোদন এবং অ্যাকাউন্টিং (AAA) ব্যবস্থাপনা প্রদান করে।

প্রমাণীকরণের মানদণ্ড পূরণ হয়ে গেলে গেস্টের MAC অ্যাড্রেসকে নেটওয়ার্ক গেটওয়েতে অনুমোদন করতে Captive Portal সার্ভারটি একটি RADIUS সার্ভারের সাথে যোগাযোগ করে।

System Font Stack

একটি CSS font-family ডিক্লেয়ারেশন যা বাহ্যিক ওয়েব ফন্টের চেয়ে আগে থেকে ইনস্টল করা অপারেটিং সিস্টেম ফন্টগুলিকে (যেমন iOS-এ San Francisco, Windows-এ Segoe UI এবং Android-এ Roboto) অগ্রাধিকার দেয়।

একটি system font stack প্রয়োগ করার ফলে Google Fonts-এর মতো পরিষেবাগুলিতে ব্লক করা বাহ্যিক HTTP রিকোয়েস্ট ট্রিগার না করেই তাৎক্ষণিক টাইপোগ্রাফি রেন্ডারিং নিশ্চিত হয়।

Canary URL

অপারেটিং সিস্টেম বিক্রেতাদের দ্বারা রক্ষণাবেক্ষণ করা একটি ডেডিকেটেড, আনএনক্রিপ্ট করা HTTP URL (যেমন, captive.apple.com) যা পরীক্ষা করে যে একটি ডিভাইসে অবাধ ইন্টারনেট সংযোগ রয়েছে কিনা।

OS ব্যাকগ্রাউন্ড নেটওয়ার্ক ম্যানেজার একটি Captive Portal-এর উপস্থিতি সনাক্ত করতে এবং CNA ওয়েবভিউ পপআপ ট্রিগার করতে এই URLটি পরীক্ষা করে।

Passpoint (Hotspot 2.0)

Wi-Fi Alliance দ্বারা তৈরি একটি ইন্ডাস্ট্রি স্ট্যান্ডার্ড যা মোবাইল ডিভাইসগুলিকে ম্যানুয়াল Captive Portal লগইন এড়িয়ে স্বয়ংক্রিয়ভাবে Wi-Fi হটস্পটগুলি আবিষ্কার করতে এবং সুরক্ষিতভাবে প্রমাণীকরণ করতে সক্ষম করে।

এন্টারপ্রাইজগুলি Purple-এর মতো প্ল্যাটফর্মের পাশাপাশি Passpoint ব্যবহার করে গেস্টদের ঝামেলাপূর্ণ স্প্ল্যাশ পেজ থেকে নিরবচ্ছিন্ন, সেলুলারের মতো সুরক্ষিত রোমিং অভিজ্ঞতায় স্থানান্তরিত করতে পারে।

সমাধানকৃত উদাহরণসমূহ

একটি বিলাসবহুল ২৫০-রুমের হোটেল চেইন [Hospitality](/industries/hospitality) একটি কাস্টম গেস্ট WiFi লগইন পেজ ইমপ্লিমেন্ট করতে চায় যা তাদের প্রিমিয়াম ব্র্যান্ড গাইডলাইনের সাথে নিখুঁতভাবে মেলে। তাদের ক্রিয়েটিভ এজেন্সি কাস্টম ব্র্যান্ড টাইপোগ্রাফি (Adobe Fonts-এ হোস্ট করা), একাধিক হাই-রেজোলিউশন ব্যাকগ্রাউন্ড ইমেজ (একটি পাবলিক AWS S3 বাকেটে হোস্ট করা) এবং একটি মাল্টি-স্টেপ অ্যানিমেটেড JavaScript উইজার্ড ব্যবহার করে একটি স্প্ল্যাশ পেজ ডিজাইন করেছে। যখন এটি ডেপ্লয় করা হয়, তখন iOS গেস্টরা SSID-এর সাথে কানেক্ট করে, কিন্তু পোর্টালটি একটি ফাঁকা সাদা স্ক্রিন হিসেবে পপ আপ হয় এবং ব্যবহারকারীরা অথেন্টিকেট করতে পারেন না।

ফাঁকা স্ক্রিন এবং ত্রুটিপূর্ণ ব্র্যান্ডিং সমস্যার সমাধান করতে, Apple CNA স্যান্ডবক্সের সীমাবদ্ধতাগুলি মেনে চলার জন্য আমাদের অবশ্যই পোর্টালের ফ্রন্টএন্ড আর্কিটেকচার পুনর্গঠন করতে হবে:

১. টাইপোগ্রাফি প্রতিকার: যেহেতু Adobe Fonts-এর জন্য একটি এক্সটার্নাল HTTP রিকোয়েস্টের প্রয়োজন হয় যা CNA দ্বারা ব্লক করা থাকে, তাই আমরা কাস্টম ফন্ট কলটিকে একটি নেটিভ, প্রিমিয়াম সিস্টেম ফন্ট স্ট্যাক (font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;) দিয়ে প্রতিস্থাপন করি। এটি এক্সটার্নাল নেটওয়ার্ক কল ছাড়াই তাৎক্ষণিক রেন্ডারিং নিশ্চিত করে। ২. অ্যাসেট অপ্টিমাইজেশন: AWS S3-এর ব্যাকগ্রাউন্ড ইমেজগুলি ব্লক করা হয়েছে কারণ S3 গেটওয়ের ওয়াল্ড গার্ডেনে নেই। আমরা প্রাথমিক ব্র্যান্ড লোগোটি কম্প্রেস করি, এটিকে একটি লাইটওয়েট SVG-তে রূপান্তর করি এবং এটিকে সরাসরি HTML-এ Base64 Data URI হিসেবে এনকোড করি। ব্যাকগ্রাউন্ডের জন্য, আমরা ভারী ইমেজগুলিকে হোটেলের ব্র্যান্ডের রঙ ব্যবহার করে একটি ক্লিন, রেসপন্সিভ CSS গ্রেডিয়েন্ট দিয়ে প্রতিস্থাপন করি, যা পেজের ওজন উল্লেখযোগ্যভাবে হ্রাস করে। ৩. JavaScript সরলীকরণ: মাল্টি-স্টেপ অ্যানিমেটেড উইজার্ডটি এক্সটার্নাল jQuery এবং GSAP লাইব্রেরির উপর নির্ভর করে। আমরা এই এক্সটার্নাল ডিপেন্ডেন্সিগুলি সরিয়ে ফেলি এবং ফর্মটিকে একটি সিঙ্গেল-পেজ, সিঙ্গেল-কলাম HTML স্ট্রাকচারে রিফ্যাক্টর করি। ফর্ম ভ্যালিডেশন লাইটওয়েট, ভ্যানিলা JavaScript-এ পুনরায় লেখা হয়েছে। ৪. অথেন্টিকেশন হ্যান্ডশেক: ফর্ম সাবমিশনটিকে একটি AJAX-ভিত্তিক সাবমিশন থেকে একটি নেটিভ HTML <form action="/submit" method="POST">-এ পরিবর্তন করা হয়েছে যাতে একটি ফুল-পেজ রিডাইরেক্ট ট্রিগার করা যায়, যা iOS Websheet-কে তার ক্যানারি চেক রান করতে এবং 'Done' বোতামটি প্রদর্শন করতে দেয়।

পরীক্ষকের মন্তব্য: এই সিনারিওটি হাই-এন্ড ক্রিয়েটিভ ডিজাইন এবং Captive Portal ওয়েবভিউ-এর কঠোর সিকিউরিটি সীমাবদ্ধতার মধ্যে ক্লাসিক দ্বন্দ্বকে উপস্থাপন করে। ক্রিয়েটিভ এজেন্সিগুলি প্রায়শই Captive Portal-কে একটি স্ট্যান্ডার্ড ডেস্কটপ ওয়েবসাইট হিসেবে বিবেচনা করে। তবে, ডিভাইসটি প্রি-অথেন্টিকেটেড অবস্থায় থাকার কারণে, নেটওয়ার্ক সমস্ত এক্সটার্নাল ট্রাফিক ব্লক করে দেয়। CSS ইনলাইন করে, সিস্টেম-স্ট্যাক ফন্ট ব্যবহার করে, Base64-এনকোডিং অ্যাসেট এবং নেটিভ ফর্ম সাবমিশন ব্যবহার করে, আমরা iOS এবং Android ডিভাইসে ১০০% অপারেশনাল নির্ভরযোগ্যতা অর্জনের পাশাপাশি প্রিমিয়াম ব্র্যান্ডের নান্দনিকতা বজায় রাখি।

৪৫০টি স্টোর সহ একটি জাতীয় রিটেল চেইন [Retail](/industries/retail) তাদের CRM-কে সমৃদ্ধ করতে WiFi স্প্ল্যাশ পেজের মাধ্যমে গেস্টদের ইমেল ক্যাপচার করতে চায়। তাদের গেস্টদের মার্কেটিং নিউজলেটারে অপ্ট-ইন করা প্রয়োজন। প্রাথমিক ডিজাইনে একটি প্রি-চেক করা 'আমি মার্কেটিং ইমেল পেতে সম্মত' চেকবক্স রয়েছে। তদুপরি, পোর্টালটি তাদের সদর দফতরে একটি একক লোকাল সার্ভারে হোস্ট করা হয়েছে। পিক আওয়ারে (শনিবার বিকেল), সারা দেশের গেস্টরা মারাত্মক বিলম্বের সম্মুখীন হন এবং অনেকেই লগইন পেজ লোড করতে পারেন না, যার ফলে ডেটা ক্যাপচারের হার ব্যাপকভাবে হ্রাস পায়।

আমাদের অবশ্যই কমপ্লায়েন্স লঙ্ঘন এবং ইনফ্রাস্ট্রাকচারের বাধা উভয়ই সমাধান করতে হবে:

১. কমপ্লায়েন্স প্রতিকার: GDPR এবং CCPA-এর অধীনে, প্রি-চেক করা কনসেন্ট বক্সগুলি বেআইনি। আমরা ডিফল্টরূপে মার্কেটিং কনসেন্ট চেকবক্সটি আনচেকড রাখতে HTML পরিবর্তন করি (<input type="checkbox" id="marketing_consent">)। মার্কেটিং অপ্ট-ইন থেকে আইনি চুক্তিকে আলাদা করতে আমরা ব্যবহারের শর্তাবলীর (Terms of Service) জন্য একটি পৃথক, বাধ্যতামূলক চেকবক্সও যুক্ত করি। ২. ইনফ্রাস্ট্রাকচার স্কেলিং: একটি একক সেন্ট্রালাইজড সার্ভারে একটি জাতীয় Captive Portal হোস্ট করা একটি সিঙ্গেল পয়েন্ট অফ ফেইলিওর এবং একটি বিশাল লেটেন্সি বাধা তৈরি করে। আমরা পোর্টাল ফ্রন্টএন্ডকে এজ-ক্যাশিং সহ একটি অত্যন্ত নির্ভরযোগ্য, গ্লোবালি ডিস্ট্রিবিউটেড কনটেন্ট ডেলিভারি নেটওয়ার্কে (CDN) মাইগ্রেট করি। ৩. RADIUS ইন্টিগ্রেশন: আমরা লোকাল স্টোর অ্যাক্সেস পয়েন্টগুলিকে একটি ক্লাউড-নেটিভ RADIUS ক্লাস্টারের দিকে নির্দেশ করার জন্য কনফিগার করি যাতে অ্যাক্টিভ-অ্যাক্টিভ রিডান্ডেন্সি থাকে, যা নিশ্চিত করে যে শনিবারের পিক ট্রাফিকের মধ্যেও অথেন্টিকেশন রিকোয়েস্টগুলি ৫০ মিলিসেকেন্ডের কম লেটেন্সিতে এজে লোকালি প্রসেস করা হয়। ৪. Purple মাইগ্রেশন: এই সম্পূর্ণ ইঞ্জিনিয়ারিং ওভারহেড দূর করতে, রিটেইলার Purple-এ মাইগ্রেট করে। Purple-এর বিল্ট-ইন GDPR কনসেন্ট টুলিং স্বয়ংক্রিয়ভাবে কমপ্লায়েন্ট অপ্ট-ইনগুলি পরিচালনা করে এবং তাদের গ্লোবালি ডিস্ট্রিবিউটেড ক্লাউড ইনফ্রাস্ট্রাকচার ৯৯.৯৯% আপটাইম সহ প্রতিদিন লক্ষ লক্ষ অথেন্টিকেশন পরিচালনা করে, যা স্কেলিংয়ের বাধা সম্পূর্ণরূপে সমাধান করে।

পরীক্ষকের মন্তব্য: প্রি-চেক করা কনসেন্ট চেকবক্সগুলি একটি গুরুতর কমপ্লায়েন্স ঝুঁকি তৈরি করে যা বিশাল রেগুলেটরি জরিমানার কারণ হতে পারে। ব্যবহারের শর্তাবলী (Terms of Service) থেকে মার্কেটিং কনসেন্ট আলাদা করা একটি প্রযুক্তিগত এবং আইনি সর্বোত্তম অনুশীলন। ইনফ্রাস্ট্রাকচারের দিক থেকে, Captive Portal-এর সেন্ট্রালাইজড হোস্টিং একটি অ্যান্টি-প্যাটার্ন। দেশব্যাপী রিটেল ফুটপ্রিন্টের জন্য একটি ক্লাউড-নেটিভ RADIUS ব্যাকএন্ডের সাথে যুক্ত একটি ডিসেন্ট্রালাইজড, এজ-ক্যাশড ফ্রন্টএন্ড প্রয়োজন। Purple-এর মতো একটি ম্যানেজড প্ল্যাটফর্মে মাইগ্রেট করা এই আর্কিটেকচারাল জটিলতা দূর করে, যা রিটেইলারকে ডেটাবেস স্কেলিংয়ের পরিবর্তে মার্কেটিং ক্যাম্পেইনে ফোকাস করতে সাহায্য করে।

অনুশীলনী প্রশ্নসমূহ

Q1. একটি বড় আন্তর্জাতিক বিমানবন্দরের [Transport](/industries/transport) আইটি টিম একটি কাস্টম-কোডেড captive portal স্থাপন করেছে। তারা লক্ষ্য করেছেন যে, Android ব্যবহারকারীরা নির্বিঘ্নে কানেক্ট করতে পারলেও, iOS ব্যবহারকারীদের একটি বড় অংশ এমন একটি সমস্যার সম্মুখীন হচ্ছেন যেখানে তারা সফলভাবে অথেন্টিকেট করলেও ওয়েব ব্রাউজ করতে পারছেন না। গভীরভাবে পরীক্ষা করার পর দেখা গেল যে, iOS ডিভাইসগুলো SSID-এর সাথে কানেক্টেড দেখাচ্ছে, কিন্তু captive পপআপের উপরের ডানদিকের বোতামটিতে এখনও 'Done'-এর পরিবর্তে 'Cancel' লেখা রয়েছে। এই সমস্যার মূল কারণ কী এবং ডেভেলপারের এটি কীভাবে সমাধান করা উচিত?

ইঙ্গিত: Apple CNA helper কীভাবে সনাক্ত করে যে একটি নেটওয়ার্ক captive থেকে authenticated অবস্থায় পরিবর্তিত হয়েছে এবং এই পরীক্ষাটি ট্রিগার করার জন্য কী ধরনের ব্রাউজার অ্যাকশন প্রয়োজন তা বিশ্লেষণ করুন।

মডেল উত্তর দেখুন

এর মূল কারণ হলো পোর্টালের সাকসেস পেজটি ফুল-পেজ HTTP নেভিগেশন করার পরিবর্তে JavaScript (AJAX/SPA রাউটিং)-এর মাধ্যমে ডাইনামিকালি UI আপডেট করছে। Apple iOS Captive Network Assistant (CNA) মিনি-ব্রাউজারটি শুধুমাত্র তখনই তার ব্যাকগ্রাউন্ড কানেক্টিভিটি চেক (যেমন captive.apple.com-এ canary রিকোয়েস্ট) পুনরায় রান করে যখন একটি ফুল-পেজ URL রিডাইরেক্ট বা নেভিগেশন ঘটে। ডেভেলপার যদি AJAX-এর মাধ্যমে লগইন ফর্ম সাবমিট করেন এবং DOM-এ কেবল একটি 'Success' মেসেজ দেখান, তবে CNA জানতে পারে না যে নেটওয়ার্কটি আনলক করা হয়েছে। ফলস্বরূপ, উপরের ডানদিকের বোতামটি 'Cancel' হিসেবেই থেকে যায়। ব্যবহারকারী যদি প্রস্থান করার জন্য 'Cancel'-এ ক্লিক করেন, তবে OS ধরে নেয় যে লগইন ব্যর্থ হয়েছে এবং WiFi নেটওয়ার্ক থেকে ডিসকানেক্ট করে দেয়।

সমাধান: অথেন্টিকেশন সাকসেস হ্যান্ডলারটিকে এমনভাবে পরিবর্তন করতে হবে যাতে এটি একটি ফুল-পেজ রিডাইরেক্ট করতে বাধ্য করে। এটি একটি স্ট্যান্ডার্ড HTML <form action="/submit" method="POST">-এর মাধ্যমে নেটিভলি লগইন ফর্ম সাবমিট করে অথবা API থেকে সফল অথেন্টিকেশন রেসপন্স পাওয়ার পর JavaScript-এ window.location.href = '/success_landing_page' এক্সিকিউট করে অর্জন করা যেতে পারে। এটি প্রয়োজনীয় ফুল-পেজ লোড ট্রিগার করে, যা CNA helper-কে নেটওয়ার্ক স্টেট পুনরায় মূল্যায়ন করতে, canary URL-টি এখন অ্যাক্সেসযোগ্য কিনা তা যাচাই করতে এবং উপরের ডানদিকের বোতামটি পরিবর্তন করে 'Done' করতে বাধ্য করে।

Q2. একটি স্টেডিয়াম অপারেশন টিম [Events] একটি গেস্ট WiFi নেটওয়ার্ক চালু করতে চায় যা মার্কেটিং অপ্ট-ইন সংগ্রহ করবে। কমপ্লায়েন্স অফিসার জোর দিয়ে বলেছেন যে পোর্টালটি অবশ্যই ১০০% GDPR-compliant হতে হবে। ডেভেলপমেন্ট টিম একটি মকআপ উপস্থাপন করেছে যেখানে লগইন ফর্মে একটি প্রি-চেকড বক্স রয়েছে যাতে লেখা আছে 'I agree to the Terms of Service and consent to receive marketing newsletters'। এই ডিজাইনটি কেন নন-কমপ্লায়েন্ট, এবং উচ্চ কনভার্সন রেট বজায় রেখে GDPR সন্তুষ্ট করার জন্য HTML/CSS এবং ফর্মের গঠন কীভাবে রিফ্যাক্টর করা উচিত?

ইঙ্গিত: সুনির্দিষ্ট সম্মতি (explicit consent), ব্যবহারের শর্তাবলী (terms of service) থেকে মার্কেটিং অপ্ট-ইন আলাদা করা এবং মোবাইল স্ক্রিনে আইনি লেখার দৃশ্যমানতা সম্পর্কিত GDPR-এর কঠোর প্রয়োজনীয়তাগুলো বিবেচনা করুন।

মডেল উত্তর দেখুন

প্রস্তাবিত ডিজাইনটি দুটি প্রধান ক্ষেত্রে GDPR লঙ্ঘন করে: প্রথমত, প্রি-চেকড চেকবক্সগুলো বৈধ সম্মতি হিসেবে গণ্য হয় না, যা অবশ্যই অবাধে দেওয়া, সুনির্দিষ্ট, তথ্যভিত্তিক এবং দ্ব্যর্থহীন হতে হবে। দ্বিতীয়ত, Terms of Service-এর সাথে মার্কেটিং সম্মতি যুক্ত করা নন-কমপ্লায়েন্ট; WiFi পরিষেবা ব্যবহারের শর্ত হিসেবে কোনো ব্যবহারকারীকে মার্কেটিং ইমেল গ্রহণ করতে বাধ্য করা যাবে না।

রিফ্যাক্টরিং স্ট্র্যাটেজি:

সম্মতি আলাদা করা (Decouple Consent): চেকবক্সটিকে দুটি আলাদা চেকবক্সে বিভক্ত করুন। চেকবক্স A বাধ্যতামূলক এবং এটি Terms of Service ও Privacy Policy কভার করে। চেকবক্স B ঐচ্ছিক এবং এটি মার্কেটিং নিউজলেটার অপ্ট-ইন কভার করে।
আনচেকড সেট করা: HTML-এ ডিফল্টরূপে উভয় চেকবক্স আনচেকড থাকা নিশ্চিত করুন (checked অ্যাট্রিবিউট বাদ দিয়ে)।
CSS দৃশ্যমানতা: যেহেতু ৯০%-এর বেশি ব্যবহারকারী মোবাইলে থাকেন, তাই চেকবক্সগুলোকে সরাসরি 'Connect' বোতামের উপরে রাখুন যাতে স্ক্রল না করেই সেগুলো 'above the fold' দৃশ্যমান হয়। পড়ার সুবিধার জন্য একটি সিস্টেম ফন্ট স্ট্যাক ব্যবহার করুন এবং লেবেলের ফন্ট সাইজ 14px ও লাইন-হাইট 1.4 সেট করুন।
শর্তাবলীর স্ক্রলবক্স: আইনি লেখার কারণে ফর্মের উপাদানগুলো যাতে স্ক্রিনের বাইরে চলে না যায়, সেজন্য বিস্তারিত Terms of Service-কে একটি নির্দিষ্ট উচ্চতার স্ক্রলযোগ্য কন্টেইনারে রাখুন (max-height: 100px; overflow-y: auto; background-color: #F5F1ED; border: 1px solid #D1D5DB; border-radius: 6px;), যা একটি টেক্সট লিঙ্কের মাধ্যমে টগল করে খোলা বা বন্ধ করা যাবে। এটি সম্পূর্ণ আইনি কমপ্লায়েন্স নিশ্চিত করার পাশাপাশি একটি পরিচ্ছন্ন এবং উচ্চ-কনভার্সন লেআউট বজায় রাখে।

Q3. একটি রিটেইল চেইন [Retail](/industries/retail) ১০০টি স্টোর জুড়ে একটি কাস্টম-কোডেড স্প্ল্যাশ পেজ স্থাপন করছে। ডিজাইনার Google Fonts (Montserrat) ব্যবহার করেছেন এবং HTML head-এ একটি CDN-হোস্টেড Bootstrap স্টাইলশীটের লিঙ্ক যুক্ত করেছেন। কর্পোরেট নেটওয়ার্কে টেস্ট করার সময় পেজটি চমৎকারভাবে রেন্ডার হয়। তবে, একটি টেস্ট স্টোর AP-তে captive নেটওয়ার্ক কনফিগারেশনের সাথে স্থাপন করার সময় পেজটি স্টাইলহীন Times New Roman টেক্সট, ভাঙা অ্যালাইনমেন্ট এবং অনুপস্থিত আইকন সহ রেন্ডার হয়। কেন এমন ঘটে এবং অ্যাসেটগুলো কীভাবে রিফ্যাক্টর করতে হবে?

ইঙ্গিত: ব্যবহারকারী অথেন্টিকেট হওয়ার আগে নেটওয়ার্ক কানেকশনের অবস্থা বিশ্লেষণ করুন এবং ব্রাউজার কীভাবে walled garden-এর বাইরের ডোমেনগুলোতে এক্সটার্নাল HTTP রিকোয়েস্ট হ্যান্ডেল করে তা নির্ধারণ করুন।

মডেল উত্তর দেখুন

এই ব্যর্থতার কারণ হলো স্প্ল্যাশ পেজটি লোড হওয়ার সময় ডিভাইসটি একটি আন-অথেন্টিকেটেড, captive অবস্থায় থাকে। এই অবস্থায়, ওয়্যারলেস গেটওয়ে সমস্ত আউটবাউন্ড ইন্টারনেট ট্রাফিক ব্লক করে দেয় এবং শুধুমাত্র গেটওয়ের Walled Garden-এ স্পষ্টভাবে হোয়াইটলিস্ট করা ডোমেনগুলোতে রিকোয়েস্টের অনুমতি দেয়। যেহেতু Bootstrap (cdn.jsdelivr.net) এবং Google Fonts (fonts.googleapis.com)-এর CDN ডোমেনগুলো হোয়াইটলিস্ট করা নেই, তাই স্টাইলশীট এবং ফন্ট ফাইলগুলো আনার জন্য ব্রাউজারের রিকোয়েস্টগুলো নীরবে ব্যর্থ হয়। ফলস্বরূপ, ব্রাউজার তার ডিফল্ট রেন্ডারিং ইঞ্জিনে ফিরে যায়, যার ফলে স্টাইলহীন HTML (Times New Roman টেক্সট) এবং ভাঙা লেআউট তৈরি হয়।

রিফ্যাক্টরিং স্ট্র্যাটেজি:

ইনলাইন CSS: এক্সটার্নাল Bootstrap স্টাইলশীট লিঙ্কটি সরিয়ে ফেলুন। প্রয়োজনীয় CSS grid/flexbox রুলগুলো সরাসরি HTML <head>-এর একটি <style> ব্লকে কপি করুন। এটি নিশ্চিত করে যে সমস্ত লেআউট ইন্সট্রাকশন প্রাথমিক সিঙ্গেল-পেজ পেলোডেই সরবরাহ করা হয়েছে।
সিস্টেম ফন্ট স্ট্যাক ইমপ্লিমেন্ট করা: Google Fonts-এর @import বা <link> কলটি সরিয়ে ফেলুন। CSS-এ এটিকে একটি নেটিভ সিস্টেম ফন্ট স্ট্যাক দিয়ে প্রতিস্থাপন করুন (font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;)। এটি ডিভাইসটিকে অপারেটিং সিস্টেমে আগে থেকেই ইনস্টল করা উচ্চ-মানের ফন্টগুলো ব্যবহার করতে বাধ্য করে, যা এক্সটার্নাল নেটওয়ার্কের প্রয়োজনীয়তা সম্পূর্ণভাবে দূর করে।
আইকন/লোগো Base64 এনকোড করা: লেআউটটি যদি এক্সটার্নাল ইমেজ বা আইকন লাইব্রেরির (যেমন FontAwesome) উপর নির্ভর করে, তবে এই আইকনগুলোকে SVG ফরম্যাটে রূপান্তর করুন এবং HTML-এর ভেতরে ইনলাইন হিসেবে অথবা CSS-এ Base64 Data URI হিসেবে এম্বেড করুন। এটি গ্যারান্টি দেয় যে পেজটি ১০০% স্বয়ংসম্পূর্ণ এবং কোনো ইন্টারনেট কানেক্টিভিটি না থাকলেও নিখুঁতভাবে রেন্ডার হয়।

এই সিরিজে পড়া চালিয়ে যান

Starlink-এ কীভাবে একটি Captive Portal সেট আপ করবেন: দূরবর্তী এবং সামুদ্রিক ভেন্যুগুলোর জন্য একটি নির্দেশিকা

এই নির্দেশিকাটিতে কীভাবে নেটিভ Starlink হার্ডওয়্যার বাইপাস করতে হয় এবং এন্টারপ্রাইজ রাউটিং সরঞ্জাম ব্যবহার করে একটি ক্লাউড-পরিচালিত captive portal সংহত করতে হয় তা বিস্তারিতভাবে আলোচনা করা হয়েছে। আপনি কীভাবে CGNAT সীমাবদ্ধতা কাটিয়ে উঠবেন, VLAN সেগমেন্টেশন প্রয়োগ করবেন, স্যাটেলাইট ব্যান্ডউইথ সীমাবদ্ধতা পরিচালনা করবেন এবং নিয়ন্ত্রক সম্মতি নিশ্চিত করবেন তা শিখবেন।

Captive Portal-এর সর্বোত্তম অনুশীলনসমূহ: উচ্চ কনভার্সন এবং কমপ্লায়েন্সের জন্য ডিজাইন

এই টেকনিক্যাল গাইডটি IT ম্যানেজার, নেটওয়ার্ক আর্কিটেক্ট এবং ভেন্যু অপারেশন ডিরেক্টরদের জন্য নেটওয়ার্ক সিকিউরিটির সাথে উচ্চ ইউজার কনভার্সনের ভারসাম্য বজায় রেখে captive portals স্থাপনের একটি সম্পূর্ণ ব্লুপ্রিন্ট প্রদান করে। এটি VLAN সেগমেন্টেশন এবং RADIUS অথেন্টিকেশন থেকে শুরু করে GDPR-সম্মত সম্মতি (consent) ডিজাইন এবং অথেন্টিকেশন পদ্ধতি নির্বাচন পর্যন্ত সম্পূর্ণ আর্কিটেকচার কভার করে। ২০২৪ সালে ৮০,০০০-এরও বেশি ভেন্যু এবং ৪৪০ মিলিয়ন লগইনে Purple-এর অপারেশনাল অভিজ্ঞতা থেকে নেওয়া প্রতিটি সুপারিশ বাস্তব ডিপ্লয়মেন্ট ডেটার ওপর ভিত্তি করে তৈরি।

সর্বোচ্চ নেটওয়ার্ক নিরাপত্তা এবং ব্যবহারকারী রূপান্তরের জন্য কীভাবে Captive Portals অপ্টিমাইজ করবেন

এই নির্দেশিকাটি এন্টারপ্রাইজ ভেন্যু জুড়ে captive portals অপ্টিমাইজ করার জন্য একটি সম্পূর্ণ প্রযুক্তিগত ব্লুপ্রিন্ট প্রদান করে, যার মধ্যে নেটওয়ার্ক সেগমেন্টেশন আর্কিটেকচার, প্রমাণীকরণ পদ্ধতি নির্বাচন, GDPR-সম্মত সম্মতি ডিজাইন এবং রূপান্তর অপ্টিমাইজেশন অন্তর্ভুক্ত রয়েছে। এটি হোটেল, রিটেইল চেইন, স্টেডিয়াম এবং পাবলিক-সেক্টর সংস্থাগুলির আইটি ম্যানেজার, নেটওয়ার্ক আর্কিটেক্ট এবং CTO-দের জন্য লেখা হয়েছে যাদের ফার্স্ট-পার্টি ডেটা সংগ্রহের সাথে নেটওয়ার্ক নিরাপত্তার ভারসাম্য বজায় রাখতে হবে। Purple ২০২৪ সালে ৪৪০ মিলিয়ন লগইন সহ ৮০,০০০+ ভেন্যুতে captive portal অবকাঠামো পরিচালনা করে এবং এখানকার ফ্রেমওয়ার্কগুলি সেই কর্মক্ষম অভিজ্ঞতারই প্রতিফলন ঘটায়।