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

下载选项

PDF (1.3 MB)
在各种设备上使用 Adobe Reader 查看

已更新: 2024 年 7 月 30 日

文档 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图像，以获得更好的外观和效果。

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

要更改页面标题背景颜色，请在style.css文件中创建您自己的类，然后将bg-dark替换为自定义类：

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

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

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

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

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; 
}

使用图像作为背景看起来与下一幅图像类似：

冬季背景

类bg5看起来像是下一张图：

BG5背景示例

Bg6类看起来像下一张图：

BG6背景示例

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

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

为了提升身份验证门户的级别，您可以添加动画而不会增加复杂性。在动画类后编辑animation-name。在本例中，使用了两个动画。要查看可用的动画，请访问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 （或您已安装的任何类似程序），然后选择添加到存档……

为它指定任何名称并选择tar作为存档格式：

存档创建

3. 然后导航至9800 WLC

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

Webauth捆绑包上传

Webauth捆绑包上传完成

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

WLC文件管理器

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

思科漏洞ID CSCvr05309：将webauth tar捆绑包复制到备用bootflash。此外，在HA设置的情况下。

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

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

自定义文件列表

注意：手动上传的文件未同步到HA备用模式。

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

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

参数映射设置

注意：设置虚拟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导航。

创建webauth参数映射

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

Web身份验证参数映射规范

选中禁用成功窗口(Disable Success Window)可禁用9800默认成功页面而非success.html。如果同时使用两者，访客将看到两个成功页面，一个来自9800默认成功页面，另一个来自custom success.html。

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

iPhone示例：

Web身份验证登录

Webauth参数映射配置

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

Webauth参数映射

指定webauth文件名

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

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

WLAN第3层安全设置

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。

访客用户创建

验证

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

故障排除

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

修订历史记录

版本	发布日期	备注
4.0	30-Jul-2024	已更正的非标准格式。更新的链接。略微的语法更正。
3.0	17-May-2023	更新了简介、样式要求、机器翻译、简档和格式。
1.0	09-Sep-2021	初始版本

由思科工程师提供

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

此文档是否有帮助?

反馈

联系我们

提交支持案例
(需要思科服务合同)