Personalice el Portal de autenticación Web en el WLC de Catalyst 9800

Actualizado:17 de mayo de 2023
ID del documento:216121

Lenguaje no discriminatorio

El conjunto de documentos para este producto aspira al uso de un lenguaje no discriminatorio. A los fines de esta documentación, "no discriminatorio" se refiere al lenguaje que no implica discriminación por motivos de edad, discapacidad, género, identidad de raza, identidad étnica, orientación sexual, nivel socioeconómico e interseccionalidad. Puede haber excepciones en la documentación debido al lenguaje que se encuentra ya en las interfaces de usuario del software del producto, el lenguaje utilizado en función de la documentación de la RFP o el lenguaje utilizado por un producto de terceros al que se hace referencia. Obtenga más información sobre cómo Cisco utiliza el lenguaje inclusivo.

Acerca de esta traducción

Cisco ha traducido este documento combinando la traducción automática y los recursos humanos a fin de ofrecer a nuestros usuarios en todo el mundo contenido en su propio idioma. Tenga en cuenta que incluso la mejor traducción automática podría no ser tan precisa como la proporcionada por un traductor profesional. Cisco Systems, Inc. no asume ninguna responsabilidad por la precisión de estas traducciones y recomienda remitirse siempre al documento original escrito en inglés (insertar vínculo URL).

    Introducción

    Este documento describe cómo crear un portal de autenticación web personalizado para el controlador inalámbrico Catalyst 9800 (WLC 9800).

    Prerequisites

    El código fuente es fácil de editar y tiene un diseño WEB sensible, compatible con los navegadores web modernos en computadoras y dispositivos móviles.

    Requirements

    Cisco recomienda que tenga conocimiento sobre estos temas:

    • HTML y CSS
    • Guía de configuración del WLC 9800

    Componentes Utilizados

    La información de este documento se basa en esta versión de software y hardware:

    • Cisco Catalyst serie 9800 Wireless Controller, Cisco IOS® XE Gibraltar v16.12.1s

    La información que contiene este documento se creó a partir de los dispositivos en un ambiente de laboratorio específico. Todos los dispositivos que se utilizan en este documento se pusieron en funcionamiento con una configuración verificada (predeterminada). Si tiene una red en vivo, asegúrese de entender el posible impacto de cualquier comando.

    Personalizar los archivos del portal web

    Los archivos que componen el portal de autenticación Web personalizado son:

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

    Sólo estos archivos necesitarían editarse:

    • log in.html
    • style.css
    • web_auth_logo.png

    Este es el código fuente del portal de autenticación web (log in.html)

    Nota: Lea el código atentamente, tiene comentarios HTML que explican la estructura del portal de autenticación 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 log in 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 can 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 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="materiallog inFormEmail">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="materiallog inFormPassword">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 cambiar la página, el título edite esta sección:

    ...
      <title>YOUR COMPANY TITLE HERE</title>
    ...

    Para cambiar el logotipo de la empresa, edite la etiqueta img, utilice una imagen .png o .svg. Para ajustar el tamaño del logotipo, cambie los parámetros de ancho y alto.

    Nota: Se recomiendan imágenes .svg con fondo transparente para una mejor apariencia.

    Para cambiar el color de fondo del título de página, cree su propia clase en el archivo style.css y reemplace bg-dark por su clase personalizada:

    Para cambiar el color del fondo y del texto de la página, cambie la clase bg:

    Aquí están las clases disponibles, tenga en cuenta que el color de fondo y de texto cambian en consecuencia:

    bg bg2 bg3
    bg4 bg5 bg6



    Si desea utilizar una imagen como fondo o un color diferente en el archivo style.css, edite la clase CSS bg-img y utilícela.

    Precaución: la imagen de fondo no puede verse correctamente en los dispositivos móviles debido a su tamaño, y el texto puede ser difícil de leer debido a los colores de la imagen.

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

    El uso de una imagen como fondo se parece a la siguiente imagen:

    Winter background

    La clase bg5 se parece a la siguiente imagen:

    BG5 background example

    La clase bg6 se parece a la siguiente imagen:

    BG6 background example

    Para cambiar el contenido de la página con sus propios términos y condiciones, edite esta sección:

        
    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 are 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 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 subir de nivel el portal de autenticación, puede agregar animaciones sin complejidad. Edite el nombre de la animación después de la clase animada. Para este ejemplo, utilizó dos animaciones. Para ver las animaciones disponibles, visite animate.css:

    ...
    <body class="animated fadeInUp">
    ...
    <h4 class="align-middle text-white animated fadeInLeft slow">Your Company Name Here</h4>
    ...

    Este es el aspecto final del portal de autenticación web personalizado con animaciones. Elija la pestaña Resultado para ver un ejemplo en vivo.

    Sugerencia: puede editar fácilmente los colores de fondo y las fuentes como desee. Cree una nueva clase en el archivo style.css y utilícela.

    Cargue el portal de autenticación Web personalizado en el WLC 9800 y configúrelo

    Esta sección trata un proceso paso a paso sobre cómo instalar y configurar Custom WebAuth Bundle en Cat 9800.

    1. Descargue Wireless LAN Controller Web Authentication Bundle (WLC_WEBAUTH_BUNDLE_1.0.zip) desde Cisco.com:
    https://software.cisco.com/download/home/286316412/type/282791507/release/16.10.1

    Nota: El paquete es el mismo para todos los controladores 9800. Por ejemplo, puede descargar el archivo desde el 9800-40 y utilizarlo para el 9800-L o el 9800-CL virtual

    2. Para personalizar el paquete, descomprima el paquete en una carpeta. Abra cada archivo HTML que necesite ser editado como se explicó anteriormente, y puede cargar el logotipo junto con él. Los nombres de archivo no son importantes, puede llamarlos como desee.


    Después de este paso, elimine el archivo log in.tar porque tendría que generar uno nuevo.


    Elija todos los archivos y haga clic con el botón derecho, y elija 7-Zip (o cualquier programa similar que haya instalado) y elija Agregar al archivo...

    Login.tar creation

    Asigne cualquier nombre y elija tar como formato de archivo:

    Archive creation

    3. Luego navegue al 9800 WLC


    Administration > Management > Backup & Restore (Administración > Administración > Copia de seguridad y restauración) cambie el tipo de archivo a Web Auth Bundle y cargue sólo el archivo .tar personalizado.

    Webauth bundle upload

    Webauth bundle upload finished

    De forma predeterminada, el 9800 puede crear una carpeta dentro de la memoria flash de inicialización: llámelo como sea que haya llamado a su archivo .tar, y todos los archivos pueden estar en esa carpeta:

    WLC File Manager

    Si tiene una configuración de HA, debe ejecutar el código 17.3 (o versiones futuras) debido a este error de mejora:

    Id. de error de Cisco CSCvr05309: copie el paquete tar de webauth en la memoria de inicialización en espera. Además, en caso de configuración de HA.

    Para comprobar tanto HA (Activo como En espera), si se ha cargado un archivo denominado customizado.tar.

    9800-1#show bootflash: | s personalizado
    9800-1#show stby-bootflash: | s personalizado

    Customized files list

    Nota:TLos archivos que se han cargado manualmente no se sincronizan en el modo de espera de HA.

    Nota: No necesita el archivo success.html para que funcione la autenticación web personalizada. Si lo necesita, puede simplemente crear uno y agregarlo al archivo .tar, y cargar ese archivo tar en el WLC 9800.

    4. Edite el mapa de parámetro global de WebAuth y establezca una dirección IP virtual. La omisión de la dirección IP virtual puede hacer que las imágenes no se muestren correctamente en la página del portal.

    Parameter map settings

    Nota: Una vez establecida la dirección IP virtual, los clientes inalámbricos muestran la advertencia del sitio web en el navegador, ya que la interfaz virtual del controlador envía la URL a través de HTTPS. No es de confianza debido a la ausencia de un certificado firmado adjunto. En tal caso, utilice el procedimiento para generar un CSR e instalar un certificado válido.

    Solo si HTTPS no es necesario, estos dos comandos se pueden ejecutar para que la URL se envíe a través de HTTP solamente (estos comandos sólo existen en 17.3.1 y versiones posteriores):

    #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. El siguiente paso es crear un nuevo mapa de parámetro. Navegue desde 9800 GUI > Security > Web-Auth > Add.

    Creation of a webauth parameter map

    Una vez creado, haga clic en el nombre del mapa de parámetro para editarlo:

    Web auth parameter map specificaiton

    Marque Disable Success Window para inhabilitar la página de éxito predeterminada de 9800 y no success.html. Si utiliza ambos, el invitado verá dos páginas de éxito, una de la página de éxito predeterminada de 9800 y la otra de la página de éxito personalizada success.html.

    Incluso si inhabilita todas las páginas de éxito (Deshabilitar ventana de éxito y no se utiliza success.html), los dispositivos móviles ven la página de éxito ilustrada, mientras que los PC la ven por un segundo y luego desaparece.

    Ejemplo de iPhone:

    Apple Login pop-up

    Webauth parameter map configuration

    Si hace clic en el icono azul situado junto a cualquier página, el modelo 9800 intentará cargarla y podrá elegir las páginas que se muestran en la ilustración.

    Webauth Parameter map

    Specifying webauth filenames

    6. El siguiente paso es etiquetar el mapa de parámetro a la WLAN (Cat9800 GUI > Etiquetas y perfiles > WLAN). En este ejemplo, la WLAN autentica a los invitados de las cuentas de invitados locales de 9800 en primer lugar y, a continuación, de ISE (servidor RADIUS).

    Nota: En este paso se pueden agregar configuraciones de ACL AAA y previas a la autenticación (opcional).

    WLAN Layer3 Security settings

    Configuración de ejemplo para ISE o cualquier servidor RADIUS:

    radius server ISE
