Captive Portal Personalizado: Guia de HTML e CSS

Resumo Executivo

Para locais corporativos - variando de hotéis de luxo Hospitality e redes de varejo Retail a hubs de trânsito Transport e complexos médicos modernos Healthcare - a splash page de WiFi para convidados é a porta de entrada digital. No entanto, mais de 90% dos logins de WiFi para convidados ocorrem em dispositivos móveis, onde a renderização é governada não por navegadores padrão como Safari ou Chrome, mas por webviews altamente restritos do Captive Network Assistant (CNA) [1]. Esses "mini-navegadores" impõem severas limitações de sandbox: eles bloqueiam CDNs externos, desabilitam cookies persistentes, ignoram fontes da web externas e restringem severamente a execução de JavaScript para mitigar riscos de segurança e evitar o sequestro de sessões [2].

Quando um desenvolvedor projeta uma splash page usando padrões web tradicionais, essas restrições resultam em layouts quebrados, ausência de elementos visuais da marca e botões de login que não funcionam, impactando diretamente a satisfação do cliente e o engajamento digital. Este guia fornece soluções para esses desafios, apresentando práticas de codificação defensivas - como CSS inline, codificação de ativos em Base64, pilhas de fontes do sistema e handshakes de autenticação explícitos baseados em navegação - para garantir uma renderização multiplataforma perfeita. Além disso, analisamos como a utilização de uma solução gerenciada, como o construtor de portais da Purple, permite que os desenvolvedores mantenham o controle criativo completo de HTML/CSS ao mesmo tempo em que terceirizam a autenticação RADIUS, escalabilidade de banco de dados, conformidade com GDPR/PCI e integrações de AP multi-fornecedor [3].

Detalhamento Técnico

Para construir um Captive Portal personalizado resiliente, os desenvolvedores devem compreender a interceptação em nível de rede e a virtualização de navegador que ocorrem quando um convidado se associa a um Service Set Identifier (SSID) aberto.

O Ciclo de Vida do Captive Portal

Quando um dispositivo cliente se associa a um SSID cativo, a seguinte sequência é acionada:

1. Associação de IP: O dispositivo conclui um handshake de 3 vias e solicita um endereço IP via DHCP.
2. Sonda de Conectividade Ativa: O gerenciador de rede em segundo plano do sistema operacional envia imediatamente uma solicitação HTTP GET para uma URL de teste dedicada e neutra em termos de fornecedor (por exemplo, http://captive.apple.com/hotspot-detect.html da Apple ou http://connectivitycheck.gstatic.com/generate_204 do Google) [1].
3. Interceptação de DNS/HTTP: O Wireless LAN Controller (WLC) local ou Access Point (AP) intercepta essa solicitação HTTP na porta 80. Em vez de retornar o status HTTP 200 ou 204 esperado, o gateway redireciona o tráfego do cliente para a URL da página de destino do Captive Portal por meio de um redirecionamento HTTP 302 [2].
4. Abertura de Webview: Ao detectar o redirecionamento, o SO abre seu mini-navegador nativo Captive Network Assistant (CNA) para exibir a splash page redirecionada, eliminando a necessidade de o usuário abrir manualmente um navegador completo.5. Autenticação e Transição de Estado: O usuário preenche o formulário de login, enviando as credenciais de volta para o servidor do portal, que instrui o gateway (geralmente via um RADIUS Access-Accept ou chamada de API externa) a autorizar o endereço MAC.
5. Handshake de Saída do CNA: O mini-navegador CNA realiza outro HTTP GET para sua URL canário. Se receber a resposta esperada 200/204, ele altera o botão superior direito de "Cancelar" para "Concluído" e estabelece a conexão WiFi como a interface de rede principal.

Restrições de Mini-Navegadores Específicas de Plataforma

Cada sistema operacional lida com esse ciclo de vida dentro de diferentes ambientes de webview, resultando em um comportamento altamente fragmentado. A tabela abaixo detalha essas restrições críticas:

Codificando ao Redor da Armadilha do Botão "Concluído" do Apple CNA

Um dos modos de falha mais frequentes no desenvolvimento de portais personalizados é a Armadilha do Botão "Concluído" em dispositivos iOS. Quando um usuário se autentica, a webview do Websheet do iOS deve detectar que a rede não é mais cativa. Ela faz isso monitorando o sucesso de suas requisições canário em segundo plano.

Fundamentalmente, o iOS CNA só acionará essa verificação mediante uma navegação HTTP de página inteira (redirecionamento de local). Se um desenvolvedor criar uma Single Page Application (SPA) moderna que envia dados de formulário por meio de uma chamada AJAX assíncrona (por exemplo, fetch() ou Axios) e atualiza o DOM dinamicamente sem alterar a URL, o CNA nunca executará novamente sua verificação de conectividade. O usuário será autenticado no nível do gateway, mas o botão do CNA no canto superior direito permanecerá como "Cancelar". Se o usuário frustrado clicar em "Cancelar", o dispositivo iOS irá se desassociar imediatamente do SSID, encerrando a sessão WiFi [1].

Para evitar isso, o manipulador de sucesso de autenticação deve realizar um redirecionamento de página inteira para uma página de destino física (por exemplo, window.location.href = '/success') ou enviar o formulário de login nativamente por meio de uma ação padrão HTTP POST.

Guia de Implementação

Para garantir uma renderização consistente em todas as plataformas, os desenvolvedores devem fazer a transição do web design moderno e repleto de ativos pesados para um estilo de codificação altamente independente e defensivo.

A Regra de Ouro: Projete para Conectividade Zero à Internet

Durante o estado cativo, o dispositivo cliente não tem acesso à internet em geral. Ele só pode resolver e acessar endereços IP e domínios explicitamente permitidos no Walled Garden do controlador sem fio (como o próprio IP do servidor do Captive Portal). Portanto, qualquer ativo externo referenciado em seu HTML falhará ao carregar, resultando em um layout quebrado.

Para projetar de forma defensiva, implemente a seguinte Lista de Verificação de Design de Captive Portal Mobile-First:

1. Configuração da Viewport

Para evitar que dispositivos móveis reduzam a escala da viewport para uma largura de desktop (normalmente 980px), o <head> HTML deve incluir uma meta tag de viewport responsiva. Sem isso, o texto e os campos de entrada parecerão microscópicos em dispositivos móveis:

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

2. Incorporação de CSS e Remoção de Dependências Externas

Nunca faça links para arquivos CSS externos ou CDNs (por exemplo, Bootstrap, Tailwind ou Google Fonts). Todo o CSS deve ser incorporado dentro de um bloco <style> no <head> HTML.

Para tipografia, utilize uma pilha de fontes do sistema que faça referência a fontes locais pré-instaladas do sistema operacional. Isso evita totalmente as requisições HTTP e garante que a página seja carregada instantaneamente usando a fonte sans-serif nativa e de alta qualidade do dispositivo:

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

3. Codificação de Ativos em Base64

Imagens, logotipos e ícones não devem ser referenciados por meio de URLs HTTP externas, a menos que o domínio de hospedagem esteja incluído na whitelist do jardim murado do gateway. O método mais confiável é codificar pequenos ativos visuais (como logotipos PNG ou SVG) diretamente no HTML ou CSS como Base64 Data URIs:

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

4. Otimização de Campos de Entrada e Alvos de Toque

Para estar em conformidade com as diretrizes de usabilidade móvel (como as Diretrizes de Interface Humana da Apple), todos os elementos interativos devem ser otimizados para entrada por toque:

• Tamanho da Fonte de Entrada: O tamanho da fonte do texto de entrada deve ser de pelo menos 16px. Se o tamanho da fonte for menor (por exemplo, 14px), o Safari do iOS e o CNA farão zoom automaticamente no campo de entrada ao focar, distorcendo o layout da página [1].
• Alvos de Toque: Botões, caixas de seleção e links devem ter uma área mínima de alvo de toque de 44px x 44px para evitar cliques acidentais ou frustração do usuário.

5. Consentimento Legal e Conformidade com a GDPR

Ao capturar dados de visitantes (por exemplo, e-mail, número de telefone ou perfis sociais), a estrutura HTML deve dar suporte ao consentimento legal explícito. Sob a GDPR, caixas de seleção pré-marcadas ou declarações de consentimento implícito (por exemplo, "Ao fazer login, você concorda com nossos termos") não estão em conformidade [3].

• Forneça uma caixa de seleção desmarcada por padrão para Termos e Condições e Políticas de Privacidade.
• Envolva o texto legal detalhado em um contêiner rolável de altura limitada (max-height: 120px; overflow-y: auto;) para manter o formulário de login principal visível sem rolar a página.

<div class="consent-container">
    <input type="checkbox" id="terms_consent" name="terms_consent" required>
    <label for="terms_consent">
        Eu concordo explicitamente com os <a href="#" onclick="showTerms()">Termos de Serviço</a> e consinto com o processamento dos meus dados de acordo com a <a href="#" onclick="showPrivacy()">Política de Privacidade</a>.
    </label>
</div>

Modelo de CSS/HTML Customizado de Captive Portal

Abaixo está um modelo CSS/HTML de arquivo único, pronto para produção, que incorpora todas as melhores práticas de conformidade com CNA e prioridade para dispositivos móveis. Ele apresenta um layout responsivo, uma pilha de fontes do sistema, marcadores de posição de ativos prontos para Base64, entradas amigáveis ao toque e estruturas de consentimento explícitas em conformidade com a GDPR:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Guest WiFi Login</title>
    <style>
        /* CSS Reset & Variable Declarations */
        :root {
            --color-primary: #7458FD; /* Purple Brand Colour */
            --color-dark: #011638; /* Dark Blue */
            --color-light: #F5F1ED; /* Pearl White */
            --color-white: #FFFFFF;
            --color-border: #D1D5DB;
            --radius-container: 12px;
            --radius-element: 6px;
        }
        
        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--color-light);
            color: var(--color-dark);
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }
        
        /* Layout responsivo do cartão */
        .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;
        }
        
        /* Espaço reservado do logotipo Base64 incorporado */
        .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 do formulário */
        .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: font-size precisa ser de pelo menos 16px para evitar o zoom automático do 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 consentimento */
        .consent-group {
            display: flex;
            align-items: flex-start;
            text-align: left;
            margin: 20px 0;
        }
        
        /* Dimensionamento do destino compatível com toque */
        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">SUA MARCA</text>
            </svg>
        </div>
        
        <h1>Bem-vindo à WiFi de Visitantes</h1>
        <p>Por favor, insira seus dados abaixo para obter acesso seguro à internet de alta velocidade.</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">Nome Completo</label>
                <input type="text" id="guest_name" name="name" placeholder="João Silva" required autocomplete="name">
            </div>
            
            <div class="form-group">
                <label for="guest_email">Endereço de E-mail</label>
                <input type="email" id="guest_email" name="email" placeholder="john@example.com" required autocomplete="email">
            </div>
            
            <div class="consent-group">
                <input type="checkbox" id="terms_consent" name="terms_accepted" required>
                <label for="terms_consent" class="consent-label">
                    Eu aceito os <a href="#" onclick="toggleTerms(event)">Termos de Serviço</a> e concordo com o processamento de dados em conformidade com os regulamentos da GDPR.
                </label>
            </div>
            
            <div id="terms_box" class="terms-scrollbox">
                <strong>Termos de Serviço do WiFi:</strong><br>
                1. Este serviço é fornecido no estado em que se encontra, sem garantias.<br>
                2. Os usuários não devem se envolver em atividades ilegais de uso intensivo de largura de banda.<br>
                3. Os dados pessoais são coletados exclusivamente para fins de autenticação e adesão de marketing, em conformidade com nossa Política de Privacidade.
            </div>
            
            <button type="submit" class="btn-submit">Conectar ao WiFi</button>
        </form>
        
        <div class="footer">
            Powered by Purple | Secure Guest WiFi
        </div>
    </div>

    <script>
        function toggleTerms(e) {
            e.preventDefault();
            var box = document.getElementById('terms_box');
            box.style.display = (box.style.display === 'block') ? 'none' : 'block';
        }
        
        function validateForm() {
            var consent = document.getElementById('terms_consent');
            if (!consent.checked) {
                alert('Você deve aceitar os Termos de Serviço para se conectar.');
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

Solução de Problemas e Mitigação de Riscos

Ao implantar Captive Portals com codificação HTML/CSS personalizada, as equipes de operações de TI frequentemente encontram vários riscos operacionais graves:

1. O Loop de Aviso de Certificado SSL/TLS

Como os Captive Portals funcionam interceptando o tráfego, eles apresentam um conflito fundamental com a segurança web HTTPS moderna. Quando um usuário tenta visitar um site HTTPS (por exemplo, https://www.google.com) e o gateway tenta redirecionar esse tráfego para um Captive Portal HTTP, o navegador detecta uma divergência no certificado SSL e exibe um aviso de segurança crítico "Sua conexão não é privada".

• Mitigação: Nunca tente interceptar o tráfego HTTPS diretamente. Dependa inteiramente do assistente nativo de CNA do sistema operacional (que faz uma solicitação HTTP não criptografada para acionar o redirecionamento). Certifique-se de que o domínio do seu Captive Portal tenha um certificado SSL válido e publicamente confiável (por exemplo, Let's Encrypt ou DigiCert) e seja servido via HTTPS apenas após o redirecionamento HTTP inicial ter encaminhado com sucesso o usuário para o domínio do seu portal [2].

2. Falhas de Resolução de DNS (A Armadilha do Walled Garden)

Se sua página HTML personalizada fizer referência a recursos externos - como um endpoint OAuth de login social (por exemplo, Facebook, Google) ou um gateway de pagamento - as solicitações de DNS para esses domínios falharão, a menos que estejam explicitamente na whitelist do Walled Garden do controlador sem fio. Se um domínio estiver ausente da whitelist, o fluxo de login será interrompido, apresentando uma tela em branco.

• Mitigação: Mantenha uma lista de Walled Garden estrita e mínima. Se estiver utilizando logins sociais, adicione à whitelist os domínios curinga específicos recomendados pelos provedores de identidade (por exemplo, *.google.com, *.gstatic.com).

3. Vulnerabilidades de Limite de Tempo de Sessão e MAC Spoofing

Captive Portals padrão autenticam dispositivos com base em seus endereços MAC. No entanto, os sistemas operacionais móveis modernos (iOS 14+ e Android 10+) utilizam endereços MAC aleatórios (endereços WiFi privados) por padrão, rotacionando-os periodicamente. Isso pode fazer com que os visitantes sejam solicitados repetidamente a se reautenticarem, destruindo a experiência do usuário [1].

• Mitigação: Implemente limites de tempo de sessão razoáveis (por exemplo, 24 horas) no servidor RADIUS para evitar sessões expiradas, e utilize padrões modernos de autenticação como Passpoint (Hotspot 2.0) ou WPA3-Enterprise para um onboarding seguro e contínuo que ignora completamente os Captive Portals baseados em MAC.

Relevância dos Produtos Purple: Construir vs. Comprar

Embora programar uma única página HTML seja simples, hospedar, proteger e dimensionar uma infraestrutura de Captive Portal personalizada apresenta enormes obstáculos técnicos e de conformidade. A tabela abaixo compara as realidades operacionais e de engenharia de auto-hospedar um portal personalizado versus utilizar a plataforma empresarial gerenciada da Purple:

A plataforma da Purple resolve o dilema "Construir vs. Comprar". Ela oferece aos desenvolvedores a total liberdade criativa de um espaço de trabalho HTML/CSS personalizado, eliminando ao mesmo tempo a complexa e de alto risco engenharia de infraestrutura de backend necessária para suportar a autenticação segura RADIUS em escala.

ROI e Impacto nos Negócios

Investir em um portal cativo responsivo e projetado profissionalmente oferece retornos quantificáveis nas operações de TI, marketing e conformidade jurídica.

1. Redução de Custos Operacionais (Chamados de Suporte de TI)

Em implantações de grande escala, como um estádio ou uma rede de varejo multi-site, um Captive Portal com falhas é o principal gerador de escalonamentos de suporte de TI. Quando os convidados se deparam com uma "tela branca" ou um botão de login que não responde, eles sobrecarregam a equipe no local ou abrem chamados de suporte.

$$\text{Economia Anual de Suporte} = (\text{Total de Visitas Anuais de Convidados} \times \text{Taxa de Falha do Portal} \times \text{Taxa de Contato com o Suporte}) \times \text{Custo por Chamado de Suporte}$$

• Cenário: Um centro de convenções com 1.000.000 de visitantes anuais. Um portal mal codificado tem uma taxa de falha de 5% em dispositivos iOS mais antigos, gerando uma taxa de contato com o suporte de 10%. Com um custo padrão de mercado de $15 por chamado de suporte, o custo operacional é de: $$(1.000,000 \times 0.05 \times 0.10) \times $15 = $75.000 \text{ anuais em custos desnecessários de suporte}$$
• Resultado: A transição para um modelo otimizado para CNA e focado em dispositivos móveis reduz a taxa de falha do portal para <0.1%, eliminando praticamente esse desperdício operacional.

2. Captura de Dados de Marketing e Otimização de Opt-in

Para estabelecimentos de varejo e hospitalidade, o portal de WiFi para convidados é o principal mecanismo para capturar dados primários limpos dos clientes. Uma interface de usuário mal projetada, com textos microscópicos ou um layout de formulário confuso, causa altas taxas de rejeição - os usuários abandonam completamente o processo de login, resultando em oportunidades de marketing perdidas.

• Estudo de Caso (Varejo): Uma rede nacional de varejo implementou um Captive Portal otimizado para dispositivos móveis utilizando a plataforma da Purple. Ao substituir um formulário de login de várias etapas por um campo único para inserção de e-mail (tamanho da fonte: 16px) e um botão otimizado com área de toque de 48px, eles observaram um aumento de 42% nos cadastros concluídos e um aumento de 28% nas adesões à newsletter de marketing logo no primeiro trimestre [6].

3. Mitigação de Riscos Jurídicos e Regulatórios

Sob o GDPR e CCPA, a coleta de dados não em conformidade acarreta penalidades financeiras severas (até 4% do faturamento anual global sob o GDPR). Depender de caixas de seleção pré-marcadas ou deixar de fornecer uma Política de Privacidade clara e de fácil acesso em sua splash page expõe a empresa a uma imensa responsabilidade jurídica.

• ROI de mitigação: Implementar uma caixa de seleção de consentimento explícita e desmarcada e hospedar os termos em uma caixa de rolagem otimizada garante 100% de conformidade regulatória, mitigando o risco de multas regulatórias multimilionárias e protegendo a reputação da marca.

Resumo dos Principais Aprendizados

• O Sandbox do CNA é restritivo: O Websheet do iOS da Apple e o CNA do macOS são ambientes altamente isolados em sandbox que bloqueiam ativos externos, cookies e fontes da web. Toda a estilização e ativos devem ser independentes (CSS inline, imagens Base64, fontes do sistema) [1].
• AJAX quebra o handshake de saída do iOS: Para transferir com sucesso o dispositivo iOS de "cativo" para "conectado" (alterando o botão superior direito de "Cancelar" para "Concluído"), você deve acionar um redirecionamento HTTP de página inteira. Atualizações assíncronas de DOM deixarão o dispositivo em um loop cativo.
• Mobile-First é obrigatório: Mais de 90% dos logins ocorrem em dispositivos móveis. Desenvolva um layout de coluna única (largura máxima: 480px), utilize alvos de toque fáceis de usar (mínimo de 44px x 44px) e aplique um tamanho mínimo de fonte de 16px em todas as entradas de texto para evitar o zoom automático do navegador do iOS.
• As Walled Gardens controlam o DNS: Qualquer domínio externo referenciado durante o login (por exemplo, APIs de login social) deve ser explicitamente incluído na lista de permissões da walled garden do controlador sem fio, caso contrário, a página não será carregada.
• Purple elimina a complexidade do backend: Utilizar o construtor de portal da Purple oferece aos desenvolvedores controle total de HTML/CSS por meio de um editor personalizado, enquanto elimina os imensos encargos de segurança, escalabilidade e conformidade de RADIUS, integrações de AP multi-vendor e gerenciamento de banco de dados em conformidade com o GDPR [3].

Referências

• [1] Wireless Broadband Alliance: Captive Network Portal Behaviour
• [2] Android Open Source Project: Captive Portal Login Webview Integration
• [3] European Data Protection Board: Guidelines on Consent under Regulation 2016/679
• [4] How to Implement 802.1X Authentication with Cloud RADIUS
• [5] Cisco Wireless APs: 2026 Guide to Products & Deployment
• [6] Purple WiFi Marketing & Analytics Platform

Ouça o Briefing Técnico

Ouça um arquiteto de soluções sênior discutir as restrições técnicas e estratégias de implementação para Captive Portals personalizados: