在Catalyst 9800 WLC上自定义Web身份验证门户

已更新: 2023 年 5 月 17 日
文档 ID:216121

非歧视性语言

此产品的文档集力求使用非歧视性语言。在本文档集中，非歧视性语言是指不隐含针对年龄、残障、性别、种族身份、族群身份、性取向、社会经济地位和交叉性的歧视的语言。由于产品软件的用户界面中使用的硬编码语言、基于 RFP 文档使用的语言或引用的第三方产品使用的语言，文档中可能无法确保完全使用非歧视性语言。 深入了解思科如何使用包容性语言。

关于此翻译

思科采用人工翻译与机器翻译相结合的方式将此文档翻译成不同语言，希望全球的用户都能通过各自的语言得到支持性的内容。 请注意：即使是最好的机器翻译，其准确度也不及专业翻译人员的水平。 Cisco Systems, Inc. 对于翻译的准确性不承担任何责任，并建议您总是参考英文原始文档（已提供链接）。

    简介

    本文档介绍如何为Catalyst 9800无线控制器(9800 WLC)创建自定义Web身份验证门户。

    先决条件

    源代码易于编辑，而且具有响应迅速的WEB设计，与计算机和移动设备上的现代Web浏览器兼容。

    要求

    Cisco 建议您了解以下主题：

    • HTML和CSS
    • 9800 WLC配置指南

    使用的组件

    本文档中的信息基于以下软件和硬件版本：

    • Cisco Catalyst 9800无线控制器系列，Cisco IOS® XE Gibraltar v16.12.1s

    本文档中的信息都是基于特定实验室环境中的设备编写的。本文档中使用的所有设备最初均采用原始（默认）配置。如果您的网络处于活动状态，请确保您了解所有命令的潜在影响。

    自定义Web门户文件

    组成自定义Web身份验证门户的文件包括：

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

    仅以下文件需要编辑：

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

    这是Web身份验证门户(log in.html)的源代码

    注意：请仔细阅读代码，其中包含HTML注释，用于解释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>

    要更改页面，请编辑此部分的标题：

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

    要更改公司徽标，请编辑img标记，使用.png或.svg图像。要调整徽标的大小，请更改宽度和高度参数。

    注意：建议使用具有透明背景的.svg图像来改善外观。

    要更改页面标题背景颜色，请在style.css文件上创建自己的类，并使用自定义类替换bg-dark:

    要更改页面的背景和文本颜色，请更改bg类：

    以下是可用的类，请注意，背景和文本颜色会相应地更改：

    bg bg2 bg3
    bg4 bg5 bg6



    如果要将图像用作背景或style.css文件上的其他颜色，请编辑CSS类bg-img并使用。

    注意：由于背景图像的大小原因，背景图像无法在移动设备上正常查看，并且由于图像颜色的原因，文本可能难以阅读。

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

    将图像用作背景看起来与下一个图像类似：

    Winter background

    Bg5类看起来像下一个映像：

    BG5 background example

    下面的bg6类图与下一张图类似：

    BG6 background example

    若要使用您自己的条款和条件更改页面内容，请编辑此部分：

        
    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.

    为了提升身份验证门户的级别，您可以添加动画而不会增加复杂性。在动画类后编辑动画名称。在本例中，它使用了两个动画。要查看可用的动画，请访问animate.css:

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

    这是带动画的自定义Web身份验证门户的最终外观。选择Result选项卡以查看实时示例。

    提示：您可以根据需要轻松编辑背景颜色和字体。在style.css文件上创建新类并使用它。

    将自定义Web身份验证门户上传到9800 WLC并进行配置

    本节介绍如何在Cat 9800中安装和配置自定义WebAuth捆绑包的分步过程。

    1.从Cisco.com下载无线局域网控制器Web身份验证捆绑包(WLC_WEBAUTH_BUNDLE_1.0.zip):
    https://software.cisco.com/download/home/286316412/type/282791507/release/16.10.1

    注意： 所有9800控制器的捆绑都相同。例如，可以从9800-40下载文件，并将其用于9800-L或虚拟9800-CL

    2.要自定义捆绑包，请将捆绑包解压到文件夹中。 打开每个需要按照前面所述进行编辑的HTML文件，您可以随其上载徽标。文件名并不重要，您可以根据需要调用它们。


    执行此步骤后，请删除log in.tar文件，因为您需要生成一个新文件。


    选择所有文件并右键单击，然后选择7-Zip（或您安装的任何类似程序），然后选择Add to archive...

    Login.tar creation

    为其指定任何名称，然后选择tar作为存档格式：

    Archive creation

    3.然后导航至9800 WLC


    Administration > Management > Backup & Restore将文件类型更改为Web Auth Bundle，然后仅上传自定义.tar文件。

    Webauth bundle upload

    Webauth bundle upload finished

    默认情况下，9800可以在bootflash中创建文件夹：调用您称为.tar文件的文件夹，并且所有文件都可以位于该文件夹中：

    WLC File Manager

    如果您有HA设置，则需要运行17.3代码（或未来的版本），因为存在以下增强漏洞：

    Cisco Bug ID CSCvr05309：将webauth tar捆绑包复制到备用bootflash。此外，如果设置了HA。

    要检查高可用性（主用和备用），如果已上传名为customized.tar的文件。

    9800-1#show bootflash: | 自定义
    9800-1#show stby-bootflash: | 自定义

    Customized files list

    注意： T手动上传的文件不会同步到HA备用。

    注意： 您不需要success.html文件来使自定义webauth工作。如果需要，只需创建一个tar文件并将其添加到.tar文件，然后将该tar文件上传到9800 WLC。

    4.编辑WebAuth全局参数映射并设置虚拟IP地址。遗漏虚拟IP地址可能导致图像无法在门户页面上正确显示。

    Parameter map settings

    注意：设置虚拟IP地址后，无线客户端会在浏览器上显示网站警告，因为控制器虚拟接口通过HTTPS发送URL。由于未附加签名证书，因此不受信任。在这种情况下，请使用步骤生成CSR并安装有效证书。

    仅当不需要HTTPS时，才能运行这两个命令以仅通过HTTP发送URL（这些命令仅存在于17.3.1及更高版本中）：

    #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.下一步是创建新的参数映射。从9800 GUI > Security > Web-Auth > Add导航。

    Creation of a webauth parameter map

    创建后，点击要编辑的参数映射名称：

    Web auth parameter map specificaiton

    选中Disable Success Window以禁用9800默认成功页，而不是success.html。如果同时使用两者，访客将看到双重成功页面，一个来自9800默认成功页面，另一个来自custom success.html。

    即使您禁用所有成功页面（禁用成功窗口并且未使用success.html），移动设备也会看到图示的成功页面，而PC会看到此页面，然后它就会消失。

    iPhone示例：

    Apple Login pop-up

    Webauth parameter map configuration

    如果点击任何页面旁边的蓝色图标，9800会尝试加载该页面，您可以按图示选择页面。

    Webauth Parameter map

    Specifying webauth filenames

    6.下一步是将参数映射标记为WLAN(Cat9800 GUI > Tags and Profiles > WLAN)。在本示例中，WLAN首先从本地9800访客帐户对访客进行身份验证，然后从ISE（RADIUS服务器）对访客进行身份验证。

    注意：可以在此步骤中添加AAA和预身份验证ACL配置（可选）。

    WLAN Layer3 Security settings

    ISE或任何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

    注意：从上一个CLI命令可以看出，首先进行本地用户身份验证检查，然后是ISE/RADIUS。您可以将身份验证限制为仅本地，或仅限制为ISE/RADIUS，或将其保留为两者。例如，首先在本地检查用户，如果用户不在本地，则根据RADIUS检查用户。

    要添加本地访客用户，请导航到Configuration > Security > Guest User。

    Guest User creation

    验证

    在您的计算机上，使用Web浏览器打开log in.html文件，并确认动画和内容正确。

    故障排除

    确保在9800 WLC上上传所有文件时不在子文件夹中，并且它们没有不同的名称。

    修订历史记录

    版本 发布日期 备注
    3.0
    17-May-2023
    已更新简介、样式要求、机器翻译、简档和格式。
    1.0
    09-Sep-2021
    初始版本
    TAC Authored

    由思科工程师提供

    • 路易斯·埃尔南德斯
      思科TAC工程师
    • 埃赫桑亚西尔
      无线网络咨询工程师
    • 尚卡尔·拉马纳森
      思科TAC工程师

    此文档是否有帮助?

    Feedback反馈

    联系我们

    本文档适用于以下产品