Webverificatieportal aanpassen op Catalyst 9800 WLC

Bijgewerkt:30 juli 2024
Document-id:216121

Inclusief taalgebruik

De documentatie van dit product is waar mogelijk geschreven met inclusief taalgebruik. Inclusief taalgebruik wordt in deze documentatie gedefinieerd als taal die geen discriminatie op basis van leeftijd, handicap, gender, etniciteit, seksuele oriëntatie, sociaaleconomische status of combinaties hiervan weerspiegelt. In deze documentatie kunnen uitzonderingen voorkomen vanwege bewoordingen die in de gebruikersinterfaces van de productsoftware zijn gecodeerd, die op het taalgebruik in de RFP-documentatie zijn gebaseerd of die worden gebruikt in een product van een externe partij waarnaar wordt verwezen. Lees meer over hoe Cisco gebruikmaakt van inclusief taalgebruik.

Over deze vertaling

Cisco heeft dit document vertaald via een combinatie van machine- en menselijke technologie om onze gebruikers wereldwijd ondersteuningscontent te bieden in hun eigen taal. Houd er rekening mee dat zelfs de beste machinevertaling niet net zo nauwkeurig is als die van een professionele vertaler. Cisco Systems, Inc. is niet aansprakelijk voor de nauwkeurigheid van deze vertalingen en raadt aan altijd het oorspronkelijke Engelstalige document (link) te raadplegen.

    Inleiding

    In dit document wordt beschreven hoe u een aangepast webverificatieportaal maakt voor de Catalyst 9800 Wireless Controller (9800 WLC).

    Voorwaarden

    De broncode is eenvoudig te bewerken en heeft een responsief webontwerp, compatibel met moderne webbrowsers op computers en mobiele apparaten.

    Vereisten

    Cisco raadt kennis van de volgende onderwerpen aan:

    • HTML en CSS
    • 9800 WLC-configuratiehandleiding

    Gebruikte componenten

    De informatie in dit document is gebaseerd op deze software- en hardwareversie:

    • Cisco Catalyst 9800 draadloze controllerreeks, Cisco IOS® XE Gibraltar v16.12.1s

    De informatie in dit document is gebaseerd op de apparaten in een specifieke laboratoriumomgeving. Alle apparaten die in dit document worden beschreven, hadden een opgeschoonde (standaard)configuratie. Als uw netwerk live is, moet u zorgen dat u de potentiële impact van elke opdracht begrijpt.

    De bestanden van het webportaal aanpassen

    De bestanden waaruit het aangepaste webverificatieportaal bestaat, zijn:

    • Log in.html
    • bootstrap.min.css
    • jQuery.min.js
    • style.css
    • animate.css
    • web_auth_logo.png

    Alleen deze bestanden moeten worden bewerkt:

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

    Dit is de broncode voor het webverificatieportaal (log in.html)

    Opmerking: lees de code zorgvuldig, het heeft HTML-opmerkingen die de structuur van het webverificatieportaal uitleggen.

    <!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>

    Als u de titel van de pagina wilt wijzigen, bewerkt u dit gedeelte:

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

    Als u het bedrijfslogo wilt wijzigen, bewerkt u de img-tag en gebruikt u een .png- of .svg-afbeelding. Als u de grootte van uw logo wilt aanpassen, wijzigt u de breedte- en hoogteparameters.

    Opmerking: .svg-afbeeldingen met een transparante achtergrond worden aanbevolen voor een betere look en feel.

    Als u de achtergrondkleur van de paginatitel wilt wijzigen, maakt u uw eigen klasse in het bestand style.css en vervangt u bg-dark door uw aangepaste klasse:



    Als u de achtergrond en tekstkleur van de pagina wilt wijzigen, wijzigt u de klasse bg:

    Hier zijn de beschikbare klassen, merk op dat de achtergrond en tekstkleur dienovereenkomstig veranderen:

    BG BG2 BG3
    BG4 BG5 BG6



    Als u een afbeelding als achtergrond of een andere kleur in het bestand style.css wilt gebruiken, bewerkt u de CSS-klasse bg-img en gebruikt u deze.

    Let op: de achtergrondafbeelding kan niet goed worden weergegeven op mobiele apparaten vanwege de grootte en de tekst kan moeilijk te lezen zijn vanwege de afbeeldingskleuren.

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

    Het gebruik van een afbeelding als achtergrond lijkt op de volgende afbeelding:

    Winter background

    De klasse bg5 ziet eruit als de volgende afbeelding:

    BG5 background example

    De klasse bg6 ziet eruit als de volgende afbeelding:

    BG6 background example

    Als u de pagina-inhoud wilt wijzigen met uw eigen voorwaarden, bewerkt u dit gedeelte:

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

    Om het authenticatieportaal te nivelleren, kunt u animaties toevoegen zonder complexiteit. Bewerk de animatienaam na de geanimeerde klasse. In dit voorbeeld zijn twee animaties gebruikt. Om de beschikbare animaties te bekijken, gaat u naar animate.css:

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

    Dit is de laatste look van het aangepaste webauthenticatieportaal met animaties. Kies het tabblad Resultaat om een live voorbeeld te zien.

    Tip: u kunt de achtergrondkleuren en lettertypen eenvoudig bewerken zoals u dat wilt. Maak een nieuwe klasse in het bestand style.css en gebruik deze.

    Upload het aangepaste webverificatieportaal naar de 9800 WLC en configureer het

    Deze sectie behandelt een stapsgewijs proces voor het installeren en configureren van aangepaste WebAuth-bundel in Cat 9800.

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

    Opmerking: De bundel is hetzelfde voor alle 9800-controllers. U kunt het bestand bijvoorbeeld downloaden van de 9800-40 en het gebruiken voor 9800-L of virtuele 9800-CL

    2. Pak de bundel uit in een map om de bundel aan te passen. Open elk HTML-bestand dat moet worden bewerkt zoals eerder uitgelegd en u kunt het logo ermee uploaden. De bestandsnamen zijn niet belangrijk, je kunt ze noemen wat je maar wilt.


    Na deze stap verwijdert u het bestand log in.tar omdat u een nieuwe moet genereren.


    Kies alle bestanden en klik met de rechtermuisknop, kies 7-Zip (of een soortgelijk programma dat u hebt geïnstalleerd) en kies Toevoegen aan archief...

    Login.tar creation

    Geef het een naam en kies teer als het archiefformaat:

    Archive creation

    3. Navigeer vervolgens naar de 9800 WLC


    Beheer > Beheer > Back-up en herstel wijzigt het bestandstype in Web Auth Bundle en upload alleen het aangepaste .tar-bestand.

    Webauth bundle upload

    Webauth bundle upload finished

    Standaard kan de 9800 een map maken in de bootflash: noem het wat je je .tar-bestand hebt genoemd en alle bestanden kunnen in die map zijn:

    WLC File Manager

    Als u HA-instellingen hebt, moet u 17.3-code (of toekomstige releases) uitvoeren vanwege deze verbeteringsbug:

    Cisco bug ID CSCvr05309: kopieer webauth tar bundel naar standby bootflash. Ook in het geval van een HA-opstelling.

    Om zowel HA (Active als Standby) te controleren, als een bestand met de naam customized.tar is geüpload.

    9800-1#Show Bootflash: | S Aangepast
    9800-1#Show STBY-Bootflash: | S Aangepast

    Customized files list

    Opmerking: de bestanden die handmatig zijn geüpload, worden niet gesynchroniseerd met de HA Standby.

    Opmerking: u hebt het bestand success.html niet nodig om aangepaste webtekst te laten werken. Als je dat nodig hebt, kun je er gewoon een maken en toevoegen aan het .tar-bestand en dat tar-bestand uploaden naar de 9800 WLC.

    4. Bewerk de globale parameterkaart van WebAuth en stel een virtueel IP-adres in. Het weglaten van het virtuele IP-adres kan ertoe leiden dat afbeeldingen niet goed worden weergegeven op de portaalpagina.

    Parameter map settings

    Opmerking: zodra het virtuele IP-adres is ingesteld, geven draadloze clients de websitewaarschuwing weer in de browser omdat de virtuele interface van de controller de URL via HTTPS verzendt. Het wordt niet vertrouwd vanwege het ontbreken van een ondertekend certificaat dat eraan is gekoppeld. Gebruik in dat geval de procedure om een CSR te genereren en een geldig certificaat te installeren.

    Alleen als HTTPS niet vereist is, kunnen deze twee opdrachten worden uitgevoerd om de URL alleen via HTTP te verzenden (deze opdrachten bestaan alleen in 17.3.1 en hoger):

    #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. De volgende stap is het maken van een nieuwe parameterkaart. Navigeer vanuit 9800 GUI > Beveiliging > Web-Auth > Toevoegen.

    Creation of a webauth parameter map

    Nadat u deze hebt gemaakt, klikt u op de naam van de parametermap om deze te bewerken:

    Web auth parameter map specificaiton

    Schakel het venster Succes uitschakelen in om de standaardpagina voor het succes van de 9800 uit te schakelen en niet het succesvenster.html. Als beide worden gebruikt, ziet de gast dubbele succespagina's, een van de 9800 standaard succespagina en de andere van de aangepaste success.html.

    Zelfs als u alle succespagina's uitschakelt (Schakel het venster Succes uit en geen succes.html gebruikt), zien de mobiele apparaten de succespagina geïllustreerd, terwijl pc's het een seconde zien en dan verdwijnt.

    Voorbeeld van de iPhone:

    Web Auth LoginAanmelden bij webauteur

    Webauth parameter map configuration

    Als u naast een pagina op het blauwe pictogram klikt, probeert de 9800 dat te laden en kunt u de pagina's kiezen zoals geïllustreerd.

    Webauth Parameter map

    Specifying webauth filenames

    6. De volgende stap is het labelen van de parametertoewijzing naar het WLAN (Cat9800 GUI > Codes en profielen > WLAN). In dit voorbeeld verifieert het WLAN de gasten eerst vanuit lokale 9800-gastaccounts en vervolgens vanuit ISE (RADIUS Server).

    Opmerking: AAA- en pre-auth ACL-configuraties kunnen in deze stap worden toegevoegd (optioneel).

    WLAN Layer3 Security settings

    Voorbeeldconfiguratie voor ISE of een RADIUS-server:

    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

    Opmerking: zoals blijkt uit de laatste CLI-opdracht, wordt eerst de verificatie van de lokale gebruiker uitgevoerd en vervolgens ISE/RADIUS. U kunt de verificatie beperken tot alleen lokaal, of alleen ISE/RADIUS, of beide laten staan. De gebruiker wordt bijvoorbeeld eerst lokaal gecontroleerd en als deze er niet is, wordt deze gecontroleerd aan de hand van RADIUS.

    Als u lokale gastgebruikers wilt toevoegen, gaat u naar Configuratie > Beveiliging > Gastgebruiker.

    Guest User creation

    Verifiëren

    Open op uw computer het bestand log-in.html met een webbrowser en bevestig dat de animaties en inhoud correct zijn.

    Problemen oplossen

    Zorg ervoor dat alle bestanden niet in submappen staan wanneer u ze uploadt op de 9800 WLC en dat ze geen andere naam hebben.

    Revisiegeschiedenis

    Revisie Publicatiedatum Opmerkingen
    4.0
    30-Jul-2024
    Gecorrigeerde niet-standaard opmaak. Bijgewerkte links. Kleine grammaticale correcties.
    3.0
    17-May-2023
    Bijgewerkte inleiding, stijlvereisten, machinevertaling, redenen en opmaak.
    1.0
    09-Sep-2021
    Eerste vrijgave
    TAC Authored

    Bijgedragen door Cisco-engineers

    • Luis Hernandez
      Cisco TAC Engineer
    • Ehsan Yassir
      Consultingtechnicus voor draadloze netwerken
    • Shankar Ramanathan
      Cisco TAC Engineer

    Was dit document nuttig?

    FeedbackFeedback

    Contact Cisco

    Dit document is van toepassing op deze producten