Captive Portal personalizado: Guía de HTML y CSS

Resumen Ejecutivo

Para los recintos empresariales - que abarcan desde hoteles de lujo Hospitality y cadenas de tiendas Retail hasta centros de transporte Transport y campus médicos modernos Healthcare - la página de bienvenida de WiFi para invitados es la puerta de acceso digital. Sin embargo, más del 90% de los inicios de sesión de WiFi para invitados se realizan en dispositivos móviles, donde la visualización no está regulada por navegadores estándar como Safari o Chrome, sino por webviews muy restringidos de Captive Network Assistant (CNA) [1]. Estos "mini-navegadores" imponen severas limitaciones de sandbox: bloquean las CDN externas, desactivan las cookies persistentes, ignoran las fuentes web externas y restringen estrictamente la ejecución de JavaScript para mitigar los riesgos de seguridad y evitar el secuestro de sesiones [2].

Cuando un desarrollador diseña una página de bienvenida utilizando los estándares web tradicionales, estas limitaciones provocan diseños rotos, pérdida de elementos de marca y botones de inicio de sesión inoperativos, lo que afecta directamente a la satisfacción del cliente y a la interacción digital. Esta guía ofrece soluciones a estos desafíos, presentando prácticas de codificación defensivas - como CSS en línea, codificación de recursos en Base64, familias de fuentes del sistema y flujos de autenticación explícitos basados en la navegación - para garantizar una visualización perfecta en múltiples plataformas. Además, analizamos cómo el uso de una solución gestionada como el creador de portales de Purple permite a los desarrolladores mantener un control creativo completo de HTML/CSS al tiempo que delegan la autenticación RADIUS, el escalado de bases de datos, el cumplimiento de GDPR/PCI y las integraciones de AP de múltiples fabricantes [3].

Análisis Técnico Detallado

Para crear un Captive Portal personalizado que sea resistente, los desarrolladores deben comprender la interceptación a nivel de red y la virtualización del navegador que se producen cuando un invitado se asocia a un SSID abierto.

El Ciclo de Vida del Captive Portal

Cuando un dispositivo cliente se asocia a un SSID cautivo, se desencadena la siguiente secuencia:

1. Asociación de IP: El dispositivo completa un protocolo de enlace de 3 vías y solicita una dirección IP a través de DHCP.
2. Sondeo de Conectividad Activo: El gestor de red en segundo plano del sistema operativo envía inmediatamente una solicitud HTTP GET a una URL de prueba dedicada y neutral con respecto al fabricante (por ejemplo, http://captive.apple.com/hotspot-detect.html de Apple o http://connectivitycheck.gstatic.com/generate_204 de Google) [1].
3. Interceptación de DNS/HTTP: El Wireless LAN Controller (WLC) local o el punto de acceso (AP) intercepta esta solicitud HTTP del puerto 80. En lugar de devolver el estado HTTP 200 o 204 esperado, la pasarela redirige el tráfico del cliente a la URL de la página de destino del Captive Portal mediante una redirección HTTP 302 [2].
4. Generación de Webview: Al detectar la redirección, el sistema operativo genera su mini-navegador nativo Captive Network Assistant (CNA) para mostrar la página de bienvenida redirigida, evitando que el usuario tenga que abrir manualmente un navegador completo.5. Autenticación y transición de estado: El usuario completa el formulario de inicio de sesión, enviando las credenciales de vuelta al servidor del portal, que indica a la pasarela (a menudo a través de un RADIUS Access-Accept o llamada API externa) que autorice la dirección MAC.
5. Apretón de manos de salida de CNA: El mini-navegador CNA realiza otra petición HTTP GET a su URL canaria. Si recibe la respuesta esperada 200/204, cambia su botón superior derecho de "Cancelar" a "Hecho" y establece la conexión WiFi como interfaz de red principal.

Restricciones del mini-navegador específicas de cada plataforma

Cada sistema operativo gestiona este ciclo de vida en diferentes entornos de webview, lo que da lugar a un comportamiento muy fragmentado. La siguiente tabla detalla estas restricciones críticas:

Solución de código para la trampa del botón "Hecho" de Apple CNA

Uno de los fallos más frecuentes en el desarrollo de portales personalizados es la trampa del botón "Hecho" en dispositivos iOS. Cuando un usuario se autentica, el webview de Websheet de iOS debe detectar que la red ya no es cautiva. Lo hace supervisando el éxito de sus peticiones canarias en segundo plano.

Fundamentalmente, el CNA de iOS solo activará esta comprobación tras una navegación HTTP de página completa (redirección de ubicación). Si un desarrollador crea una Single Page Application (SPA) moderna que envía datos de formulario a través de una llamada AJAX asíncrona (por ejemplo, fetch() o Axios) y actualiza el DOM dinámicamente sin cambiar la URL, el CNA nunca volverá a ejecutar su comprobación de conectividad. El usuario se autenticará a nivel de pasarela, pero el botón del CNA en la esquina superior derecha seguirá apareciendo como "Cancelar". Si el usuario frustrado hace clic en "Cancelar", el dispositivo iOS se desasociará inmediatamente del SSID, terminando la sesión de WiFi [1].

Para evitar esto, el controlador de éxito de la autenticación debe realizar una redirección de página completa a una página de destino física (por ejemplo, window.location.href = '/success') o enviar el formulario de inicio de sesión de forma nativa a través de una acción HTTP POST estándar.

Guía de implementación

Para garantizar un renderizado coherente en todas las plataformas, los desarrolladores deben pasar de un diseño web moderno y cargado de recursos a un estilo de codificación defensivo y altamente autónomo.

La regla de oro: diseñar para una conectividad a internet nula

Durante el estado cautivo, el dispositivo cliente no tiene acceso a la red internet general. Solo puede resolver y acceder a direcciones IP y dominios explícitamente incluidos en la lista de permitidos (Walled Garden) del controlador inalámbrico (como la propia IP del servidor del Captive Portal). Por lo tanto, cualquier recurso externo referenciado en su HTML no se cargará, lo que provocará un diseño roto.

Para diseñar de forma defensiva, implemente la siguiente lista de comprobación de diseño de Captive Portal priorizando dispositivos móviles:

1. Configuración de la ventana gráfica (Viewport)

Para evitar que los dispositivos móviles reduzcan la escala de la ventana gráfica a un ancho de escritorio (normalmente 980px), el <head> del HTML debe incluir una etiqueta meta de viewport receptiva. Sin esto, el texto y los campos de entrada aparecerán microscópicos en los dispositivos móviles:

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

2. Integración de CSS y eliminación de dependencias externas

Nunca enlace a archivos CSS externos o CDN (por ejemplo, Bootstrap, Tailwind o Google Fonts). Todo el CSS debe estar incrustado dentro de un bloque <style> en el <head> del HTML.

Para la tipografía, utilice una pila de fuentes del sistema que haga referencia a fuentes locales del sistema operativo preinstaladas. Esto evita por completo las solicitudes HTTP y garantiza que la página se cargue instantáneamente utilizando la tipografía sans-serif nativa y de alta calidad del dispositivo:

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

3. Codificación de recursos en Base64

No se debe hacer referencia a imágenes, logotipos e iconos a través de URL HTTP externas a menos que el dominio de alojamiento esté incluido en la lista de permitidos (walled garden) de la pasarela. El método más fiable consiste en codificar los recursos visuales pequeños (como logotipos PNG o SVG) directamente en el HTML o CSS como Data URI Base64:

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

4. Optimización de campos de entrada y objetivos táctiles

Para cumplir con los estándares de usabilidad móvil (como las Directrices de interfaz humana de Apple), todos los elementos interactivos deben optimizarse para la entrada táctil:

• Tamaño de fuente de entrada: El tamaño de la fuente del texto de entrada debe ser de al menos 16 px. Si el tamaño de la fuente es menor (por ejemplo, 14 px), iOS Safari y el CNA ampliarán automáticamente el campo de entrada al enfocarlo, lo que distorsionará el diseño de la página [1].
• Objetivos táctiles: Los botones, casillas de verificación y enlaces deben tener un área de objetivo táctil mínima de 44 px x 44 px para evitar clics accidentales o la frustración del usuario.

5. Consentimiento legal y conformidad con el GDPR

Al capturar datos de invitados (por ejemplo, correo electrónico, número de teléfono o perfiles sociales), la estructura HTML debe admitir el consentimiento legal explícito. Según el GDPR, las casillas de verificación premarcadas o las declaraciones de consentimiento implícito (por ejemplo, "Al iniciar sesión, acepta nuestros términos") no cumplen con la normativa [3].

• Proporcione una casilla de verificación desmarcada por defecto para los Términos y condiciones y las Políticas de privacidad.
• Envuelva el texto legal detallado en un contenedor de altura limitada y desplazable (max-height: 120px; overflow-y: auto;) para mantener el formulario de inicio de sesión principal visible en la pantalla de inicio.

<div class="consent-container">
    <input type="checkbox" id="terms_consent" name="terms_consent" required>
    <label for="terms_consent">
        Acepto explícitamente las <a href="#" onclick="showTerms()">Condiciones del servicio</a> y doy mi consentimiento para el tratamiento de mis datos de acuerdo con la <a href="#" onclick="showPrivacy()">Política de privacidad</a>.
    </label>
</div>

Plantilla HTML/CSS personalizada de Captive Portal

A continuación, se muestra una plantilla HTML/CSS completa de un solo archivo, lista para producción, que incorpora todas las mejores prácticas para móviles y conformes con CNA. Cuenta con un diseño adaptativo, una pila de fuentes del sistema, marcadores de posición listos para Base64, entradas táctiles y estructuras de consentimiento explícitas que cumplen con el GDPR:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Inicio de sesión WiFi de invitados</title>
    <style>
        /* Restablecimiento de CSS y declaraciones de variables */
        :root {
            --color-primary: #7458FD; /* Color de la marca Purple */
            --color-dark: #011638; /* Azul oscuro */
            --color-light: #F5F1ED; /* Blanco perla */
            --color-white: #FFFFFF;
            --color-border: #D1D5DB;
            --radius-container: 12px;
            --radius-element: 6px;
        }
        
        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--color-light);
            color: var(--color-dark);
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }
        
        /* Diseño de tarjeta adaptativo */
        .portal-card {
            background-color: var(--color-white);
            width: 100%;
            max-width: 420px;
            padding: 32px 24px;
            border-radius: var(--radius-container);
            box-shadow: 0 4px 20px rgba(1, 22, 56, 0.05);
            text-align: center;
        }
        
        .logo-container {
            margin-bottom: 24px;
        }
        
        /* Marcador de posición de logotipo en Base64 integrado */
        .logo {
            width: 120px;
            height: auto;
        }
        
        h1 {
            font-size: 24px;
            font-weight: 700;
            margin: 0 0 8px 0;
            color: var(--color-dark);
        }
        
        p {
            font-size: 14px;
            color: #4B5563;
            margin: 0 0 24px 0;
            line-height: 1.5;
        }
        
        /* Estilos del formulario */
        .form-group {
            text-align: left;
            margin-bottom: 16px;
        }
        
        label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 6px;
            color: var(--color-dark);
        }
        
        /* Crítico: el tamaño de fuente debe ser de al menos 16px para evitar el zoom automático en iOS */
        input[type="email"],
        input[type="text"] {
            width: 100%;
            height: 48px;
            padding: 12px 16px;
            font-size: 16px;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-element);
            background-color: var(--color-white);
            color: var(--color-dark);
            outline: none;
            transition: border-color 0.2s;
        }
        
        input[type="email"]:focus,
        input[type="text"]:focus {
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(116, 88, 253, 0.15);
        }
        
        /* Estilos de consentimiento */
        .consent-group {
            display: flex;
            align-items: flex-start;
            text-align: left;
            margin: 20px 0;
        }
        
        /* Tamaño del área táctil optimizado para móviles */
        input[type="checkbox"] {
            width: 20px;
            height: 20px;
            margin: 2px 12px 0 0;
            flex-shrink: 0;
            cursor: pointer;
            accent-color: var(--color-primary);
        }
        
        .consent-label {
            font-size: 13px;
            line-height: 1.4;
            color: #4B5563;
            user-select: none;
        }
        
        .consent-label a {
            color: var(--color-primary);
            text-decoration: none;
            font-weight: 600;
        }
        
        .consent-label a:hover {
            text-decoration: underline;
        }
        
        /* Touch-Friendly CTA Button (Minimum 44px height) */
        .btn-submit {
            width: 100%;
            height: 48px;
            background-color: var(--color-primary);
            color: var(--color-white);
            border: none;
            border-radius: var(--radius-element);
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .btn-submit:hover {
            background-color: #5B3EE3;
        }
        
        .btn-submit:active {
            background-color: #4A2FD4;
        }
        
        /* Legal Terms Scrollbox */
        .terms-scrollbox {
            display: none; /* Toggled via JS */
            text-align: left;
            font-size: 11px;
            color: #6B7280;
            background-color: var(--color-light);
            padding: 12px;
            border-radius: var(--radius-element);
            max-height: 100px;
            overflow-y: auto;
            margin-bottom: 16px;
            border: 1px solid var(--color-border);
        }
        
        .footer {
            margin-top: 24px;
            font-size: 11px;
            color: #9CA3AF;
        }
    </style>
</head>
<body>

    <div class="portal-card">
        <div class="logo-container">
            <!-- Replace src with your actual Base64-encoded SVG or PNG -->
            <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30">
                <rect width="100" height="30" rx="6" fill="#7458FD"/>
                <text x="50" y="20" font-family="sans-serif" font-size="12" fill="#FFFFFF" font-weight="bold" text-anchor="middle">SU MARCA</text>
            </svg>
        </div>
        
        <h1>Le damos la bienvenida a Guest WiFi</h1>
        <p>Introduzca sus datos a continuación para obtener un acceso seguro y de alta velocidad a Internet.</p>
        
        <!-- Form must submit natively (full page navigation) to clear Apple CNA -->
        <form action="/login/submit" method="POST" onsubmit="return validateForm()">
            <div class="form-group">
                <label for="guest_name">Nombre completo</label>
                <input type="text" id="guest_name" name="name" placeholder="Juan Pérez" required autocomplete="name">
            </div>
            
            <div class="form-group">
                <label for="guest_email">Dirección de correo electrónico</label>
                <input type="email" id="guest_email" name="email" placeholder="juan@ejemplo.com" required autocomplete="email">
            </div>
            
            <div class="consent-group">
                <input type="checkbox" id="terms_consent" name="terms_accepted" required>
                <label for="terms_consent" class="consent-label">
                    Acepto los <a href="#" onclick="toggleTerms(event)">Términos de servicio</a> y doy mi consentimiento para el tratamiento de datos de conformidad con el reglamento GDPR.
                </label>
            </div>
            
            <div id="terms_box" class="terms-scrollbox">
                <strong>Términos de servicio de WiFi:</strong><br>
                1. Este servicio se proporciona tal cual, sin garantías.<br>
                2. Los usuarios no deben realizar actividades ilegales que consuman mucho ancho de banda.<br>
                3. Los datos personales se recopilan exclusivamente para la autenticación y la aceptación de comunicaciones de marketing, de conformidad con nuestra Política de privacidad.
            </div>
            
            <button type="submit" class="btn-submit">Conectarse a WiFi</button>
        </form>
        
        <div class="footer">
            Tecnología de Purple | Secure Guest WiFi
        </div>
    </div>

    <script>
        function toggleTerms(e) {
            e.preventDefault();
            var box = document.getElementById('terms_box');
            box.style.display = (box.style.display === 'block') ? 'none' : 'block';
        }
        
        function validateForm() {
            var consent = document.getElementById('terms_consent');
            if (!consent.checked) {
                alert('Debe aceptar los Términos de servicio para conectarse.');
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

Solución de problemas y mitigación de riesgos

Al implementar Captive Portals con código HTML/CSS personalizado, los equipos de operaciones de TI suelen encontrarse con varios riesgos operativos graves:

1. El bucle de advertencia de certificados SSL/TLS

Debido a que los Captive Portals funcionan interceptando el tráfico, presentan un conflicto fundamental con la seguridad web HTTPS moderna. Cuando un usuario intenta visitar un sitio HTTPS (por ejemplo, https://www.google.com) y la puerta de enlace intenta redirigir ese tráfico a un Captive Portal HTTP, el navegador detecta una discrepancia en el certificado SSL y muestra una advertencia de seguridad crítica de "La conexión no es privada".

• Mitigación: Nunca intente interceptar el tráfico HTTPS directamente. Confíe plenamente en el asistente CNA nativo del sistema operativo (que realiza una solicitud HTTP no cifrada para activar la redirección). Asegúrese de que el dominio de su Captive Portal tenga un certificado SSL válido y de confianza pública (por ejemplo, Let's Encrypt o DigiCert) y que se sirva a través de HTTPS solo después de que la redirección HTTP inicial haya dirigido correctamente al usuario al dominio de su portal [2].

2. Fallos de resolución DNS (la trampa del jardín vallado)

Si su página HTML personalizada hace referencia a recursos externos, como un endpoint OAuth de inicio de sesión social (por ejemplo, Facebook, Google) o una pasarela de pago, las solicitudes DNS para estos dominios fallarán a menos que estén explícitamente en la lista blanca en el Walled Garden del controlador inalámbrico. Si falta un dominio en la lista blanca, el flujo de inicio de sesión se detendrá, mostrando una pantalla en blanco.

• Mitigación: Mantenga una lista de Walled Garden estricta y mínima. Si utiliza inicios de sesión sociales, incluya en la lista blanca los dominios comodín específicos recomendados por los proveedores de identidad (por ejemplo, *.google.com, *.gstatic.com).

3. Vulnerabilidades de tiempo de espera de sesión y suplantación de MAC

Los portales cautivos estándar autentican los dispositivos en función de sus direcciones MAC. Sin embargo, los sistemas operativos móviles modernos (iOS 14+ y Android 10+) utilizan direcciones MAC aleatorias (direcciones WiFi privadas) por defecto, rotándolas periódicamente. Esto puede hacer que se pida repetidamente a los invitados que se vuelvan a autenticar, destruyendo la experiencia de usuario [1].

• Mitigación: Implemente tiempos de espera de sesión razonables (por ejemplo, 24 horas) en el servidor RADIUS para evitar sesiones inactivas, y utilice estándares de autenticación modernos como Passpoint (Hotspot 2.0) o WPA3-Enterprise para una incorporación fluida y segura que evite por completo los portales cautivos basados en MAC.

Relevancia del producto Purple: Desarrollar frente a comprar

Aunque codificar una sola página HTML es sencillo, alojar, asegurar y escalar una infraestructura de portal cautivo personalizada plantea enormes obstáculos técnicos y de cumplimiento normativo. La siguiente tabla compara las realidades operativas y de ingeniería de autoalojar un portal personalizado frente a utilizar la plataforma gestionada para empresas de Purple:

La plataforma de Purple resuelve el dilema entre "crear o comprar". Ofrece a los desarrolladores la total libertad creativa de un espacio de trabajo HTML/CSS personalizado, al tiempo que elimina la compleja ingeniería de infraestructura de backend de alto riesgo necesaria para soportar la autenticación RADIUS segura a escala.

ROI e impacto empresarial

Invertir en un portal cautivo personalizado, adaptativo y diseñado profesionalmente ofrece un retorno cuantificable en las operaciones de TI, el marketing y el cumplimiento legal.

1. Reducción de costes operativos (tickets de soporte de TI)

En despliegues a gran escala, como un estadio o una cadena minorista con múltiples ubicaciones, un portal cautivo con fallos es uno de los principales desencadenantes de escaladas de soporte de TI. Cuando los invitados se encuentran con una "pantalla en blanco" o un botón de inicio de sesión que no responde, saturan al personal de las instalaciones o envían tickets de soporte.

$$\text{Ahorro anual en soporte} = (\text{Total de visitas anuales de invitados} \times \text{Tasa de fallos del portal} \times \text{Tasa de contacto con soporte}) \times \text{Coste por ticket de soporte}$$

• Escenario: Un centro de convenciones con 1.000.000 de visitantes anuales. Un portal mal codificado tiene una tasa de fallos del 5% en dispositivos iOS más antiguos, lo que genera una tasa de contacto con el soporte técnico del 10%. Con un coste estándar de mercado de 15 $ por ticket de soporte, el coste operativo es: $$(1.000,000 \times 0,05 \times 0,10) \times $15 = $75.000 \text{ anuales en gastos de soporte evitables}$$
• Resultado: La transición a una plantilla optimizada para CNA y centrada en móviles reduce la tasa de fallos del portal a <0,1%, eliminando prácticamente este desgaste operativo.

2. Captura de datos de marketing y optimización de suscripciones

Para los sectores de comercio minorista y hostelería, el portal WiFi para invitados es el mecanismo principal para capturar datos limpios de primera mano de los clientes. Una interfaz de usuario mal diseñada con texto microscópico o un diseño de formulario engorroso provoca altas tasas de rebote - los usuarios abandonan el proceso de inicio de sesión por completo, lo que se traduce en la pérdida de oportunidades de marketing.

• Caso de estudio (Comercio minorista): Una cadena nacional de tiendas implementó un portal cautivo optimizado para móviles utilizando la plataforma de Purple. Al sustituir un formulario de registro de varios pasos por un campo único para introducir el correo electrónico (tamaño de fuente: 16px) y un botón optimizado con un área de interacción de 48px, registraron un incremento del 42% en registros completados y un aumento del 28% en las suscripciones al boletín de marketing en el primer trimestre [6].

3. Mitigación de riesgos legales y regulatorios

Bajo el GDPR y la CCPA, la recopilación de datos que no cumpla con las normativas acarrea graves sanciones financieras (hasta el 4% de la facturación anual global bajo el GDPR). Confiar en casillas de verificación previamente marcadas o no proporcionar una Política de Privacidad clara y de fácil acceso en su página de bienvenida expone a la empresa a una inmensa responsabilidad legal.

• ROI de la mitigación: La implementación de una casilla de consentimiento explícita y sin marcar, junto con el alojamiento de las condiciones dentro de un cuadro de desplazamiento optimizado, garantiza el cumplimiento normativo al 100%, mitigando el riesgo de multas reguladoras multimillonarias y protegiendo la reputación de la marca.

Resumen de conclusiones clave

• El Sandbox de CNA es restrictivo: La Websheet de Apple iOS y el CNA de macOS son entornos altamente aislados en sandbox que bloquean recursos externos, cookies y fuentes web. Todo el estilo y los recursos deben ser autónomos (CSS en línea, imágenes Base64, fuentes del sistema) [1].
• AJAX interrumpe el saludo de salida de iOS: Para realizar con éxito la transición del dispositivo iOS de "cautivo" a "conectado" (cambiando el botón superior derecho de "Cancelar" a "Listo"), debe activar una redirección HTTP de página completa. Las actualizaciones asíncronas del DOM dejarán al dispositivo en un bucle cautivo.
• El enfoque móvil primero es obligatorio: Más del 90% de los inicios de sesión se realizan en dispositivos móviles. Diseñe un diseño de una sola columna (ancho máximo: 480px), utilice objetivos táctiles fáciles de pulsar (mínimo 44px x 44px) y aplique un tamaño de fuente mínimo de 16px en todos los campos de entrada de texto para evitar el zoom automático del navegador de iOS.
• Los jardines vallados controlan el DNS: Cualquier dominio externo referenciado durante el inicio de sesión (por ejemplo, las API de inicio de sesión social) debe estar explícitamente en la lista blanca en el jardín vallado del controlador inalámbrico, o de lo contrario la página no se cargará.
• Purple elimina la complejidad del backend: El uso del creador de portales de Purple ofrece a los desarrolladores un control total de HTML/CSS a través de un editor personalizado, al tiempo que delega las inmensas cargas de seguridad, escalabilidad y cumplimiento normativo de RADIUS, las integraciones de AP de múltiples proveedores y la gestión de bases de datos conforme al GDPR [3].

Referencias

• [1] Wireless Broadband Alliance: Captive Network Portal Behaviour
• [2] Android Open Source Project: Captive Portal Login Webview Integration
• [3] European Data Protection Board: Guidelines on Consent under Regulation 2016/679
• [4] Cómo implementar la autenticación 802.1X con Cloud RADIUS
• [5] Cisco Wireless APs: Guía de productos y despliegue 2026
• [6] Plataforma de marketing y analítica Purple WiFi

Escuche la sesión técnica informativa

Escuche a un arquitecto de soluciones sénior analizar las limitaciones técnicas y las estrategias de implementación para portales cautivos personalizados: