Catalyst 9800 WLC에서 웹 인증 포털 사용자 지정
소개
이 문서에서는 Catalyst 9800 Wireless Controller(9800 WLC)를 위한 맞춤형 웹 인증 포털을 생성하는 방법에 대해 설명합니다.
사전 요구 사항
소스 코드는 편집하기 쉽고 반응성이 뛰어난 웹 디자인으로 컴퓨터 및 모바일 장치의 최신 웹 브라우저와 호환됩니다.
요구 사항
다음 주제에 대한 지식을 보유하고 있으면 유용합니다.
- HTML 및 CSS
- 9800 WLC 컨피그레이션 가이드
사용되는 구성 요소
이 문서의 정보는 다음 소프트웨어 및 하드웨어 버전을 기반으로 합니다.
- Cisco Catalyst 9800 Wireless Controller 시리즈, Cisco IOS® XE Gibraltar v16.12.1s
이 문서의 정보는 특정 랩 환경의 디바이스를 토대로 작성되었습니다. 이 문서에 사용된 모든 디바이스는 초기화된(기본) 컨피그레이션으로 시작되었습니다. 현재 네트워크가 작동 중인 경우 모든 명령의 잠재적인 영향을 미리 숙지하시기 바랍니다.
웹 포털 파일 사용자 지정
사용자 지정 웹 인증 포털을 구성하는 파일은 다음과 같습니다.
- 로그인.html
- bootstrap.min.css
- Jquery.min.js
- style.css
- animate.css
- web_auth_logo.png
다음 파일만 편집하면 됩니다.
- 로그인.html
- style.css
- web_auth_logo.png
웹 인증 포털(log in.html)의 소스 코드입니다.
<!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 이미지를 사용합니다. 로고 크기를 조정하려면 너비 및 높이 매개변수를 변경합니다.
<!-- 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는 다음 이미지와 같습니다.
클래스 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>
...
애니메이션이 있는 사용자 지정 웹 인증 포털의 최종 모양입니다. 실제 예제를 보려면 결과 탭을 선택합니다.
사용자 지정 웹 인증 포털을 9800 WLC에 업로드하고 구성합니다
이 섹션에서는 Cat 9800에서 사용자 지정 WebAuth 번들을 설치하고 구성하는 방법에 대한 단계별 프로세스를 다룹니다.
1. Cisco.com에서 무선 LAN 컨트롤러 웹 인증 번들(WLC_WEBAUTH_BUNDLE_1.0.zip)을 다운로드합니다.
https://software.cisco.com/download/home/286316412/type/282791507/release/16.10.1
2. 번들을 사용자 지정하려면 번들을 폴더에 압축을 풉니다. 앞서 설명한 대로 편집이 필요한 HTML 파일을 각각 열어 로고를 함께 업로드할 수 있습니다. 파일 이름은 중요하지 않으므로 원하는 대로 불러도 됩니다.
이 단계 후 새 파일을 생성해야 하므로 log in.tar 파일을 삭제합니다.
모든 파일을 선택하고 마우스 오른쪽 버튼을 클릭한 다음 7-Zip(또는 설치한 유사한 프로그램)을 선택하고 아카이브에 추가...를 선택합니다.
이름을 지정하고 Archive(아카이브) 형식으로 tar을 선택합니다.
3. 9800 WLC로 이동합니다.
Administration(관리) > Management(관리) > Backup & Restore(백업 및 복원)에서 파일 유형을 Web Auth Bundle(웹 인증 번들)로 변경하고 사용자 지정된 .tar 파일만 업로드합니다.
기본적으로 9800은 부트플래시 내에 폴더를 만들 수 있습니다. 즉, .tar 파일을 호출하면 해당 폴더에 모든 파일이 있을 수 있습니다.
HA 설정이 있는 경우, 다음과 같은 개선 버그로 인해 17.3 코드(또는 향후 릴리스)를 실행해야 합니다.
Cisco 버그 ID CSCvr05309 : webauth tar 번들을 스탠바이 부트플래시에 복사합니다. 또한 HA 설정의 경우.
HA(Active 및 Standby)를 모두 확인하려면 customized.tar라는 파일이 업로드된 경우
9800-1#show bootflash: | s 사용자 지정
9800-1#show stby-bootflash: | s 사용자 지정
4. WebAuth 전역 매개변수 맵을 편집하고 가상 IP 주소를 설정합니다. 가상 IP 주소가 누락되면 포털 페이지에 이미지가 제대로 표시되지 않을 수 있습니다.
HTTPS가 필요하지 않은 경우에만 URL이 HTTP를 통해서만 전송되도록 다음 두 명령을 실행할 수 있습니다(이러한 명령은 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(추가)에서 이동합니다.
생성되면 편집할 매개변수 맵 이름을 클릭합니다.
Disable Success Window(성공 창 비활성화)를 선택하여 success.html이 아닌 9800 기본 성공 페이지를 비활성화합니다. 둘 다 사용하는 경우 게스트는 이중 성공 페이지를 볼 수 있습니다. 하나는 9800 기본 성공 페이지이고 다른 하나는 사용자 지정 success.html입니다.
모든 성공 페이지를 비활성화하더라도(Disable Success Window and no success.html used) 모바일 디바이스에는 표시된 성공 페이지가 표시되며, PC에서는 이를 잠시 확인한 다음 사라집니다.
iPhone의 예:
웹 인증 로그인
페이지 옆에 있는 파란색 아이콘을 클릭하면 9800에서 해당 아이콘을 로드하려고 하며, 그림과 같이 페이지를 선택할 수 있습니다.
6. 다음 단계는 매개변수 맵을 WLAN에 태깅하는 것입니다(Cat9800 GUI > 태그 및 프로파일 > WLAN). 이 예에서 WLAN은 먼저 로컬 9800 게스트 계정에서, 그 다음에는 ISE(RADIUS 서버)에서 게스트를 인증합니다.
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로컬 게스트 사용자를 추가하려면 Configuration(컨피그레이션) > Security(보안) > Guest User(게스트 사용자)로 이동합니다.
다음을 확인합니다.
컴퓨터에서 웹 브라우저에서 log in.html 파일을 열고 애니메이션과 내용이 올바른지 확인합니다.
문제 해결
9800 WLC에 업로드할 때 모든 파일이 하위 폴더에 있지 않은지, 파일 이름이 다르지 않은지 확인합니다.
개정 이력
| 개정 | 게시 날짜 | 의견 |
|---|---|---|
4.0 |
30-Jul-2024 |
수정된 비표준 서식 업데이트된 링크. 작은 문법 교정입니다. |
3.0 |
17-May-2023 |
업데이트된 소개, 스타일 요구 사항, 기계 번역, Gerunds 및 서식. |
1.0 |
09-Sep-2021 |
최초 릴리스 |
피드백