在Catalyst 9800 WLC上自訂Web驗證入口網站

已更新: 2023 年 5 月 17 日

文件 ID:216121

無偏見用語

本產品的文件集力求使用無偏見用語。針對本文件集的目的，無偏見係定義為未根據年齡、身心障礙、性別、種族身分、民族身分、性別傾向、社會經濟地位及交織性表示歧視的用語。由於本產品軟體使用者介面中硬式編碼的語言、根據 RFP 文件使用的語言，或引用第三方產品的語言，因此本文件中可能會出現例外狀況。深入瞭解思科如何使用包容性用語。

關於此翻譯

思科已使用電腦和人工技術翻譯本文件，讓全世界的使用者能夠以自己的語言理解支援內容。請注意，即使是最佳機器翻譯，也不如專業譯者翻譯的內容準確。Cisco Systems, Inc. 對這些翻譯的準確度概不負責，並建議一律查看原始英文文件（提供連結）。

簡介

本文說明如何為Catalyst 9800無線控制器(9800 WLC)建立自訂Web驗證入口網站。

必要條件

原始碼易於編輯，而且具有響應式的WEB設計，與電腦和流動裝置上的現代Web瀏覽器相容。

需求

思科建議您瞭解以下主題：

HTML和CSS
9800 WLC配置指南

採用元件

本檔案中的資訊是根據以下軟體和硬體版本：

Cisco Catalyst 9800無線控制器系列，Cisco IOS® XE直布羅陀版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影象，以獲得更好的外觀和感覺。


    
    

    
     
      
      
      Your Company Name Here

若要更改頁面標題背景顏色，請在style.css檔案上建立自己的類，並用自定義類替換bg-dark:


    
    

    
     
     
 
      
     
 
      
      
 
      Your Company Name Here

若要更改頁面的背景和文本顏色，請更改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下載無線LAN控制器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..

為其指定任意名稱，然後選擇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代碼（或未來的版本），因為此增強功能錯誤：

思科錯誤ID CSCvr05309：將webauth tar套件組合複製到備用bootflash。此外，在設定HA的情況下。

若要檢查HA（主動和待命），請確認是否已上傳名為customized.tar的檔案。

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

Customized files list

附註：T手動上傳的檔案不會同步到HA備用。

附註： 自訂webauth不需要使用success.html檔案。如果需要，只需建立一個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	初始版本

由思科工程師貢獻

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

這份文件是否有所幫助？

意見

讓思科協助您

開啟支援問題單
(需有思科服務合約)