कस्टम कैप्टिव पोर्टल: HTML और CSS गाइड

यह आधिकारिक तकनीकी संदर्भ गाइड एक कस्टम कैप्टिव पोर्टल लैंडिंग पेज को डिज़ाइन और कोड करने के लिए आवश्यक विकास मानकों, CSS आर्किटेक्चर और नेटवर्क-स्तरीय बाधाओं को रेखांकित करती है। यह फ्रंटएंड डेवलपर्स और नेटवर्क आर्किटेक्ट्स को Apple CNA और Android वेबव्यू वातावरण को नेविगेट करने के लिए व्यावहारिक रणनीतियाँ प्रदान करती है, जिससे पिक्सेल-परफेक्ट, अनुपालनकारी और अत्यधिक प्रदर्शन करने वाले अतिथि WiFi अनुभवों को सुनिश्चित किया जा सके।

📖 11 मिनट का पाठ📝 2,731 शब्द🔧 2 हल किए गए उदाहरण❓ 3 अभ्यास प्रश्न📚 8 मुख्य परिभाषाएं

इस गाइड को सुनें

पॉडकास्ट ट्रांसक्रिप्ट देखें

कस्टम कैप्टिव पोर्टल: HTML और CSS गाइड — एक Purple तकनीकी ब्रीफिंग

[परिचय]

Purple तकनीकी ब्रीफिंग श्रृंखला में स्वागत है। आज हम एक ऐसी चीज़ की बारीकियों में जा रहे हैं जो हर एक अतिथि WiFi परिनियोजन को प्रभावित करती है — कैप्टिव पोर्टल। विशेष रूप से, हम बात कर रहे हैं कि कस्टम कैप्टिव पोर्टल लैंडिंग पेज के लिए साफ, विश्वसनीय HTML और CSS कैसे लिखें।

यदि आप कभी होटल के WiFi से जुड़े हैं और आपका स्वागत एक खराब स्प्लैश पेज से हुआ है — गायब छवियां, बिना स्टाइल वाला टेक्स्ट, एक लॉगिन बटन जो स्पर्श का जवाब नहीं देता — तो आपने अनुभव किया है कि क्या होता है जब कोई डेवलपर उस वातावरण की बाधाओं को समझे बिना पोर्टल बनाता है जिसमें यह चलता है। आज, हम यह सुनिश्चित करने जा रहे हैं कि आपके साथ ऐसा न हो।

यह ब्रीफिंग उन फ्रंटएंड डेवलपर्स, रचनात्मक डिजाइनरों और वेब डेवलपर्स के लिए है जो या तो शुरुआत से कैप्टिव पोर्टल बना रहे हैं या मौजूदा टेम्पलेट को कस्टमाइज़ कर रहे हैं। हम HTML संरचना, महत्वपूर्ण CSS नियमों, Apple CNA मिनी-ब्राउज़र प्रतिबंधों को कवर करेंगे जो अनुभवी डेवलपर्स को भी उलझा देते हैं, और यह भी देखेंगे कि Purple के पोर्टल बिल्डर जैसे प्लेटफ़ॉर्म इस जटिलता के अधिकांश हिस्से को पूरी तरह से कैसे समाप्त कर सकते हैं।

आइए शुरू करते हैं।

[तकनीकी गहन विश्लेषण]

सबसे पहले, आइए स्थापित करें कि नेटवर्क स्तर पर कैप्टिव पोर्टल वास्तव में क्या है। जब कोई डिवाइस ऐसे WiFi नेटवर्क से जुड़ता है जिसके लिए प्रमाणीकरण की आवश्यकता होती है, तो नेटवर्क HTTP ट्रैफ़िक को इंटरसेप्ट करता है और उपयोगकर्ता को लैंडिंग पेज पर रीडायरेक्ट करता है। यह कैप्टिव पोर्टल है। उपयोगकर्ता एक स्प्लैश पेज देखता है, एक कार्रवाई पूरी करता है — ईमेल दर्ज करना, शर्तें स्वीकार करना, सोशल के माध्यम से लॉग इन करना — और नेटवर्क फिर पूर्ण इंटरनेट एक्सेस प्रदान करता है।

समझने वाली महत्वपूर्ण बात यह है कि यह पेज कहाँ रेंडर होता है। iOS उपकरणों पर, यह Apple के Captive Network Assistant — CNA — के भीतर खुलता है, जो कि एक स्ट्रिप्ड-डाउन WebKit वेबव्यू है। यह Safari नहीं है। इसमें कोई लगातार रहने वाली कुकीज़ नहीं होती हैं। यह बाहरी संसाधनों को लोड नहीं कर सकता। इसमें सीमित JavaScript समर्थन है। और जैसे ही उपयोगकर्ता किसी अन्य ऐप पर स्विच करता है, यह बंद हो जाता है। macOS पर, CNA एक निश्चित 900 गुणा 572 पिक्सेल पर रेंडर होता है। Android पर, आधुनिक डिवाइस Chrome कस्टम टैब का उपयोग करते हैं, जो काफी अधिक सक्षम हैं। Windows 10 उपयोगकर्ता का डिफ़ॉल्ट ब्राउज़र खोलता है। Samsung डिवाइस Samsung इंटरनेट का उपयोग करते हैं।

यह प्लेटफ़ॉर्म विखंडन प्रोडक्शन में खराब कैप्टिव पोर्टलों का सबसे बड़ा स्रोत है। डेवलपर्स अपने Android फोन पर परीक्षण करते हैं, सब कुछ बहुत अच्छा लगता है, और फिर होटल के iPhone का उपयोग करने वाले मेहमानों को बिना स्टाइल वाले टेक्स्ट के साथ एक सफेद स्क्रीन मिलती है। तो आइए बात करते हैं कि सुरक्षात्मक रूप से कोडिंग कैसे करें।

कैप्टिव पोर्टल HTML और CSS के लिए सुनहरा नियम यह है: पेज के साथ ऐसा व्यवहार करें जैसे कि उसके पास कोई इंटरनेट कनेक्शन नहीं है। क्योंकि प्रमाणीकरण चरण के दौरान, ऐसा ही होता है। नेटवर्क कैप्टिव है। कोई भी संसाधन जिसे आपका पेज बाहरी URL से लोड करने का प्रयास करता है — एक Google Font, एक CDN-होस्टेड स्टाइलशीट, एक JavaScript लाइब्रेरी, एक लोगो छवि — चुपचाप विफल हो जाएगा या एक लोडिंग स्पिनर का कारण बनेगा जो कभी हल नहीं होता।

HTML संरचना से शुरू करते हैं। आपका दस्तावेज़ एक साफ HTML5 पेज होना चाहिए। head में, आपको एक व्यूपोर्ट मेटा टैग की आवश्यकता होती है जिसमें कंटेंट width=device-width और initial-scale=1 सेट हो। मोबाइल रेंडरिंग के लिए यह गैर-परक्राम्य है। इसके बिना, iOS पेज को 980 पिक्सेल चौड़ा रेंडर करेगा और इसे छोटा कर देगा, जिससे सब कुछ बहुत छोटा हो जाएगा।

आपका CSS इनलाइन होना चाहिए — या तो head तत्व के भीतर एक स्टाइल ब्लॉक में, या व्यक्तिगत तत्वों पर इनलाइन स्टाइल विशेषताओं के रूप में। लिंक टैग के माध्यम से जुड़े बाहरी स्टाइलशीट का उपयोग न करें। वह स्टाइलशीट आपके सर्वर पर रहती है, जिसे कैप्टिव नेटवर्क प्रमाणीकरण के दौरान नहीं पहुंच सकता। पेज पूरी तरह से बिना स्टाइल के रेंडर होगा।

फ़ॉन्ट्स के लिए, सिस्टम फ़ॉन्ट स्टैक का उपयोग करें। कुछ इस तरह: font-family — apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif। यह ब्राउज़र को उपलब्ध सिस्टम फ़ॉन्ट का उपयोग करने के लिए कहता है। Google Fonts का उपयोग न करें। इम्पोर्ट कॉल विफल हो जाएगी, और आपका फ़ॉलबैक फ़ॉन्ट Times New Roman होगा, जो वह ब्रांड अनुभव नहीं है जिसके लिए आपका क्लाइंट भुगतान कर रहा है।

छवियों के लिए — आपका लोगो, पृष्ठभूमि ग्राफिक्स, सजावटी तत्व — आपके पास दो विकल्प हैं। या तो उन्हें उसी कैप्टिव पोर्टल सर्वर से परोसें, जिसका अर्थ है कि वे उसी स्थानीय नेटवर्क पर हैं और प्रमाणीकरण पूरा होने से पहले सुलभ हैं। या, बेहतर होगा कि उन्हें सीधे अपने HTML या CSS में Base64 डेटा URIs के रूप में एन्कोड करें। यह बाहरी निर्भरता को पूरी तरह से समाप्त कर देता है।

अब आइए पेज लेआउट के बारे में बात करते हैं। चूंकि नब्बे प्रतिशत से अधिक कैप्टिव पोर्टल लॉगिन मोबाइल उपकरणों पर होते हैं, इसलिए आपका डिज़ाइन मोबाइल-फ़र्स्ट होना चाहिए। इसका मतलब है एक सिंगल-कॉलम लेआउट, लगभग 480 पिक्सेल की अधिकतम चौड़ाई, पेज पर केंद्रित। body तत्व पर फ्लेक्सबॉक्स का उपयोग करें — display flex, flex-direction column, align-items centre, justify-content centre, min-height 100 viewport height। यह आपके कंटेंट कार्ड को किसी भी स्क्रीन आकार पर लंबवत और क्षैतिज रूप से केंद्रित करता है।

आपके प्राथमिक कॉल-टू-एक्शन बटन को स्पर्श-अनुकूल होना चाहिए। Apple के Human Interface Guidelines न्यूनतम 44 गुणा 44 पिक्सेल का टैप लक्ष्य निर्दिष्ट करते हैं। व्यवहार में, एक प्राथमिक CTA के लिए, आप लगभग 48 पिक्सेल लंबा, कंटेनर के भीतर पूर्ण चौड़ाई वाला, और लगभग 8 से 12 पिक्सेल के बॉर्डर-रेडियस वाला कुछ चाहते हैं।

