Personalizar o portal de autenticação da Web no Catalyst 9800 WLC

Atualizado:9 de Setembro de 2021
ID do documento:216121

Linguagem imparcial

O conjunto de documentação deste produto faz o possível para usar uma linguagem imparcial. Para os fins deste conjunto de documentação, a imparcialidade é definida como uma linguagem que não implica em discriminação baseada em idade, deficiência, gênero, identidade racial, identidade étnica, orientação sexual, status socioeconômico e interseccionalidade. Pode haver exceções na documentação devido à linguagem codificada nas interfaces de usuário do software do produto, linguagem usada com base na documentação de RFP ou linguagem usada por um produto de terceiros referenciado. Saiba mais sobre como a Cisco está usando a linguagem inclusiva.

Sobre esta tradução

A Cisco traduziu este documento com a ajuda de tecnologias de tradução automática e humana para oferecer conteúdo de suporte aos seus usuários no seu próprio idioma, independentemente da localização. Observe que mesmo a melhor tradução automática não será tão precisa quanto as realizadas por um tradutor profissional. A Cisco Systems, Inc. não se responsabiliza pela precisão destas traduções e recomenda que o documento original em inglês (link fornecido) seja sempre consultado.

    Introduction

    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.

    Prerequisites

    Requirements

    A Cisco recomenda que você tenha conhecimento destes tópicos:

    • HTML e CSS.
    • Guia de configuração da WLC 9800.

    Componentes Utilizados

    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).

    The information in this document was created from the devices in a specific lab environment. All of the devices used in this document started with a cleared (default) configuration. Se a rede estiver ativa, certifique-se de que você entenda o impacto potencial de qualquer comando.

    Personalizar os arquivos do portal da Web

    Os arquivos que compõem o portal de autenticação da Web personalizado são:

    • login.html
    • bootstrap.min.css
    • Jquery.min.js
    • style.css
    • animate.css
    • web_auth_logo.png

    Somente os arquivos abaixo precisariam ser editados:

    • login.html
    • style.css
    • web_auth_logo.png

    Este é o código-fonte do portal de autenticação da Web (login.html)

    Note: Leia o código cuidadosamente, ele tem comentários em HTML que explicam a estrutura do portal de autenticação da Web.

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>YOUR COMPANY TITLE HERE</title>
	<script src="jquery.min.js"></script>
            <link rel="stylesheet" href="bootstrap.min.css">
            <link rel="stylesheet" href="animate.css">
    <link rel="stylesheet" href="style.css" >
	<script>
		function submitAction(){
		      var link = document.location.href;
		      var searchString = "redirect=";
		      var equalIndex = link.indexOf(searchString);
		      var redirectUrl = "";

		      if (document.forms[0].action == "") {
		      var url = window.location.href;
		      var args = new Object();
		      var query = location.search.substring(1);
		      var pairs = query.split("&");
		          for(var i=0;i<pairs.length;i++){
		              var pos = pairs[i].indexOf('=');
		              if(pos == -1) continue;
		              var argname = pairs[i].substring(0,pos);
		              var value = pairs[i].substring(pos+1);
		              args[argname] = unescape(value);
		          }
		          document.forms[0].action = args.switch_url;
		      }
		      if(equalIndex >= 0) {
		            equalIndex += searchString.length;
		            redirectUrl = "";
		            redirectUrl += link.substring(equalIndex);
		      }
		      if(redirectUrl.length > 255)
		      redirectUrl = redirectUrl.substring(0,255);
		      document.forms[0].redirect_url.value = redirectUrl;
		      document.forms[0].buttonClicked.value = 4;
		      document.forms[0].submit();
		}

		function loadAction(){
		     var url = window.location.href;
		     var args = new Object();
		     var query = location.search.substring(1);
		     var pairs = query.split("&");
		     for(var i=0;i<pairs.length;i++){
		          var pos = pairs[i].indexOf('=');
		          if(pos == -1) continue;
		          var argname = pairs[i].substring(0,pos);
		          var value = pairs[i].substring(pos+1);
		          args[argname] = unescape(value);
		     }


		     document.forms[0].action = args.switch_url;

		     // This is the status code returned from webauth login action
		     // Any value of status code from 1 to 5 is error condition and user
		     // should be shown error as below or modify the message as it suits
		     // the customer

		     if(args.statusCode == 1){
		        alert("You are already logged in. No further action is required on your part.");
		     }
		     else if(args.statusCode == 2){
		        alert("You are not configured to authenticate against web portal. No further action is required on your part.");
		     }
		     else if(args.statusCode == 3){
		        alert("The username specified cannot be used at this time. Perhaps the user is already logged into the system?");
		     }
		     else if(args.statusCode == 4){
		        alert("Wrong username and password. Please try again.");
		     }
		     else if(args.statusCode == 5){
		        alert("The User Name and Password combination you have entered is invalid.  Please try again.");
		     }
		}

		</script>
</head>
<body class="animated fadeInUp">

<!-- TOP BAR -->
<nav class="navbar navbar-expand-md sticky-top navbar-light bg-dark ">
	<img src="web_auth_logo.png" style="width: 70px; height: 70px;">
<div class="container">
	<h4 class="align-middle text-white">Your Company Name Here</h4>
</div>
</nav>
<!-- END TOP BAR -->

<div class="bg"> <!---Background color -->