address ipv4 x.x.x.x auth-port 1812 acct-port 1813
timeout 5
retransmit 3
automate-tester username dummy probe-on
key XXXXXXXXXXX
exit
aaa group server radius RADIUS-GROUP
server name ISE
exit
aaa authentication dot1x ISE-Method group RADIUS-GROUP
aaa authorization network ISE-Method group RADIUS-GROUP
aaa accounting identity default start-stop group RADIUS-GROUP
aaa authentication webauth default local group RADIUS-GROUP
end

    Nota: Como se desprende del último comando CLI, la comprobación de autenticación de usuario local se realiza en primer lugar y, a continuación, ISE/RADIUS. Puede limitar la autenticación a local solamente, o a ISE/RADIUS solamente, o dejarlo como ambos. Por ejemplo, el usuario se comprueba primero localmente y, si no está allí, se comprueba con RADIUS.

    Para agregar usuarios invitados locales, navegue hasta Configuration > Security > Guest User.

    Guest User creation

    Verificación

    En el ordenador, abra el archivo log in.html con un explorador web y confirme que las animaciones y el contenido son correctos.

    Troubleshoot

    Asegúrese de que todos los archivos no estén en subcarpetas cuando los cargue en el WLC 9800 y de que no tengan un nombre diferente.

    Historial de revisiones

    Revisión Fecha de publicación Comentarios
    3.0
    17-May-2023
    Actualización de Introducción, Requisitos de Estilo, Traducción Automática, Guiones y Formateo.
    1.0
    09-Sep-2021
    Versión inicial
    TAC Authored

    Con la colaboración de ingenieros de Cisco

    • Luis Hernandez
      Cisco TAC Engineer
    • Ehsan Yassir
      Wireless Network Consulting Engineer
    • Shankar Ramanathan
      Cisco TAC Engineer

    ¿Resultó útil este documento?

    FeedbackComentarios

    Contacte a Cisco

    Este documento se aplica a estos productos