Exemplo de configuração de autenticação da Web personalizada em Catalyst 9800 Wireless Controllers - Cisco
Exemplo de configuração de autenticação da Web personalizada em Catalyst 9800 Wireless Controllers
ID do documento:216121
Faça upload do Portal de autenticação da Web personalizada para a WLC 9800
Configurando o WebAuth local com páginas personalizadas usando o pacote WebAuth no código 9800 17.3.1
Este documento descreve como criar um portal de autenticação da Web personalizado para o Catalyst 9800 Wireless Controller (9800 WLC) Series. O código-fonte é fácil de editar e tem um design WEB ágil, compatível com os navegadores da Web modernos em computadores e dispositivos móveis.
Guia de configuração da WLC 9800.
As informações neste documento são baseadas nesta versão de software e hardware:
Cisco Catalyst 9800 Wireless Controller Series, IOS-XE Gibraltar v16.12.1s.
Código fonte do portal de autenticação da WEB (consulte o arquivo anexado).
Os arquivos que compõem o portal de autenticação da Web personalizado são:
web_auth_logo.png
Somente os arquivos abaixo precisariam ser editados:
Este é o código-fonte do portal de autenticação da Web (login.html)
Nota: Leia o código cuidadosamente, ele tem comentários em HTML que explicam a estrutura do portal de autenticação da Web.
<title>YOUR COMPANY TITLE HERE</title>
alert("The User Name and Password combination you have entered is invalid.  Please try again.");
<body class="animated fadeInUp">
<nav class="navbar navbar-expand-md sticky-top navbar-light bg-dark ">
<img src="web_auth_logo.png" style="width: 70px; height: 70px;">
<h4 class="align-middle text-white">Your Company Name Here</h4>
<div class="bg"> <!---Background color -->
<div class="container-fluid padding "><!--- page content -->
<h5>Accessing Company Public Network From Your Wireless Device</h5>
<p class="text-justify">The Company provides Internet access points at no charge in selected areas for guests with portable
computers or devices capable of receiving wireless signals.
You will be able to access the Internet from your wireless device when sitting within range of an access point.
Guests are expected to use the wireless access in a legal and responsible manner. By using this wireless access network, the
user  acknowledges that he/she is subject to, and agrees to abide by all laws, and all state and federal rules and regulations
applicable to Internet use.
<h5>Terms and Conditions of Use</h5>
<p class="text-justify">Guests will need a notebook/laptop computer or other device equipped with a wireless card that supports the WiFi standard.
The Company assumes no responsibility for the safety of equipment.</p>
<div class="card mx-auto" style="width: 350px;"> <!--Form container-->
<div class="card-body px-lg-5 pt-0"><!--Form content-->
<form class="text-center" style="color: #757575;" method="post">
<div class="md-form"><br>
<input type="TEXT" name="username" SIZE="25" MAXLENGTH="63" VALUE="" class="form-control" required>
</div><br><!-- End Username input -->
<input type="password" name="password" SIZE="25" MAXLENGTH="63" VALUE="" class="form-control" required>
</div><br><!-- End password input -->
<button class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0" type="button" onclick="submitAction();">Sign in</button>
</div><!-- End Form content-->
</div><!--Form container-->
</div><!--- End page content -->
</div><!---End background color -->
Para alterar o título da página, edite esta seção:
<strong>YOUR COMPANY TITLE HERE</strong>
Para alterar o logotipo da empresa, edite a marca img, use uma imagem .png ou .svg. Para ajustar o tamanho do logotipo, altere os parâmetros de largura e altura.
Nota: imagens .svg com fundo transparente são recomendadas para uma melhor aparência.
Para alterar a cor do plano de fundo do título da página, crie sua própria classe no arquivo style.css e substitua bg-dark por sua classe personalizada:
Para alterar a cor do plano de fundo e do texto da página, altere a classe bg:
Aqui estão as classes disponíveis. Observe que o plano de fundo e a cor do texto mudam de acordo:
bg4 bg5 bg6
Se quiser usar uma imagem como fundo ou uma cor diferente no arquivo style.css, edite a classe CSS bg-img e use-a.
Cuidado: A imagem de fundo não pode ser exibida corretamente em dispositivos móveis devido ao seu tamanho e o texto pode ser difícil de ler devido às cores da imagem.
background-image: url("winter.jpg");
O uso de uma imagem como fundo se parece com a próxima imagem:
A classe bg5 se parece com a próxima imagem:
A classe bg6 se parece com a próxima imagem:
Para alterar o conteúdo da página com seus próprios termos e condições, edite a seção abaixo:
Para nivelar o portal de autenticação, você pode adicionar animações sem complexidade, apenas editar o nome da animação após a classe animada, neste exemplo, ele é usado em duas animações. Para ver as animações disponíveis, visite animate.css:
<h4 class="align-middle text-white animated fadeInLeft slow">Your Company Name Here</h4>
Esta é a aparência final do portal de autenticação da Web personalizada com animações, selecione na guia Resultado para ver um exemplo ao vivo.
Dica: Você pode facilmente editar as cores e fontes do plano de fundo da maneira desejada, basta criar uma nova classe no arquivo style.css e usá-la.
Você deve ter os arquivos abaixo na pasta do projeto:
Carregue os arquivos um por um via TFTP ou FTP via CLI para o bootflash 9800: com o comando:
9800# copy bootflash: tftp://
Para configurar o portal de autenticação da Web personalizado, siga o Guia de Configuração do Software Cisco Catalyst 9800 Series Wireless Controller
No computador, abra o arquivo login.html com um navegador da Web e confirme se as animações e o conteúdo estão corretos.
Certifique-se de que todos os arquivos não estejam em subpastas ao carregá-los na WLC 9800 e não tenham um nome diferente.
Esta seção aborda um processo passo a passo sobre como instalar e configurar o pacote WebAuth personalizado no Cat 9800.
1. Baixe o pacote de autenticação da Web do controlador de LAN sem fio (WLC_WEBAUTH_BUNDLE_1.0.zip) do Cisco.com:
https://software.cisco.com/download/home/286316412/type/282791507/release/16.10.1
Nota: O pacote é o mesmo para todos os controladores 9800. Por exemplo, você pode baixar o arquivo do 9800-40 e usá-lo para o 9800-L ou virtual 9800-CL
2. Para personalizar o pacote, descompacte-o em uma pasta. Abra cada arquivo HTML que precisa ser editado conforme explicado acima e você pode carregar o logotipo junto com ele. Os nomes dos arquivos não são importantes, você pode chamá-los do que quiser.
Após esta etapa, exclua o arquivo login.tar porque precisaríamos gerar um novo.
Selecione todos os arquivos e clique com o botão direito do mouse e selecione 7-Zip (supondo que você tenha o programa gratuito 7-Zip instalado ou um programa semelhante) e escolha Adicionar ao arquivo...
Dê a ele qualquer nome e escolha tar como o formato Arquivo:
3. Em seguida, navegue até o 9800
Administration > Management > Backup & Restore > altere o tipo de arquivo para Web Auth Bundle e carregue apenas o arquivo .tar personalizado
Por padrão, o 9800 criará uma pasta dentro do flash de inicialização: e chamá-lo-á como quer que tenha chamado o seu ficheiro .tar e todos os ficheiros estarão nessa pasta:
Se você tiver a configuração de HA, será necessário executar o código 17.3 (ou versões futuras) devido a este bug de aprimoramento:
CSCvr05309 : copy webauth tar bundle to standby bootflash também em caso de configuração de HA
Para verificar o HA (Ativo e Standby), supondo que um arquivo chamado customized.tar tenha sido carregado
9800-1#show bootflash: | personalizado
9800-1#show stby-bootflash: | personalizado
Observação: os arquivos que foram carregados manualmente não serão sincronizados com o modo de espera HA.
Nota: Você não precisa do arquivo Success.html para fazer o webauth funcionar personalizado, mas se precisar dele, você pode simplesmente criar um e adicioná-lo ao arquivo .tar e carregar esse arquivo tar para a WLC 9800
4. A próxima etapa é criar um novo Mapa de Parâmetros. Navegue da GUI do 9800>>Segurança>>Autenticação da Web>>Adicionar
Depois de criado, clique no nome do mapa de parâmetros para editar:
Marcar "Desabilitar janela de sucesso" é desabilitar a página de sucesso padrão do 9800 e não o arquivo .html. Se estiver usando ambos, o convidado verá duas páginas de sucesso, uma da "página de sucesso padrão" 9800 e outra da página de sucesso personalizada.html.
Mesmo que você desabilite todas as páginas de sucesso (Desabilite a Janela de Sucesso e não tenha sucesso.html usado), os dispositivos móveis verão a página de sucesso como abaixo, enquanto os PCs a verão por um segundo e desaparecerão.
Exemplo do iPhone:
Se você clicar no ícone azul ao lado de qualquer página, o 9800 tentará carregá-lo e você poderá escolher as páginas como abaixo
5. A próxima etapa é marcar o mapa de parâmetros na WLAN (Cat9800 GUI>>Tags and Profiles>>WLAN). Neste exemplo, a WLAN autentica os convidados das contas de convidados locais 9800 primeiro e depois do ISE (servidor RADIUS).
Nota: As configurações de AAA e de ACL pré-autorização podem, opcionalmente, ser adicionadas nesta etapa.
Exemplo de configuração para ISE ou qualquer servidor RADIUS:
retransmitir 3
autate-tester username dummy probe-on
chave XXXXXXXXXXX
nome de servidor ISE
aaa authentication dot1x ISE-Method group RADIUS-GROUP
aaa authorization network ISE-Method group RADIUS-GROUP
aaa accounting identity start-stop group RADIUS-GROUP
aaa authentication webauth grupo local padrão RADIUS-GROUP
Nota: Como evidente no último comando CLI, a verificação de autenticação de usuário local acontece primeiro, depois do ISE/RADIUS. Você pode limitar a autenticação apenas para local ou para ISE/RADIUS somente ou deixá-la como acima para ambos, o que significa que o usuário, neste caso, será verificado localmente primeiro; se não estiver lá, então será verificado em relação ao RADIUS.