<div class="container-fluid padding "><!--- page content -->
	<div class="row padding">
		<div class="col-md-12 col-lg-6">
                <br>
                <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.
                </p>
                <br>
		<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>
                <br>
                <br>
                <div class="card mx-auto" style="width: 350px;"> <!--Form container-->
		    <h5 class="card-header info-color white-text text-center py-4">
			<strong>Sign in</strong>
		    </h5>				  
		    <div class="card-body px-lg-5 pt-0"><!--Form content-->
		    <!-- Form -->
		    <form class="text-center" style="color: #757575;" method="post">
		        <input TYPE="hidden" NAME="buttonClicked" SIZE="16" MAXLENGTH="15" value="0">
                        <input TYPE="hidden" NAME="redirect_url" SIZE="255" MAXLENGTH="255" VALUE="">
                        <input TYPE="hidden" NAME="err_flag" SIZE="16" MAXLENGTH="15" value="0">
			<!-- Username input -->
			<div class="md-form"><br>
			    <label for="materialLoginFormEmail">Username</label>
			    <input type="TEXT" name="username" SIZE="25" MAXLENGTH="63" VALUE="" class="form-control" required>
		       </div><br><!-- End Username input -->
                       <!-- Password input-->
		       <div class="md-form">
		           <label for="materialLoginFormPassword">Password</label>
			   <input type="password" name="password" SIZE="25" MAXLENGTH="63" VALUE="" class="form-control" required>
                       </div><br><!-- End password input -->
		       <!-- Sign in button -->
		          <button class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0" type="button" onclick="submitAction();">Sign in</button>
		    </form> <!-- End FORM -->
                    </div><!-- End Form content-->
                    </div><!--Form container-->
        </div>
	</div>
</div><!--- End page content -->
</div><!---End background color -->

</body>
</html>

    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.

    Note: 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:

    bg bg2 bg3
    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.

    Caution: 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.

    .bg-img{
       background-image: url("winter.jpg");
       height: 100%;
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover; 
    }

    O uso de uma imagem como fundo se parece com a próxima imagem:

    Winter background

    A classe bg5 se parece com a próxima imagem:

    BG5 background example

    A classe bg6 se parece com a próxima imagem:

    BG6 background example

    Para alterar o conteúdo da página com seus próprios termos e condições, edite a seção abaixo:

        
    Accessing Company Public Network From Your Wireless Device
    
    
    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. 
    
    
    
    
    Terms and Conditions of Use
    
    
    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.

    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:

    ...
    <body class="animated fadeInUp">
    ...
    <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.

    Tip: 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.

    Faça upload do Portal de autenticação da Web personalizada para a WLC 9800 e configure-a

    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

    Note: 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...

    Login.tar creation

    Dê a ele qualquer nome e escolha tar como o formato Arquivo:

    Archive creation

    3. Em seguida, navegue até a WLC 9800


    Administration > Management > Backup & Restore > altere o tipo de arquivo para Web Auth Bundle e carregue apenas o arquivo .tar personalizado

    Webauth bundle upload

    Webauth bundle upload finished

    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:

    WLC File Manager

    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

    Customized files list

    Observação: os arquivos que foram carregados manualmente não serão sincronizados com o modo de espera HA.

    Note: 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. Edite o Mapa de Parâmetros Globais do WebAuth e defina um endereço IP virtual. A omissão do endereço IP virtual pode fazer com que as imagens não sejam exibidas corretamente na página do portal.

    Parameter map settings

    Note: Quando o endereço IP virtual é definido, os clientes sem fio exibem o aviso do site no navegador porque a interface virtual do controlador envia o URL via HTTPS e não é confiável devido à ausência de um certificado assinado anexado a ele. Nesse caso, siga o procedimento para gerar um CSR e instalar um certificado válido.

    Somente se o HTTPS não for necessário, esses dois comandos podem ser executados para que o URL seja enviado somente via HTTP (esses comandos existem somente em 17.3.1 e mais recente):

    #configure terminal
    (config)#parameter-map type webauth global
    (config-params-parameter-map)#secure-webauth-disable
    (config-params-parameter-map)#webauth-http-enable
    (config-params-parameter-map)#end
    #write

    5. A próxima etapa é criar um novo Mapa de Parâmetros. Navegue da GUI do 9800>>Segurança>>Autenticação da Web>>Adicionar

    Creation of a webauth parameter map

    Depois de criado, clique no nome do mapa de parâmetros para editar:

    Web auth parameter map specificaiton

    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:

    Apple Login pop-up

    Webauth parameter map configuration

    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

    Webauth Parameter map

    Specifying webauth filenames

    6. 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).

    Note: As configurações de AAA e de ACL pré-autorização podem, opcionalmente, ser adicionadas nesta etapa.

    WLAN Layer3 Security settings

    Exemplo de configuração para ISE ou qualquer servidor RADIUS:
    radius server ISE
    address ipv4 x.x.x.x auth-port 1812 acct-port 1813
    timeout 5
    retransmitir 3
    autate-tester username dummy probe-on
    chave XXXXXXXXXXX
    sair
    aaa group server radius RADIUS-GROUP
    nome de servidor ISE
    sair
    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
    fim

    Note: 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.

    Para adicionar usuários convidados locais, navegue para Configuração>>Segurança>>Usuário convidado

    Guest User creation

    Verificar

    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.

    Troubleshoot

    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.

    Histórico de revisões

    Revisão Data de publicação Comentários
    1.0
    09-Sep-2021
    Versão inicial
    TAC Authored

    Colaborado por engenheiros da Cisco

    • Luis Hernandez
      CX
    • Ehsan Yassir
      CX
    • Shankar Ramanathan
      CX

    Este documento lhe foi útil?

    FeedbackFeedback

    Contate a Cisco

    Este documento se refere a estes produtos