फॉर्म फ़ील्ड के लिए — ईमेल इनपुट, नाम इनपुट — फ़ॉन्ट-आकार कम से कम 16 पिक्सेल सेट करें। यह महत्वपूर्ण है। iOS Safari और CNA 16 पिक्सेल से कम फ़ॉन्ट-आकार वाले किसी भी इनपुट फ़ील्ड पर स्वचालित रूप से ज़ूम इन करेंगे, जो आपके सावधानीपूर्वक तैयार किए गए लेआउट को बिगाड़ देता है। फ़ॉन्ट-आकार को 16 पिक्सेल या उससे अधिक सेट करना इस ज़ूम व्यवहार को रोकता है।

कानूनी सहमति अनुभाग पर विशेष ध्यान देने की आवश्यकता है। GDPR के तहत, यदि आप व्यक्तिगत डेटा एकत्र कर रहे हैं — भले ही वह केवल एक ईमेल पता हो — तो आपको स्पष्ट, सूचित सहमति की आवश्यकता है। इसका मतलब है एक चेकबॉक्स जो डिफ़ॉल्ट रूप से अनचेक हो, एक दृश्यमान लेबल के साथ जो स्पष्ट रूप से बताता है कि उपयोगकर्ता किस बात के लिए सहमति दे रहा है। चेकबॉक्स को पहले से टिक न करें। सहमति चेकबॉक्स स्वयं बिना स्क्रॉल किए स्पष्ट रूप से दिखाई देना चाहिए।

अब, विशेष रूप से iOS CNA के लिए एक महत्वपूर्ण कार्यान्वयन विवरण। जब उपयोगकर्ता प्रमाणीकरण पूरा करता है, तो CNA निगरानी करता है कि क्या कैप्टिव डोमेन सुलभ हो गया है। यह जांच पूर्ण पेज नेविगेशन द्वारा ट्रिगर होती है, न कि JavaScript AJAX कॉल द्वारा। इसका मतलब यह है कि यदि आप एक सिंगल-पेज ऐप बनाते हैं जो fetch या XMLHttpRequest के माध्यम से फॉर्म सबमिट करता है और पूर्ण पेज रीडायरेक्ट के बिना DOM को अपडेट करता है, तो CNA कभी भी यह पता नहीं लगा पाएगा कि प्रमाणीकरण पूरा हो गया है। आपको प्रमाणीकरण के बाद एक नए URL पर रीडायरेक्ट करना होगा — एक पूर्ण HTTP रीडायरेक्ट, न कि JavaScript DOM हेरफेर। यह कैप्टिव पोर्टल विकास में सबसे आम गलतियों में से एक है।

JavaScript के लिए, इसे न्यूनतम रखें। CNA के पास सीमित JS समर्थन है और localStorage या sessionStorage तक कोई पहुंच नहीं है। CNA बंद होने पर कुकीज़ नष्ट हो जाती हैं। इन ब्राउज़र APIs पर निर्भर कोई भी स्थिति प्रबंधन विफल हो जाएगा। वेनिला JavaScript इवेंट लिसनर्स ठीक हैं। jQuery एक 30-किलोबाइट बाहरी निर्भरता है जो लोड होने में विफल हो जाएगी।

[कार्यान्वयन सिफारिशें और नुकसान]

मैं आपको व्यावहारिक कार्यान्वयन चेकलिस्ट देता हूँ। पहला: व्यूपोर्ट मेटा टैग, हमेशा। दूसरा: सभी CSS इनलाइन, कोई बाहरी स्टाइलशीट नहीं। तीसरा: सभी छवियां या तो कैप्टिव पोर्टल सर्वर से परोसी जाएं या Base64-एन्कोडेड हों। चौथा: सिस्टम फ़ॉन्ट स्टैक, कोई वेब फ़ॉन्ट नहीं। पांचवां: सभी इनपुट फ़ील्ड पर न्यूनतम 16 पिक्सेल फ़ॉन्ट आकार। छठा: स्पर्श-अनुकूल टैप लक्ष्य, न्यूनतम 44 गुणा 44 पिक्सेल। सातवां: सिंगल कॉलम लेआउट, अधिकतम-चौड़ाई 480 पिक्सेल। आठवां: प्रमाणीकरण पर पूर्ण पेज रीडायरेक्ट, न कि JavaScript स्थिति अपडेट। नौवां: GDPR-अनुपालन सहमति चेकबॉक्स, डिफ़ॉल्ट रूप से अनचेक। दसवां: वास्तविक कैप्टिव नेटवर्क का उपयोग करके वास्तविक iOS डिवाइस पर परीक्षण करें, न कि ब्राउज़र पूर्वावलोकन पर।

नुकसान जो मैं अक्सर प्रोडक्शन में देखता हूँ। नंबर एक: Google Fonts — इम्पोर्ट हटा दें, यह विफल हो जाएगा। नंबर दो: बाहरी JavaScript लाइब्रेरी — Bootstrap, jQuery, कोई भी CDN-होस्टेड स्क्रिप्ट विफल हो जाएगी। नंबर तीन: बाहरी स्टाइलशीट में घोषित CSS वेरिएबल्स — वे आपके इनलाइन स्टाइल ब्लॉक में होने चाहिए। नंबर चार: URL द्वारा संदर्भित पृष्ठभूमि छवियां — उन्हें Base64 एन्कोड करें। नंबर पांच: पोस्ट-प्रमाणीकरण रीडायरेक्ट के बिना AJAX फॉर्म सबमिशन — CNA प्रमाणीकरण पूरा होने का पता नहीं लगा पाएगा।

अब, बनाने बनाम खरीदने के बारे में ईमानदार बातचीत। शुरुआत से एक कस्टम कैप्टिव पोर्टल बनाने का मतलब है कि आप बैकएंड इन्फ्रास्ट्रक्चर — RADIUS सर्वर, डेटाबेस, SSL प्रमाणपत्र, DNS कॉन्फ़िगरेशन, आपके एक्सेस पॉइंट्स के साथ नेटवर्क एकीकरण, और चल रहे सुरक्षा पैचिंग के लिए भी जिम्मेदार हैं। यह एक महत्वपूर्ण इंजीनियरिंग प्रतिबद्धता है।

Purple का पोर्टल बिल्डर आपको उन डेवलपर्स के लिए एक कस्टम HTML और CSS एडिटर के साथ ड्रैग-एंड-ड्रॉप इंटरफ़ेस देता है जिन्हें पिक्सेल-परफेक्ट नियंत्रण की आवश्यकता होती, जबकि सभी बैकएंड इन्फ्रास्ट्रक्चर — प्रमाणीकरण, डेटा कैप्चर, एनालिटिक्स, GDPR अनुपालन टूलिंग, और 200 से अधिक एक्सेस पॉइंट वेंडर्स के साथ नेटवर्क एकीकरण को संभालता है। आपको इन्फ्रास्ट्रक्चर ओवरहेड के बिना रचनात्मक नियंत्रण मिलता है।

[रैपिड-फायर प्रश्न और उत्तर]

क्या मैं कैप्टिव पोर्टल में CSS ग्रिड का उपयोग कर सकता हूँ? हाँ, लेकिन विशेष रूप से iOS CNA पर परीक्षण करें। पुराने WebKit संस्करणों में फ्लेक्सबॉक्स का व्यापक समर्थन है। क्या मैं SVG लोगो का उपयोग कर सकता हूँ? हाँ, इनलाइन SVGs पूरी तरह से समर्थित हैं और लोगो के लिए Base64-एन्कोडेड PNGs की तुलना में बेहतर हैं क्योंकि वे रेटिना डिस्प्ले पर पूरी तरह से स्केल होते हैं। क्या macOS CNA, iOS CNA के समान प्रतिबंधों का समर्थन करता है? मोटे तौर पर हाँ, एक अंतर के साथ: macOS CNA एक निश्चित 900 गुणा 572 पिक्सेल विंडो पर रेंडर होता है। क्या मैं Tailwind जैसे CSS फ़्रेमवर्क का उपयोग कर सकता हूँ? केवल तभी जब आप एक पर्ज्ड, आत्मनिर्भर CSS फ़ाइल उत्पन्न करते हैं और इसे अपने स्टाइल ब्लॉक में इनलाइन करते हैं। HTTPS के बारे में क्या? प्रारंभिक रीडायरेक्ट काम करने के लिए आपके कैप्टिव पोर्टल को HTTP पर परोसा जाना चाहिए — HTTPS कनेक्शन को कैप्टिव नेटवर्क द्वारा इंटरसेप्ट नहीं किया जा सकता है।

[सारांश और अगले कदम]

आज की ब्रीफिंग का सारांश देने के लिए। एक कस्टम कैप्टिव पोर्टल एक सीमित वेब वातावरण है, न कि एक मानक ब्राउज़र संदर्भ। Apple CNA और Android वेबव्यू बाहरी संसाधनों, कुकीज़, JavaScript और सेशन स्थिति पर सख्त सीमाएं लगाते हैं। समाधान इनलाइन CSS, सिस्टम फ़ॉन्ट्स, Base64-एन्कोडेड छवियों और प्रमाणीकरण पर पूर्ण-पेज रीडायरेक्ट के साथ आत्मनिर्भर HTML पेज बनाना है।

अपने विकल्पों का मूल्यांकन करने वाले स्थान ऑपरेटरों और IT टीमों के लिए: यदि आपकी आवश्यकता कस्टम HTML और CSS के साथ पूरी तरह से ब्रांडेड, बेस्पोक पोर्टल है, तो विकल्प खुद पूरे स्टैक को बनाने और बनाए रखने — जो कि एक महत्वपूर्ण इंजीनियरिंग प्रतिबद्धता है — या Purple जैसे प्लेटफ़ॉर्म का उपयोग करने के बीच है जो प्रोडक्शन-ग्रेड बैकएंड इन्फ्रास्ट्रक्चर के शीर्ष पर कस्टम HTML और CSS संपादन क्षमता प्रदान करता है।

यहाँ से अगले कदम: Purple के पोर्टल एडिटर दस्तावेज़ों की समीक्षा करें, आज हमारे द्वारा कवर की गई मोबाइल-फ़र्स्ट चेकलिस्ट के खिलाफ अपने मौजूदा पोर्टल का ऑडिट करें, और यदि आप शुरुआत से शुरू कर रहे हैं, तो हमारे द्वारा रेखांकित की गई HTML टेम्पलेट संरचना का उपयोग अपने बेसलाइन के रूप में करें। सुनने के लिए धन्यवाद, और हम आपसे अगली ब्रीफिंग में मिलेंगे।

मुख्य निष्कर्ष

✓कैप्टिव पोर्टल अत्यधिक प्रतिबंधित मिनी-ब्राउज़रों (जैसे Apple के iOS Websheet) में चलते हैं जो बाहरी स्टाइलशीट, वेब फ़ॉन्ट्स, कुकीज़ और स्थानीय स्टोरेज को ब्लॉक करते हैं।
✓'शून्य कनेक्टिविटी' के लिए डिज़ाइन करना अनिवार्य है: सभी CSS इनलाइन होने चाहिए, और विज़ुअल एसेट्स को सीधे Base64 डेटा URIs के रूप में एम्बेड किया जाना चाहिए।
✓iOS एक्जिट हैंडशेक को ट्रिगर करने के लिए सफल लॉगिन के बाद एक पूर्ण-पेज HTTP रीडायरेक्ट आवश्यक है; AJAX-आधारित DOM अपडेट उपकरणों को कैप्टिव लूप में फंसा छोड़ देंगे।
✓मोबाइल-फ़र्स्ट लेआउट में एक सिंगल-कॉलम कार्ड संरचना (अधिकतम-चौड़ाई: 480px), स्पर्श-अनुकूल लक्ष्य (न्यूनतम 44px), और ऑटो-ज़ूमिंग को रोकने के लिए कम से कम 16px के इनपुट फ़ॉन्ट होने चाहिए।
✓GDPR के तहत कानूनी अनुपालन के लिए मार्केटिंग ऑप्ट-इन के लिए स्पष्ट, डिफ़ॉल्ट रूप से अनचेक किए गए चेकबॉक्स की आवश्यकता होती है, जो मानक सेवा की शर्तों के समझौते से अलग हों।
✓जबकि कस्टम कोडिंग पूर्ण रचनात्मक स्वतंत्रता प्रदान करती, RADIUS सर्वर की होस्टिंग और स्केलिंग, डेटाबेस सुरक्षा और मल्टी-वेंडर एकीकरण बड़े पैमाने पर परिचालन ओवरहेड प्रस्तुत करते हैं।
✓Purple का प्लेटफ़ॉर्म सुरक्षित, क्लाउड-नेटिव, विश्व स्तर पर वितरित RADIUS इन्फ्रास्ट्रक्चर और मूल अनुपालन टूल के साथ डेवलपर-स्तरीय HTML/CSS वर्कस्पेस नियंत्रण को जोड़ता है।

📚 Part of our core series: कैप्टिव पोर्टल्स के लिए अंतिम गाइड →

कार्यकारी सारांश

एंटरप्राइज़ स्थानों के लिए—लक्ज़री होटलों Hospitality और रिटेल चेन Retail से लेकर ट्रांजिट हब Transport और आधुनिक मेडिकल परिसरों Healthcare तक—अतिथि WiFi स्प्लैश पेज डिजिटल मुख्य द्वार है। हालांकि, 90% से अधिक अतिथि WiFi लॉगिन मोबाइल उपकरणों पर होते हैं, जहाँ रेंडरिंग सफारी या क्रोम जैसे मानक ब्राउज़रों द्वारा नहीं, बल्कि अत्यधिक प्रतिबंधित Captive Network Assistant (CNA) वेबव्यू [1] द्वारा नियंत्रित होती है। ये "मिनी-ब्राउज़र" कड़े सैंडबॉक्स प्रतिबंध लागू करते हैं: वे सुरक्षा जोखिमों को कम करने और सेशन हाईजैकिंग को रोकने के लिए बाहरी CDNs को ब्लॉक करते हैं, लगातार रहने वाली कुकीज़ को अक्षम करते हैं, बाहरी वेब फ़ॉन्ट्स को अनदेखा करते हैं, और JavaScript निष्पादन को गंभीर रूप से प्रतिबंधित करते हैं [2]।

जब कोई डेवलपर पारंपरिक वेब मानकों का उपयोग करके स्प्लैश पेज डिज़ाइन करता है, तो इन प्रतिबंधों के कारण लेआउट खराब हो जाते हैं, ब्रांड एसेट गायब हो जाते हैं, और लॉगिन बटन काम नहीं करते हैं, जिससे सीधे तौर पर ग्राहक संतुष्टि और डिजिटल जुड़ाव प्रभावित होता है। यह गाइड इन चुनौतियों का समाधान प्रदान करती है, जिसमें सहज क्रॉस-प्लेटफ़ॉर्म रेंडरिंग सुनिश्चित करने के लिए सुरक्षात्मक कोडिंग प्रथाओं—जैसे इनलाइन CSS, Base64 एसेट एन्कोडिंग, सिस्टम फ़ॉन्ट स्टैक, और स्पष्ट नेविगेशन-संचालित प्रमाणीकरण हैंडशेक—को प्रस्तुत किया गया है। इसके अलावा, हम यह जांचते हैं कि Purple के पोर्टल बिल्डर जैसे प्रबंधित समाधान का उपयोग करने से डेवलपर्स को RADIUS प्रमाणीकरण, डेटाबेस स्केलिंग, GDPR/PCI अनुपालन और मल्टी-वेंडर AP एकीकरण [3] का बोझ हटाते हुए पूर्ण HTML/CSS रचनात्मक नियंत्रण बनाए रखने की अनुमति कैसे मिलती है।

तकनीकी गहन विश्लेषण

एक मजबूत कस्टम कैप्टिव पोर्टल बनाने के लिए, डेवलपर्स को नेटवर्क-स्तरीय इंटरसेप्शन और ब्राउज़र वर्चुअलाइजेशन को समझना होगा जो तब होता है जब कोई अतिथि एक ओपन SSID से जुड़ता है।

कैप्टिव पोर्टल लाइफसाइकिल

जब कोई क्लाइंट डिवाइस किसी कैप्टिव SSID से जुड़ता है, तो निम्नलिखित अनुक्रम सक्रिय होता है:

IP एसोसिएशन: डिवाइस 3-वे हैंडशेक पूरा करता है और DHCP के माध्यम से एक IP पते का अनुरोध करता है।
सक्रिय कनेक्टिविटी जांच: ऑपरेटिंग सिस्टम का बैकग्राउंड नेटवर्क मैनेजर तुरंत एक समर्पित वेंडर-न्यूट्रल कैनरी URL (जैसे, Apple का http://captive.apple.com/hotspot-detect.html या Google का http://connectivitycheck.gstatic.com/generate_204) [1] पर एक HTTP GET अनुरोध भेजता है।
DNS/HTTP इंटरसेप्शन: स्थानीय वायरलेस LAN कंट्रोलर (WLC) या एक्सेस पॉइंट (AP) इस पोर्ट 80 HTTP अनुरोध को इंटरसेप्ट करता है। अपेक्षित HTTP 200 या 204 स्टेटस वापस करने के बजाय, गेटवे क्लाइंट के ट्रैफ़िक को HTTP 302 रीडायरेक्ट [2] के माध्यम से कैप्टिव पोर्टल के लैंडिंग पेज URL पर रीडायरेक्ट करता है।
वेबव्यू स्पॉनिंग: रीडायरेक्ट का पता चलने पर, OS रीडायरेक्ट किए गए स्प्लैश पेज को प्रदर्शित करने के लिए अपने मूल Captive Network Assistant (CNA) मिनी-ब्राउज़र को स्पॉन करता है, जिससे उपयोगकर्ता को मैन्युअल रूप से एक पूर्ण ब्राउज़र खोलने की आवश्यकता नहीं होती है।
प्रमाणीकरण और स्थिति संक्रमण: उपयोगकर्ता लॉगिन फॉर्म पूरा करता है, क्रेडेंशियल वापस पोर्टल सर्वर पर सबमिट करता है, जो गेटवे को MAC पते को अधिकृत करने का निर्देश देता है (अक्सर RADIUS Access-Accept या बाहरी API कॉल के माध्यम से)।
CNA एक्जिट हैंडशेक: CNA मिनी-ब्राउज़र अपने कैनरी URL पर एक और HTTP GET निष्पादित करता है। यदि इसे अपेक्षित 200/204 प्रतिक्रिया मिलती है, तो यह अपने शीर्ष-दाएं बटन को "रद्द करें" से बदलकर "हो गया" कर देता है और प्राथमिक नेटवर्क इंटरफ़ेस के रूप में WiFi कनेक्शन स्थापित करता है।

प्लेटफ़ॉर्म-विशिष्ट मिनी-ब्राउज़र प्रतिबंध

प्रत्येक ऑपरेटिंग सिस्टम इस लाइफसाइकिल को विभिन्न वेबव्यू वातावरणों के भीतर संभालता है, जिसके परिणामस्वरूप अत्यधिक खंडित व्यवहार होता है। नीचे दी गई तालिका इन महत्वपूर्ण प्रतिबंधों का विवरण देती है:

प्लेटफ़ॉर्म / वेबव्यू	प्रदर्शन विधि	लगातार रहने वाली कुकीज़	बाहरी वेब फ़ॉन्ट्स	JavaScript निष्पादन	विंडो आयाम	एक्जिट हैंडशेक ट्रिगर
Apple iOS CNA (Websheet)	मिनी-ब्राउज़र पॉपअप	ब्लॉक (बंद होने पर नष्ट)	ब्लॉक (ऑफ़लाइन)	सीमित (कोई localStorage/sessionStorage नहीं)	रिस्पॉन्सिव (डिवाइस-चौड़ाई)	केवल पूर्ण-पेज HTTP रीडायरेक्ट [1]
Apple macOS CNA (Captive Network Assistant)	मिनी-ब्राउज़र पॉपअप	ब्लॉक	ब्लॉक	सीमित (कोई अलर्ट/पुष्टि संवाद नहीं)	निश्चित (900px x 572px)	केवल पूर्ण-पेज HTTP रीडायरेक्ट
Android (Google) (CaptivePortalLogin)	पुश नोटिफिकेशन -> Chrome कस्टम टैब	अनुमति है (Chrome के साथ साझा)	अनुमति है (यदि वॉल्ड गार्डन में श्वेतसूचीबद्ध हो)	पूर्ण	रिस्पॉन्सिव	स्वचालित (कैप्टिव पोर्टल API / 204 जांच) [2]
Samsung Android (Samsung Internet)	पुश नोटिफिकेशन -> मिनी-ब्राउज़र	अनुमति है	अनुमति है	पूर्ण	रिस्पॉन्सिव	स्वचालित
Windows 10/11 (डिफ़ॉल्ट ब्राउज़र)	डिफ़ॉल्ट ब्राउज़र ऑटो-लॉन्च	अनुमति है (पूर्ण ब्राउज़र संदर्भ)	अनुमति है	पूर्ण	रिस्पॉन्सिव	मैन्युअल / स्वचालित

Apple CNA "हो गया" बटन ट्रैप से बचने के लिए कोडिंग

कस्टम पोर्टल विकास में सबसे आम विफलता मोड में से एक iOS उपकरणों पर "हो गया" बटन ट्रैप है। जब कोई उपयोगकर्ता प्रमाणित होता है, तो iOS Websheet वेबव्यू को यह पता लगाना चाहिए कि नेटवर्क अब कैप्टिव नहीं है। यह अपने बैकग्राउंड कैनरी अनुरोधों की सफलता की निगरानी करके ऐसा करता है।

महत्वपूर्ण रूप से, iOS CNA केवल एक पूर्ण-पेज HTTP नेविगेशन (लोकेशन रीडायरेक्ट) पर ही इस जांच को ट्रिगर करेगा। यदि कोई डेवलपर एक आधुनिक सिंगल पेज एप्लीकेशन (SPA) बनाता है जो एसिंक्रोनस AJAX कॉल (जैसे, fetch() या Axios) के माध्यम से फॉर्म डेटा सबमिट करता है और URL को बदले बिना DOM को गतिशील रूप से अपडेट करता है, तो CNA अपनी कनेक्टिविटी जांच को कभी भी दोबारा नहीं चलाएगा। उपयोगकर्ता गेटवे स्तर पर प्रमाणित हो जाएगा, लेकिन शीर्ष-दाएं कोने में CNA बटन "रद्द करें" के रूप में ही रहेगा। यदि निराश उपयोगकर्ता "रद्द करें" पर क्लिक करता है, तो iOS डिवाइस तुरंत SSID से अलग हो जाएगा, जिससे WiFi सेशन समाप्त हो जाएगा [1]।

इसे रोकने के लिए, प्रमाणीकरण सफलता हैंडलर को एक भौतिक लैंडिंग पेज पर पूर्ण-पेज रीडायरेक्ट (जैसे, window.location.href = '/success') करना चाहिए या एक मानक HTTP POST एक्शन के माध्यम से लॉगिन फॉर्म को मूल रूप से सबमिट करना चाहिए।

कार्यान्वयन गाइड

सभी प्लेटफ़ॉर्म पर सुसंगत रेंडरिंग सुनिश्चित करने के लिए, डेवलपर्स को आधुनिक, भारी-एसेट वाले वेब डिज़ाइन से अत्यधिक आत्मनिर्भर, सुरक्षात्मक कोडिंग शैली में संक्रमण करना चाहिए।

सुनहरा नियम: शून्य इंटरनेट कनेक्टिविटी के लिए डिज़ाइन करें

कैप्टिव स्थिति के दौरान, क्लाइंट डिवाइस के पास व्यापक इंटरनेट तक कोई पहुंच नहीं होती है। यह केवल वायरलेस कंट्रोलर के वॉल्ड गार्डन में स्पष्ट रूप से श्वेतसूचीबद्ध IP पतों और डोमेन तक ही पहुंच सकता है (जैसे कि कैप्टिव पोर्टल सर्वर का IP)। इसलिए, आपके HTML में संदर्भित कोई भी बाहरी एसेट लोड होने में विफल हो जाएगा, जिसके परिणामस्वरूप लेआउट खराब हो जाएगा।

सुरक्षात्मक रूप से डिज़ाइन करने के लिए, निम्नलिखित मोबाइल-फ़र्स्ट कैप्टिव पोर्टल डिज़ाइन चेकलिस्ट को लागू करें:

1. व्यूपोर्ट कॉन्फ़िगरेशन

मोबाइल उपकरणों को व्यूपोर्ट को डेस्कटॉप चौड़ाई (आमतौर पर 980px) तक कम करने से रोकने के लिए, HTML `` में एक रिस्पॉन्सिव व्यूपोर्ट मेटा टैग शामिल होना चाहिए। इसके बिना, मोबाइल उपकरणों पर टेक्स्ट और इनपुट फ़ील्ड बहुत छोटे दिखाई देंगे:

2. CSS को इनलाइन करना और बाहरी निर्भरताओं को हटाना

कभी भी बाहरी CSS फ़ाइलों या CDNs (जैसे, Bootstrap, Tailwind, या Google Fonts) से लिंक न करें। सभी CSS को HTML `` में `

<div class="portal-card">
    <div class="logo-container">
        
        
            
            आपका ब्रांड
        
    </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 />
            1. यह सेवा बिना किसी वारंटी के जैसी है वैसी ही प्रदान की जाती है।<br />
            2. उपयोगकर्ताओं को अवैध बैंडविड्थ-गहन गतिविधियों में शामिल नहीं होना चाहिए।<br />
            3. व्यक्तिगत डेटा केवल हमारी गोपनीयता नीति के अनुपालन में प्रमाणीकरण और मार्केटिंग ऑप्ट-इन के लिए एकत्र किया जाता।
        </div>
        
        WiFi से कनेक्ट करें
    
    
    <div class="footer">
        Powered by Purple | सुरक्षित अतिथि WiFi
    </div>
</div>


## समस्या निवारण और जोखिम न्यूनीकरण

कस्टम-कोडेड HTML/CSS कैप्टिव पोर्टल तैनात करते समय, IT ऑपरेशंस टीमों को अक्सर कई गंभीर परिचालन जोखिमों का सामना करना पड़ता है:

### 1. SSL/TLS प्रमाणपत्र चेतावनी लूप

चूंकि कैप्टिव पोर्टल ट्रैफ़िक को इंटरसेप्ट करके काम करते हैं, इसलिए वे आधुनिक HTTPS वेब सुरक्षा के साथ एक मौलिक संघर्ष प्रस्तुत करते हैं। जब कोई उपयोगकर्ता किसी HTTPS साइट (जैसे, `https://www.google.com`) पर जाने का प्रयास करता है, और गेटवे उस ट्रैफ़िक को HTTP कैप्टिव पोर्टल पर रीडायरेक्ट करने का प्रयास करता है, तो ब्राउज़र SSL प्रमाणपत्र में बेमेल का पता लगाता है और एक महत्वपूर्ण "आपका कनेक्शन निजी नहीं है" सुरक्षा चेतावनी प्रदर्शित करता है।

* **शमन**: कभी भी सीधे HTTPS ट्रैफ़िक को इंटरसेप्ट करने का प्रयास न करें। पूरी तरह से ऑपरेटिंग सिस्टम के मूल CNA हेल्पर पर भरोसा करें (जो रीडायरेक्ट को ट्रिगर करने के लिए एक अनएन्क्रिप्टेड HTTP अनुरोध करता है)। सुनिश्चित करें कि आपके कैप्टिव पोर्टल के डोमेन के पास एक वैध, सार्वजनिक रूप से विश्वसनीय SSL प्रमाणपत्र (जैसे, Let's Encrypt या DigiCert) है और प्रारंभिक HTTP रीडायरेक्ट द्वारा उपयोगकर्ता को आपके पोर्टल डोमेन पर सफलतापूर्वक रूट करने के *बाद ही* इसे HTTPS पर परोसा जाता है [2]।

### 2. DNS रिज़ॉल्यूशन विफलताएं (द वॉल्ड गार्डन ट्रैप)

यदि आपका कस्टम HTML पेज बाहरी संसाधनों—जैसे कि सोशल लॉगिन OAuth एंडपॉइंट (जैसे, Facebook, Google) या पेमेंट गेटवे—को संदर्भित करता है, तो इन डोमेन के लिए DNS अनुरोध तब तक विफल रहेंगे जब तक कि वे वायरलेस कंट्रोलर के वॉल्ड गार्डन में स्पष्ट रूप से श्वेतसूचीबद्ध न हों। यदि कोई डोमेन श्वेतसूची से गायब है, तो लॉगिन प्रवाह रुक जाएगा, जिससे एक खाली स्क्रीन दिखाई देगी।

* **शमन**: एक सख्त, न्यूनतम वॉल्ड गार्डन सूची बनाए रखें। यदि सोशल लॉगिन का उपयोग कर रहे हैं, तो पहचान प्रदाताओं द्वारा अनुशंसित विशिष्ट वाइल्डकार्ड डोमेन (जैसे, `*.google.com`, `*.gstatic.com`) को श्वेतसूची में डालें।

### 3. सेशन टाइमआउट और MAC स्पूफिंग कमजोरियां

मानक कैप्टिव पोर्टल उनके MAC पतों के आधार पर उपकरणों को प्रमाणित करते हैं। हालांकि, आधुनिक मोबाइल ऑपरेटिंग सिस्टम (iOS 14+ और Android 10+) डिफ़ॉल्ट रूप से रैंडमाइज्ड MAC पतों (निजी WiFi पतों) का उपयोग करते हैं, उन्हें समय-समय पर घुमाते हैं। इससे मेहमानों को बार-बार प्रमाणित करने के लिए प्रेरित किया जा सकता है, जिससे उपयोगकर्ता अनुभव खराब होता है [1]।

* **शमन**: पुराने सेशन को रोकने के लिए RADIUS सर्वर पर उचित सेशन टाइमआउट (जैसे, 24 घंटे) लागू करें, और सहज, सुरक्षित ऑनबोर्डिंग के लिए **Passpoint (Hotspot 2.0)** या **WPA3-Enterprise** जैसे आधुनिक प्रमाणीकरण मानकों का उपयोग करें जो MAC-आधारित कैप्टिव पोर्टलों को पूरी तरह से बायपास करते हैं।

## Purple उत्पाद प्रासंगिकता: बनाएं बनाम खरीदें

जबकि एक सिंगल HTML पेज को कोड करना सीधा है, एक कस्टम कैप्टिव पोर्टल इन्फ्रास्ट्रक्चर की होस्टिंग, सुरक्षा और स्केलिंग बड़े पैमाने पर तकनीकी और अनुपालन बाधाएं प्रस्तुत करती है। नीचे दी गई तालिका एक कस्टम पोर्टल को स्वयं होस्ट करने बनाम Purple के प्रबंधित एंटरप्राइज़ प्लेटफ़ॉर्म का उपयोग करने की इंजीनियरिंग और परिचालन वास्तविकताओं की तुलना करती है:

| विशेषता / परिचालन आवश्यकता | स्व-होस्टेड कस्टम पोर्टल | Purple एंटरप्राइज़ WiFi प्लेटफ़ॉर्म |
| :--- | :--- | :--- |
| **HTML/CSS अनुकूलन** | पूरी तरह से मैन्युअल कोडिंग, व्यक्तिगत APs या स्थानीय वेब सर्वर पर फ़ाइलें अपलोड करना। | **पिक्सेल-परफेक्ट डेवलपर एडिटर** जो ड्रैग-एंड-ड्रॉप विज़ुअल बिल्डर के साथ कस्टम HTML/CSS इंजेक्शन की अनुमति देता है। |
| **RADIUS इन्फ्रास्ट्रक्चर** | अत्यधिक उपलब्ध FreeRADIUS या क्लाउड RADIUS सर्वर [4] को तैनात, कॉन्फ़िगर और बनाए रखना होगा। | एक्टिव-एक्टिव रिडंडेंसी और 99.99% अपटाइम SLAs के साथ **अंतर्निहित, विश्व स्तर पर वितरित, क्लाउड-नेटिव RADIUS**। |
| **मल्टी-वेंडर AP समर्थन** | प्रत्येक हार्डवेयर वेंडर (Cisco, Aruba, Meraki, Ruckus) [5] के लिए कस्टम एकीकरण स्क्रिप्ट की आवश्यकता होती है। | 200 से अधिक हार्डवेयर मॉडलों के साथ **मूल, आउट-ऑफ-द-बॉक्स एकीकरण**; मिश्रित-हार्डवेयर संपत्तियों में एकीकृत पोर्टल परिनियोजन। |
| **डेटा गोपनीयता और अनुपालन** | स्थान सुरक्षित डेटाबेस एन्क्रिप्शन और डेटा विलोपन वर्कफ़्लो सहित GDPR, CCPA और PCI DSS अनुपालन के लिए 100% कानूनी दायित्व लेता है। | **डिज़ाइन द्वारा पूरी तरह से अनुपालन**। अंतर्निहित सहमति प्रबंधन, स्वचालित डेटा-विषय विलोपन अनुरोध और सुरक्षित ISO 27001-प्रमाणित होस्टिंग। |
| **एनालिटिक्स और मार्केटिंग** | कस्टम डेटा इनजेशन पाइपलाइन बनाने और तीसरे पक्ष के मार्केटिंग टूल को एकीकृत करने की आवश्यकता होती है। | रीयल-टाइम फ़ुटफ़ॉल ट्रैकिंग, रिटर्न-रेट मेट्रिक्स और स्वचालित मार्केटिंग अभियान ट्रिगर्स [6] के साथ **एंटरप्राइज़-ग्रेड एनालिटिक्स डैशबोर्ड**। |
| **पहचान प्रदाता एकीकरण** | Google, Facebook, Apple और स्थानीय SMS गेटवे के साथ मैन्युअल OAuth2 एकीकरण। | प्रमुख सोशल प्लेटफ़ॉर्म, SMS गेटवे और कॉर्पोरेट मेहमानों के लिए Azure AD / Okta के साथ **वन-क्लिक एकीकरण**। |

Purple का प्लेटफ़ॉर्म "बनाएं बनाम खरीदें" की दुविधा को हल करता है। यह डेवलपर्स को कस्टम HTML/CSS वर्कस्पेस की पूर्ण रचनात्मक स्वतंत्रता प्रदान करता है, जबकि बड़े पैमाने पर सुरक्षित RADIUS प्रमाणीकरण का समर्थन करने के लिए आवश्यक जटिल, उच्च-जोखिम वाले बैकएंड इन्फ्रास्ट्रक्चर इंजीनियरिंग को समाप्त करता है।

## ROI और व्यावसायिक प्रभाव

व्यावसायिक रूप से इंजीनियर, रिस्पॉन्सिव कस्टम कैप्टिव पोर्टल में निवेश करने से IT संचालन, मार्केटिंग और कानूनी अनुपालन में मापने योग्य रिटर्न मिलता है।

### 1. परिचालन लागत में कमी (IT हेल्पडेस्क टिकट)

बड़े पैमाने पर परिनियोजन में, जैसे कि स्टेडियम या मल्टी-साइट रिटेल चेन, एक खराब कैप्टिव पोर्टल IT हेल्पडेस्क एस्केलेशन का एक प्रमुख कारण है। जब मेहमानों को "सफेद स्क्रीन" या काम न करने वाले लॉगिन बटन का सामना करना पड़ता है, तो वे ऑन-साइट कर्मचारियों को परेशान करते हैं या सपोर्ट टिकट सबमिट करते हैं।

$$\text{वार्षिक सहायता बचत} = (\text{कुल वार्षिक अतिथि विज़िट} \times \text{पोर्टल विफलता दर} \times \text{हेल्पडेस्क संपर्क दर}) \times \text{प्रति सहायता टिकट लागत}$$

* **परिदृश्य**: 1,000,000 वार्षिक आगंतुकों वाला एक कन्वेंशन सेंटर। एक खराब कोडेड पोर्टल की पुराने iOS उपकरणों पर 5% विफलता दर है, जिससे 10% हेल्पडेस्क संपर्क दर होती है। $15 प्रति सपोर्ट टिकट के उद्योग-मानक पर, परिचालन लागत है:
  $$(1,000,000 \times 0.05 \times 0.10) \times \$15 = \$75,000 \text{ टाले जा सकने वाले वार्षिक सहायता ओवरहेड में}$$
* **परिणाम**: CNA-अनुकूलित, mobile-first टेम्पलेट पर संक्रमण करने से पोर्टल विफलता दर &lt;0.1% हो जाती है, जिससे यह परिचालन बोझ लगभग समाप्त हो जाता है।

### 2. मार्केटिंग डेटा कैप्चर और ऑप्ट-इन अनुकूलन

रिटेल और हॉस्पिटैलिटी स्थानों के लिए, अतिथि WiFi पोर्टल स्वच्छ, प्रथम-पक्ष ग्राहक डेटा कैप्चर करने का प्राथमिक तंत्र है। सूक्ष्म टेक्स्ट या खराब फॉर्म लेआउट वाला एक खराब डिज़ाइन किया गया यूजर इंटरफ़ेस उच्च **बाउंस दर** का कारण बनता है—उपयोगकर्ता लॉगिन प्रक्रिया को पूरी तरह से छोड़ देते हैं, जिसके परिणामस्वरूप मार्केटिंग के अवसर खो जाते हैं।

* **केस स्टडी (रिटेल)**: एक राष्ट्रीय रिटेल चेन ने Purple के प्लेटफ़ॉर्म का उपयोग करके एक मोबाइल-फ़र्स्ट अनुकूलित कैप्टिव पोर्टल लागू किया। एक बहु-चरणीय लॉगिन फॉर्म को सिंगल-फील्ड ईमेल इनपुट (फ़ॉन्ट-आकार: 16px) और एक अनुकूलित 48px टैप-टार्गेट बटन से बदलकर, उन्होंने पहली तिमाही के भीतर **पूरे किए गए पंजीकरणों में 42% की वृद्धि** और **मार्केटिंग न्यूज़लेटर ऑप्ट-इन में 28% की वृद्धि** देखी [6]।

### 3. कानूनी और नियामक जोखिम न्यूनीकरण

GDPR और CCPA के तहत, गैर-अनुपालनकारी डेटा संग्रह पर गंभीर वित्तीय दंड (GDPR के तहत वैश्विक वार्षिक कारोबार का 4% तक) लगता है। पहले से टिक किए गए चेकबॉक्स पर भरोसा करना या अपने स्प्लैश पेज पर एक स्पष्ट, आसानी से सुलभ गोपनीयता नीति प्रदान करने में विफल होना एंटरप्राइज़ को भारी कानूनी दायित्व के जोखिम में डालता है।

* **शमन ROI**: एक स्पष्ट, अन-टिक सहमति चेकबॉक्स को लागू करना और एक अनुकूलित स्क्रॉलबॉक्स के भीतर शर्तों को होस्ट करना 100% नियामक अनुपालन सुनिश्चित करता है, जिससे लाखों डॉलर के नियामक जुर्माने का जोखिम कम होता है और ब्रांड की प्रतिष्ठा की रक्षा होती है।

## मुख्य निष्कर्षों का सारांश

* **CNA सैंडबॉक्स प्रतिबंधित है**: Apple का iOS Websheet और macOS CNA अत्यधिक सैंडबॉक्स वाले वातावरण हैं जो बाहरी एसेट, कुकीज़ और वेब फ़ॉन्ट्स को ब्लॉक करते हैं। सभी स्टाइलिंग और एसेट आत्मनिर्भर होने चाहिए (इनलाइन CSS, Base64 छवियां, सिस्टम फ़ॉन्ट्स) [1]।
* **AJAX, iOS एक्जिट हैंडशेक को बाधित करता है**: iOS डिवाइस को "कैप्टिव" से "कनेक्टेड" में सफलतापूर्वक स्थानांतरित करने के लिए (शीर्ष-दाएं बटन को "रद्द करें" से बदलकर "हो गया" करना), आपको एक पूर्ण-पेज HTTP रीडायरेक्ट ट्रिगर करना होगा। एसिंक्रोनस DOM अपडेट डिवाइस को कैप्टिव लूप में छोड़ देंगे।
* **मोबाइल-फ़र्स्ट अनिवार्य है**: 90% से अधिक लॉगिन मोबाइल पर होते हैं। एक सिंगल-कॉलम लेआउट (अधिकतम-चौड़ाई: 480px) डिज़ाइन करें, स्पर्श-अनुकूल टैप लक्ष्यों (न्यूनतम 44px x 44px) का उपयोग करें, और स्वचालित iOS ब्राउज़र ज़ूमिंग को रोकने के लिए सभी टेक्स्ट इनपुट पर न्यूनतम 16px फ़ॉन्ट आकार लागू करें।
* **वॉल्ड गार्डन DNS को नियंत्रित करते हैं**: लॉगिन के दौरान संदर्भित किसी भी बाहरी डोमेन (जैसे, सोशल लॉगिन APIs) को वायरलेस कंट्रोलर के वॉल्ड गार्डन में स्पष्ट रूप से श्वेतसूचीबद्ध किया जाना चाहिए, अन्यथा पेज लोड होने में विफल हो जाएगा।
* **Purple बैकएंड जटिलता को समाप्त करता है**: Purple के पोर्टल बिल्डर का उपयोग करने से डेवलपर्स को एक कस्टम एडिटर के माध्यम से पूर्ण HTML/CSS नियंत्रण मिलता है, जबकि RADIUS, मल्टी-वेंडर AP एकीकरण और GDPR-अनुपालन डेटाबेस प्रबंधन [3] के भारी सुरक्षा, स्केलिंग और अनुपालन बोझ से राहत मिलती है।

## संदर्भ

* [1] [Wireless Broadband Alliance: कैप्टिव नेटवर्क पोर्टल व्यवहार](https://captivebehavior.wballiance.com/)
* [2] [Android Open Source Project: कैप्टिव पोर्टल लॉगिन वेबव्यू एकीकरण](https://source.android.com/docs/core/connect/android-custom-tabs-captive-portal)
* [3] [European Data Protection Board: विनियमन 2016/679 के तहत सहमति पर दिशानिर्देश](https://edpb.europa.eu/our-work-tools/our-documents/guidelines/guidelines-052020-consent-under-regulation-2016679_en)
* [4] [क्लाउड RADIUS के साथ 802.1X प्रमाणीकरण कैसे लागू करें](/guides/implementing-8021x-with-cloud-radius)
* [5] [Cisco वायरलेस APs: उत्पादों और परिनियोजन के लिए 2026 गाइड](/blog/cisco-wireless-ap)
* [6] [Purple WiFi मार्केटिंग और एनालिटिक्स प्लेटफ़ॉर्म](/guest-wifi-marketing-analytics-platform)

---

## तकनीकी ब्रीफिंग सुनें

कस्टम कैप्टिव पोर्टलों के लिए तकनीकी बाधाओं और कार्यान्वयन रणनीतियों पर चर्चा करने वाले एक वरिष्ठ समाधान आर्किटेक्ट को सुनें:

मुख्य परिभाषाएं

Captive Portal

एक वेब पेज जो Wi-Fi नेटवर्क के नए जुड़े उपयोगकर्ताओं को नेटवर्क संसाधनों तक व्यापक पहुंच प्रदान करने से पहले प्रदर्शित किया जाता है, आमतौर पर प्रमाणीकरण, भुगतान या सेवा की शर्तों को प्रदर्शित करने के लिए उपयोग किया जाता है।

IT टीमें अतिथि पहुंच को नियंत्रित करने, उपयोगकर्ता डेटा कैप्चर करने और कानूनी अनुपालन लागू करने के लिए गेटवे स्तर पर कैप्टिव पोर्टल तैनात करती हैं।

Captive Network Assistant (CNA)

एक अत्यधिक प्रतिबंधित, सैंडबॉक्स्ड मिनी-ब्राउज़र जो कैप्टिव नेटवर्क रीडायरेक्ट का पता लगाने पर ऑपरेटिंग सिस्टम (जैसे Apple iOS और macOS) द्वारा स्वचालित रूप से स्पॉन किया जाता है, जिसे केवल पोर्टल प्रमाणीकरण की सुविधा के लिए डिज़ाइन किया गया है।

CNA वेबव्यू कड़े प्रतिबंध लागू करते हैं, जिसमें बाहरी CDNs, लगातार रहने वाली कुकीज़ और स्थानीय स्टोरेज को ब्लॉक करना शामिल है, जो अक्सर मानक वेब डिज़ाइनों को खराब कर देते हैं।

Walled Garden

IP पतों, सबनेट या डोमेन नामों की एक प्रतिबंधित सूची जिसे एक अप्रमाणित अतिथि उपयोगकर्ता को कैप्टिव पोर्टल लॉगिन प्रक्रिया पूरी करने से पहले गेटवे के माध्यम से एक्सेस करने की अनुमति होती है।

डेवलपर्स को यह सुनिश्चित करना चाहिए कि लॉगिन प्रवाह को रुकने से रोकने के लिए कोई भी बाहरी संसाधन (जैसे सोशल लॉगिन APIs या पेमेंट गेटवे) वॉल्ड गार्डन में श्वेतसूचीबद्ध हो।

Base64 Encoding

एक बाइनरी-टू-टेक्स्ट एन्कोडिंग योजना जो बाइनरी डेटा (जैसे छवियों) को ASCII स्ट्रिंग के रूप में प्रस्तुत करती है, जिससे एसेट को सीधे HTML या CSS दस्तावेज़ों के भीतर एम्बेड किया जा सकता है।

लोगो और आइकन के लिए Base64 एन्कोडिंग का उपयोग करने से बाहरी HTTP अनुरोध समाप्त हो जाते हैं, जिससे यह सुनिश्चित होता है कि एसेट ऑफ़लाइन CNA वातावरण में पूरी तरह से रेंडर हों।

RADIUS (Remote Authentication Dial-In User Service)

एक नेटवर्किंग प्रोटोकॉल जो उन उपयोगकर्ताओं के लिए केंद्रीकृत प्रमाणीकरण, प्राधिकरण और लेखांकन (AAA) प्रबंधन प्रदान करता है जो नेटवर्क सेवा से जुड़ते हैं और उसका उपयोग करते हैं।

प्रमाणीकरण मानदंड पूरे होने पर नेटवर्क गेटवे पर अतिथि के MAC पते को अधिकृत करने के लिए कैप्टिव पोर्टल सर्वर एक RADIUS सर्वर के साथ संचार करता है।

System Font Stack

एक CSS फ़ॉन्ट-फ़ैमिली घोषणा जो बाहरी वेब फ़ॉन्ट्स पर पहले से इंस्टॉल किए गए ऑपरेटिंग सिस्टम फ़ॉन्ट्स (जैसे iOS पर San Francisco, Windows पर Segoe UI, और Android पर Roboto) को प्राथमिकता देती है।

सिस्टम फ़ॉन्ट स्टैक लागू करने से Google Fonts जैसी सेवाओं के लिए ब्लॉक किए गए बाहरी HTTP अनुरोधों को ट्रिगर किए बिना तत्काल टाइपोग्राफी रेंडरिंग सुनिश्चित होती है।

Canary URL

ऑपरेटिंग सिस्टम वेंडर्स (जैसे, captive.apple.com) द्वारा बनाए रखा जाने वाला एक समर्पित, अनएन्क्रिप्टेड HTTP URL यह परीक्षण करने के लिए कि क्या किसी डिवाइस के पास अप्रतिबंधित इंटरनेट कनेक्टिविटी है।

OS बैकग्राउंड नेटवर्क मैनेजर कैप्टिव पोर्टल की उपस्थिति का पता लगाने और CNA वेबव्यू पॉपअप को ट्रिगर करने के लिए इस URL की जांच करता है।

Passpoint (Hotspot 2.0)

Wi-Fi Alliance द्वारा विकसित एक उद्योग मानक जो मोबाइल उपकरणों को मैन्युअल कैप्टिव पोर्टल लॉगिन को बायपास करते हुए, स्वचालित रूप से Wi-Fi हॉटस्पॉट खोजने और सुरक्षित रूप से प्रमाणित करने में सक्षम बनाता है।

एंटरप्राइज़ मेहमानों को घर्षण-भारी स्प्लैश पेजों से सहज, सेलुलर-जैसे सुरक्षित रोमिंग अनुभवों में स्थानांतरित करने के लिए Purple जैसे प्लेटफ़ॉर्म के साथ Passpoint का उपयोग करते हैं।

हल किए गए उदाहरण

एक लक्ज़री 250-कमरों वाली होटल चेन [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 डेटा URI के रूप में एन्कोड करते हैं। पृष्ठभूमि के लिए, हम होटल के ब्रांड रंगों का उपयोग करके भारी छवियों को एक साफ, रिस्पॉन्सिव CSS ग्रेडिएंट से बदल देते हैं, जिससे पेज का वजन काफी कम हो जाता है।
JavaScript सरलीकरण: बहु-चरणीय एनिमेटेड विज़ार्ड बाहरी jQuery और GSAP लाइब्रेरी पर निर्भर करता है। हम इन बाहरी निर्भरताओं को हटा देते हैं और फॉर्म को सिंगल-पेज, सिंगल-कॉलम HTML संरचना में रिफैक्टर करते हैं। फॉर्म सत्यापन को हल्के, वेनिला JavaScript में फिर से लिखा गया है।
प्रमाणीकरण हैंडशेक: फॉर्म सबमिशन को AJAX-आधारित सबमिशन से बदलकर एक मूल HTML <form action="/submit" method="POST"> में संशोधित किया जाता है ताकि पूर्ण-पेज रीडायरेक्ट को ट्रिगर किया जा सके, जिससे iOS Websheet को अपनी कैनरी जांच निष्पादित करने और 'हो गया' बटन प्रदर्शित करने की अनुमति मिलती है।

परीक्षक की टिप्पणी: यह परिदृश्य हाई-एंड रचनात्मक डिज़ाइन और कैप्टिव वेबव्यू के कड़े सुरक्षा प्रतिबंधों के बीच क्लासिक संघर्ष का प्रतिनिधित्व करता है। रचनात्मक एजेंसियां अक्सर कैप्टिव पोर्टल को एक मानक डेस्कटॉप वेबसाइट की तरह मानती हैं। हालांकि, चूंकि डिवाइस पूर्व-प्रमाणित स्थिति में है, इसलिए नेटवर्क सभी बाहरी ट्रैफ़िक को ब्लॉक कर देता है। CSS को इनलाइन करके, सिस्टम-स्टैकिंग फ़ॉन्ट्स, Base64-एन्कोडिंग एसेट्स और मूल फॉर्म सबमिशन का उपयोग करके, हम iOS और Android उपकरणों पर 100% परिचालन विश्वसनीयता प्राप्त करते हुए प्रीमियम ब्रांड सौंदर्य को बनाए रखते हैं।

450 स्टोर्स वाली एक राष्ट्रीय रिटेल चेन [Retail](/industries/retail) अपने CRM को बढ़ावा देने के लिए WiFi स्प्लैश पेजों के माध्यम से अतिथि ईमेल कैप्चर करना चाहती है। उन्हें मेहमानों को मार्केटिंग न्यूज़लेटर्स के लिए ऑप्ट-इन करने की आवश्यकता होती है। प्रारंभिक डिज़ाइन में पहले से टिक किया हुआ 'मैं मार्केटिंग ईमेल प्राप्त करने के लिए सहमत हूँ' चेकबॉक्स है। इसके अलावा, पोर्टल उनके मुख्यालय में एक एकल स्थानीय सर्वर पर होस्ट किया गया है। पीक आवर्स (शनिवार दोपहर) के दौरान, देश भर के मेहमानों को गंभीर देरी का सामना करना पड़ता है, और कई लॉगिन पेज लोड करने में असमर्थ होते हैं, जिससे डेटा कैप्चर दरों में भारी गिरावट आती है।

हमें अनुपालन उल्लंघन और बुनियादी ढांचे की बाधा दोनों का समाधान करना होगा:

अनुपालन सुधार: GDPR और CCPA के तहत, पहले से टिक किए गए सहमति बॉक्स अवैध हैं। हम मार्केटिंग सहमति चेकबॉक्स को डिफ़ॉल्ट रूप से अनचेक करने के लिए HTML को संशोधित करते हैं (<input type="checkbox" id="marketing_consent">)। हम कानूनी समझौते को मार्केटिंग ऑप्ट-इन से अलग करने के लिए सेवा की शर्तों के लिए एक अलग, अनिवार्य चेकबॉक्स भी जोड़ते हैं।
इन्फ्रास्ट्रक्चर स्केलिंग: एक एकल केंद्रीकृत सर्वर पर एक राष्ट्रीय कैप्टिव पोर्टल की मेजबानी करना विफलता का एक एकल बिंदु और एक बड़ा विलंबता (latency) अवरोध पैदा करता है। हम पोर्टल फ्रंटएंड को एज-कैशिंग के साथ अत्यधिक उपलब्ध, विश्व स्तर पर वितरित कंटेंट डिलीवरी नेटवर्क (CDN) में स्थानांतरित करते हैं।
RADIUS एकीकरण: हम स्थानीय स्टोर एक्सेस पॉइंट्स को एक्टिव-एक्टिव रिडंडेंसी के साथ क्लाउड-नेटिव RADIUS क्लस्टर की ओर इंगित करने के लिए कॉन्फ़िगर करते हैं, यह सुनिश्चित करते हुए कि प्रमाणीकरण अनुरोधों को स्थानीय स्तर पर एज पर 50ms से कम विलंबता के साथ संसाधित किया जाए, शनिवार के पीक ट्रैफ़िक के दौरान भी।
Purple माइग्रेशन: इस संपूर्ण इंजीनियरिंग ओवरहेड को समाप्त करने के लिए, रिटेलर Purple पर माइग्रेट करता है। Purple का अंतर्निहित GDPR सहमति टूलिंग स्वचालित रूप से अनुपालन ऑप्ट-इन का प्रबंधन करता है, और उनका विश्व स्तर पर वितरित क्लाउड इन्फ्रास्ट्रक्चर 99.99% अपटाइम के साथ लाखों दैनिक प्रमाणीकरणों को संभालता है, जिससे स्केलिंग की बाधा पूरी तरह से हल हो जाती है।

परीक्षक की टिप्पणी: पहले से टिक किए गए सहमति चेकबॉक्स एक गंभीर अनुपालन जोखिम का प्रतिनिधित्व करते हैं जिससे भारी नियामक जुर्माना लग सकता है। सेवा की शर्तों से मार्केटिंग सहमति को अलग करना एक तकनीकी और कानूनी सर्वोत्तम अभ्यास है। बुनियादी ढांचे के पक्ष में, कैप्टिव पोर्टलों की केंद्रीकृत होस्टिंग एक एंटी-पैटर्न है। देशव्यापी रिटेल पदचिह्न के लिए क्लाउड-नेटिव RADIUS बैकएंड के साथ संयुक्त विकेंद्रीकृत, एज-कैश्ड फ्रंटएंड की आवश्यकता होती है। Purple जैसे प्रबंधित प्लेटफ़ॉर्म पर माइग्रेट करने से यह आर्किटेक्चरल जटिलता समाप्त हो जाती है, जिससे रिटेलर डेटाबेस स्केलिंग के बजाय मार्केटिंग अभियानों पर ध्यान केंद्रित कर सकता है।

अभ्यास प्रश्न

Q1. एक प्रमुख अंतरराष्ट्रीय हवाई अड्डे [Transport](/industries/transport) की एक IT टीम एक कस्टम-कोडेड कैप्टिव पोर्टल तैनात करती है। वे देखते हैं कि जबकि Android उपयोगकर्ता आसानी से कनेक्ट होते हैं, iOS उपयोगकर्ताओं के एक बड़े हिस्से को एक समस्या का सामना करना पड़ता है जहाँ वे सफलतापूर्वक प्रमाणित तो हो जाते हैं लेकिन वेब ब्राउज़ नहीं कर पाते हैं। बारीकी से निरीक्षण करने पर, iOS डिवाइस दिखाते हैं कि वे SSID से जुड़े हैं, लेकिन कैप्टिव पॉपअप पर शीर्ष-दाएं बटन पर अभी भी 'Done' के बजाय 'Cancel' लिखा है। इस समस्या का मूल कारण क्या है, और डेवलपर को इसे कैसे ठीक करना चाहिए?

संकेत: विश्लेषण करें कि Apple CNA हेल्पर कैसे पता लगाता है कि एक नेटवर्क कैप्टिव से प्रमाणित में स्थानांतरित हो गया है, और इस जांच को ट्रिगर करने के लिए किस ब्राउज़र कार्रवाई की आवश्यकता है।

मॉडल उत्तर देखें

मूल कारण यह है कि पोर्टल का सफलता पृष्ठ पूर्ण-पेज HTTP नेविगेशन करने के बजाय JavaScript (AJAX/SPA रूटिंग) के माध्यम से UI को गतिशील रूप से अपडेट कर रहा है। Apple iOS Captive Network Assistant (CNA) मिनी-ब्राउज़र केवल तभी अपनी बैकग्राउंड कनेक्टिविटी जांच (captive.apple.com पर कैनरी अनुरोध) को दोबारा चलाता है जब एक पूर्ण-पेज URL रीडायरेक्ट या नेविगेशन होता है। यदि डेवलपर AJAX के माध्यम से लॉगिन फॉर्म सबमिट करता है और केवल DOM में 'सफलता' संदेश प्रदर्शित करता है, तो CNA इस बात से अनजान रहता है कि नेटवर्क अनलॉक हो गया है। नतीजतन, शीर्ष-दाएं बटन 'Cancel' के रूप में ही रहता है। यदि उपयोगकर्ता बाहर निकलने के लिए 'Cancel' पर क्लिक करता है, तो OS मान लेता है कि लॉगिन विफल हो गया और WiFi नेटवर्क से डिस्कनेक्ट हो जाता है।

समाधान: डेवलपर को पूर्ण-पेज रीडायरेक्ट को बाध्य करने के लिए प्रमाणीकरण सफलता हैंडलर को संशोधित करना होगा। इसे एक मानक HTML <form action="/submit" method="POST"> के माध्यम से लॉगिन फॉर्म को मूल रूप से सबमिट करके या API द्वारा सफल प्रमाणीकरण प्रतिक्रिया वापस करने पर JavaScript में window.location.href = '/success_landing_page' निष्पादित करके प्राप्त किया जा सकता है। यह आवश्यक पूर्ण-पेज लोड को ट्रिगर करता है, जिससे CNA हेल्पर नेटवर्क स्थिति का पुनर्मूल्यांकन करने, यह सत्यापित करने कि कैनरी URL अब सुलभ है, और शीर्ष-दाएं बटन को 'Done' में बदलने के लिए मजबूर होता है।

Q2. एक स्टेडियम संचालन टीम [Events] एक अतिथि WiFi नेटवर्क लॉन्च करना चाहती है जो मार्केटिंग ऑप्ट-इन कैप्चर करता है। अनुपालन अधिकारी का आग्रह है कि पोर्टल 100% GDPR-अनुपालनकारी होना चाहिए। विकास टीम एक मॉकअप प्रस्तुत करती है जहाँ लॉगिन फॉर्म में पहले से टिक किया हुआ बॉक्स है जिसमें लिखा है 'मैं सेवा की शर्तों से सहमत हूँ और मार्केटिंग न्यूज़लेटर्स प्राप्त करने के लिए सहमति देता हूँ'। यह डिज़ाइन गैर-अनुपालनकारी क्यों है, और उच्च रूपांतरण दर बनाए रखते हुए GDPR को संतुष्ट करने के लिए HTML/CSS और फॉर्म संरचना को कैसे रिफैक्टर किया जाना चाहिए?

संकेत: स्पष्ट सहमति, सेवा की शर्तों से मार्केटिंग ऑप्ट-इन को अलग करने और मोबाइल स्क्रीन पर कानूनी पाठ की भौतिक दृश्यता के संबंध में GDPR की सख्त आवश्यकताओं पर विचार करें।

मॉडल उत्तर देखें

प्रस्तावित डिज़ाइन दो प्रमुख मोर्चों पर GDPR का उल्लंघन करता है: पहला, पहले से टिक किए गए चेकबॉक्स वैध सहमति का गठन नहीं करते हैं, जो स्वतंत्र रूप से दी गई, विशिष्ट, सूचित और स्पष्ट होनी चाहिए। दूसरा, सेवा की शर्तों के समझौते के साथ मार्केटिंग सहमति को बंडल करना गैर-अनुपालनकारी है; किसी उपयोगकर्ता को WiFi सेवा का उपयोग करने की शर्त के रूप में मार्केटिंग ईमेल स्वीकार करने के लिए मजबूर नहीं किया जा सकता है।

रिफैक्टरिंग रणनीति:

सहमति को अलग करें: चेकबॉक्स को दो अलग-अलग चेकबॉक्स में विभाजित करें। चेकबॉक्स A अनिवार्य है और सेवा की शर्तों और गोपनीयता नीति को कवर करता है। चेकबॉक्स B वैकल्पिक है और मार्केटिंग न्यूज़लेटर ऑप्ट-इन को कवर करता है।
अनचेक पर सेट करें: सुनिश्चित करें कि HTML में दोनों चेकबॉक्स डिफ़ॉल्ट रूप से अनचेक हों (checked विशेषता हटा दी गई हो)।
CSS दृश्यता: चूंकि 90% से अधिक उपयोगकर्ता मोबाइल पर हैं, इसलिए चेकबॉक्स को सीधे 'कनेक्ट' बटन के ऊपर रखें ताकि वे बिना स्क्रॉल किए दिखाई देने वाले हिस्से (above the fold) में दिखाई दें। पठनीयता के लिए सिस्टम फ़ॉन्ट स्टैक का उपयोग करें और लेबल फ़ॉन्ट आकार को 1.4 की लाइन-हाइट के साथ 14px पर सेट करें।
शर्तें स्क्रॉलबॉक्स: कानूनी पाठ को स्क्रीन से फॉर्म तत्वों को हटाने से रोकने के लिए, विस्तृत सेवा की शर्तों को एक निश्चित ऊंचाई वाले स्क्रॉल करने योग्य कंटेनर (max-height: 100px; overflow-y: auto; background-color: #F5F1ED; border: 1px solid #D1D5DB; border-radius: 6px;) में रखें जिसे टेक्स्ट लिंक के माध्यम से खोला या बंद किया जा सकता है। यह पूर्ण कानूनी अनुपालन सुनिश्चित करते हुए एक साफ, उच्च-रूपांतरण लेआउट बनाए रखता है।

Q3. एक रिटेल चेन [Retail](/industries/retail) 100 स्टोर्स में एक कस्टम-कोडेड स्प्लैश पेज तैनात कर रही है। डिज़ाइनर ने Google Fonts (Montserrat) का उपयोग किया और HTML head में CDN-होस्टेड Bootstrap स्टाइलशीट से लिंक किया। कॉर्पोरेट नेटवर्क पर परीक्षण के दौरान, पेज खूबसूरती से रेंडर होता है। हालांकि, जब एक कैप्टिव नेटवर्क कॉन्फ़िगरेशन के साथ एक परीक्षण स्टोर AP पर तैनात किया जाता है, तो पेज बिना स्टाइल वाले Times New Roman टेक्स्ट, टूटे हुए संरेखण (alignment) और गायब आइकन के साथ रेंडर होता है। ऐसा क्यों होता है, और एसेट्स को कैसे रिफैक्टर किया जाना चाहिए?

संकेत: उपयोगकर्ता के प्रमाणित होने से पहले नेटवर्क कनेक्शन की स्थिति का विश्लेषण करें, और यह निर्धारित करें कि ब्राउज़र वॉल्ड गार्डन के बाहर के डोमेन के लिए बाहरी HTTP अनुरोधों को कैसे संभालता है।

मॉडल उत्तर देखें

यह विफलता इसलिए होती है क्योंकि स्प्लैश पेज लोड होने पर डिवाइस एक अप्रमाणित, कैप्टिव स्थिति में होता है। इस स्थिति में, वायरलेस गेटवे सभी आउटबाउंड इंटरनेट ट्रैफ़िक को ब्लॉक कर देता है, केवल गेटवे के वॉल्ड गार्डन में स्पष्ट रूप से श्वेतसूचीबद्ध डोमेन के अनुरोधों की अनुमति देता है। चूंकि Bootstrap (cdn.jsdelivr.net) और Google Fonts (fonts.googleapis.com) के लिए CDN डोमेन श्वेतसूचीबद्ध नहीं हैं, इसलिए स्टाइलशीट और फ़ॉन्ट फ़ाइलों को लाने के लिए ब्राउज़र के अनुरोध चुपचाप विफल हो जाते हैं। नतीजतन, ब्राउज़र अपने डिफ़ॉल्ट रेंडरिंग इंजन पर वापस आ जाता है, जिससे बिना स्टाइल वाला HTML (Times New Roman टेक्स्ट) और खराब लेआउट प्राप्त होता है।

रिफैक्टरिंग रणनीति:

इनलाइन CSS: बाहरी Bootstrap स्टाइलशीट लिंक को हटा दें। आवश्यक CSS ग्रिड/फ्लेक्सबॉक्स नियमों को सीधे HTML <head> में <style> ब्लॉक में कॉपी करें। यह सुनिश्चित करता है कि सभी लेआउट निर्देश प्रारंभिक सिंगल-पेज पेलोड में वितरित किए जाएं।
सिस्टम फ़ॉन्ट स्टैक लागू करें: Google Fonts @import या <link> कॉल को हटा दें। इसे CSS में एक मूल सिस्टम फ़ॉन्ट स्टैक (font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;) से बदलें। यह डिवाइस को ऑपरेटिंग सिस्टम पर पहले से इंस्टॉल किए गए उच्च-गुणवत्ता वाले फ़ॉन्ट्स का उपयोग करने के लिए मजबूर करता है, जिससे बाहरी नेटवर्क निर्भरता पूरी तरह से समाप्त हो जाती है।
Base64 एन्कोड आइकन/लोगो: यदि लेआउट बाहरी छवियों या आइकन लाइब्रेरी (जैसे FontAwesome) पर निर्भर करता है, तो इन आइकन को SVG प्रारूप में बदलें और उन्हें HTML के भीतर इनलाइन या CSS में Base64 डेटा URIs के रूप में एम्बेड करें। यह गारंटी देता है कि पेज 100% आत्मनिर्भर है और शून्य इंटरनेट कनेक्टिविटी के साथ भी पूरी तरह से रेंडर होता है।

इस श्रृंखला में आगे पढ़ें

स्टाफ WiFi कैप्टिव पोर्टल: कर्मचारियों को ऑनबोर्ड और प्रमाणित करना

आईटी लीडर्स के लिए स्टाफ WiFi कैप्टिव पोर्टल को डिजाइन और तैनात करने पर एक व्यापक तकनीकी संदर्भ। यह गाइड परिचालन दक्षता बढ़ाने और सुरक्षा जोखिमों को कम करने के लिए EAP-TLS प्रमाणीकरण, BYOD ऑनबोर्डिंग, VLAN सेगमेंटेशन और बैंडविड्थ प्रबंधन को कवर करती है।

iPhone पर आपका कैप्टिव पोर्टल लोड क्यों नहीं हो रहा है

एक आधिकारिक तकनीकी संदर्भ मार्गदर्शिका जो बताती है कि iOS उपकरणों पर कैप्टिव पोर्टल लोड होने में क्यों विफल रहते हैं। यह Apple के Captive Network Assistant (CNA) डेमन डिटेक्शन लॉजिक का गहराई से विश्लेषण करती है, iCloud Private Relay और Private MAC पते जैसे प्रमुख iOS-विशिष्ट हस्तक्षेप कारकों की पहचान करती है, और नेटवर्क इंजीनियरों और स्थल ऑपरेटरों के लिए व्यापक समाधान रणनीतियों की रूपरेखा तैयार करती है।

कैप्टिव पोर्टल बनाम स्प्लैश पेज

यह आधिकारिक गाइड गेस्ट WiFi नेटवर्क में कैप्टिव पोर्टल और स्प्लैश पेज के बीच महत्वपूर्ण अंतर को विस्तार से बताती है। यह स्पष्ट करती है कि कैसे अंतर्निहित नेटवर्क इंटरसेप्शन तंत्र विज़ुअल गेस्ट इंटरफ़ेस के साथ मिलकर काम करता है, जिससे IT लीडर्स और वेन्यू ऑपरेटरों को सूचित आर्किटेक्चरल और खरीद निर्णय लेने में मदद मिलती है।