Customize Web Portals In Cisco Identity Services Engine, Release 1.2
Author: Jason A. Kunst
Current Document Version: 1.0
June, 2014
Table of Contents Customize Web Portals Introduction .......................................................................................................................................................... 3 Disclaimer .............................................................................................................................................................. 4 Solution .................................................................................................................................................................. 5 Overview: Page Customization ......................................................................................................................... 8 Common Items on Multiple Pages ................................................................................................................... 9 ISE Configuration ............................................................................................................................................ 35 Conclusion .......................................................................................................................................................... 39 References .......................................................................................................................................................... 40 Terminology ....................................................................................................................................................... 41 Cisco Identity Services Engine, Release 1.2 2 Customize Web Portals Introduction
Administrators of Cisco Identity Services Engine (ISE) can use this document to customize the portal pages that provide
network access using Centralized Web Authentication (CWA) or Guest access. An ISE admin can navigate to
Administration > Web Portal Management > Settings > Guest > Multi-Portal Configurations > Portal Type > Custom
Default Portal (Upload Files) and upload the custom web pages and content. The administrative GUI does not help the
admin to perform the customization.
The Cisco ISE Admin portal allows you to customize the look-and-feel of the end-user portals by uploading your company's
logos, background images, and color schemes. These changes apply to the My Devices, Sponsor, and all Guest (Hotspot,
Sponsored-Guest and Self-Registered Guest) portals, but you can also assign different images and colors to the mobile Guest
portals.
You can also perform customization by modifying the default portal theme settings. These settings allow you to change the
appearance of the portals without having to upload customized HTML files to the Cisco ISE server. However, if you want to
create themes unique to specific Guest portals, you must upload your own custom HTML files instead. In this guide, we will
discuss customization of portals in great detail.
Note: This document does not cover how to customize the device registration portal, advanced customization or discuss how to configure
guest access overall.
For information on how to setup guest network access, refer to the following guide:
http://www.cisco.com/en/US/solutions/collateral/ns340/ns414/ns742/ns744/docs/howto_41_guest_services.pdf
Cisco Identity Services Engine, Release 1.2 3 Customize Web Portals Disclaimer
The default pages and built-in theme chooser will not give you the full customization capabilities that editing the actual
HTML pages do. When you create custom portals by uploading your own HTML pages, some functionality such as the
details policy, language templates, mobile portal pages and portal themes do not apply. So, if these features are important to
you, you should write the HTML code to deliver similar functionality, or use the standard portal pages “as is” instead.
Cisco Identity Services Engine, Release 1.2 4 Customize Web Portals Solution
This document provides sample HTML code for a simple customized portal site for a fictitious company named "Example".
The procedures to upload the HTML files into Cisco ISE will be covered along with a discussion of the functionality in each
of the pages. The reader of this document should be able to use their editor of choice.
For additional information, refer to the pertinent topics in the Cisco ISE 1.2 User Guide:
Cisco Identity Services Engine, Release 1.2 5 Customize Web Portals http://www.cisco.com/en/US/docs/security/ise/1.2/user_guide/ise_webportals.html
http://www.cisco.com/c/en/us/td/docs/security/ise/1-2/user_guide/ise_user_guide/ise_webportals.html#pgfId1000904
For information on the fields that can be used with custom HTML pages, refer to the Cisco ISE 1.2 User Guide:
http://www.cisco.com/c/en/us/td/docs/security/ise/1-2/user_guide/ise_user_guide/ise_custom_portals.html#pgfId1015800
Cisco Identity Services Engine, Release 1.2 7 Customize Web Portals Overview: Page Customization
In this section of the guide, we list each of the pages that can be customized and show the relevant code, specific
attributes, field, and variables being used.
The goal of this document is to discuss the key elements in an HMTL file needed to make a customized page. It will
not discuss what the HTML page or code is doing outside of this scope. You will see formatting code and other
elements that are outside of the scope of this discussion.
The sample HTML files are available in a .zip file called ISE12CustomPortalPackage-v#.zip and can be
downloaded from Cisco.com from http://www.cisco.com/cisco/software/navigator.html?a=a&i=rpm. Navigate to
Products > Security > Access Control and Policy > Cisco Identity Services Engine > Cisco Identity Services
Engine Software and download the .zip file.
You can use any HTML editor to view the HTML files in the .zip file. You do not need to use the default file names,
but we recommend using the same names for ease of use. The page examples provided are a simple version of the
customization that can be done. The pages are sized to fit on all devices ranging from an iPhone (mobile) to an iPad
(tablet) to a large screen device such as a MAC OSX laptop.
Important: Please use the sample files in the ISE12CustomPortalPackage-v#.zip file on cisco.com. Do NOT copy and paste any of
the HTML code from this document into a file.
Cisco Identity Services Engine, Release 1.2 8 Customize Web Portals Common Items on Multiple Pages
The following code is common to multiple pages.
<link rel="stylesheet" href="/guestportal/portals/example/default.css">
The default.css file is used on all portal pages to provide a common look, feel and function. We will not discuss this
file in detail as this is for the web developer to design. We provide examples but do not support the functions or
explain how they work.
<script src="js/customportals.js"></script>
The customportals.js is used in ISE 1.2 patch 8 to capture and track the session ID when moving between pages.
This file is critical to include on any page that has submits, login, self-service registration/success, device
registration, and change password. Without this file, the custom pages will receive unknown errors and experience
weird behavior. This file is used on every page except the Authentication Success page.
<script type="text/javascript" src="/guestportal/portals/example/scripts.html"></script>
The scripts.html file is used for functional references in the javascript used to create the page. We will not discuss
this file in detail as this is for the web developer to design. We provide examples but do not support the functions or
explain how they work.
Important: Please use the sample files in the ISE12CustomPortalPackage-v#.zip file on cisco.com. Do NOT copy and paste any of
the HTML code from this document into a file.
Cisco Identity Services Engine, Release 1.2 9 Procedure 1
Customize Web Portals Set a CSS file to handle a common look and feel
Although not a requirement for guest customization, setting a Cascading Style Sheet (CSS) will allow you to
reference a single file to give all your portal pages the same look and feel across different browsers, operating
systems and screen sizes. It will also let you embed functions that can be repeated or called on more than 1 page.
If at a later point you wanted to change something universal that lived on all your pages (example: font size, color,
etc) then you would just change this one file rather than updating all the other files for your portal.
http://www.w3schools.com/css/css_intro.asp
A CSS file is included in the .zip HTML file for this product demonstration. This can be modified to suit your needs
or you can provide your own if you are an experienced web developer. Another option is to use jQuery ThemeRoller
to modify or build your own CSS file.
http://jqueryui.com/themeroller/
If you decide not to implement a CSS, then your global settings are represented on each page using common HTML
tags.
Cisco Identity Services Engine, Release 1.2 10 Procedure 2
Customize Web Portals Login page customization – login.html
The first page that a user sees when being redirected by the network (wireless controllers, switches) to the CWA
(Centralized Web Authentication) Portal or the Guest Portal is the Login page. You can fully customize the look and
feel of this page as long as you keep some of the key elements needed to work with Cisco ISE.
The key elements for the Login Page are:
•
Field: Username
ID Name: guestUser.name
•
Field: Password
ID Name: guestUser.password
•
Login mechanism
•
Customportal.js & Script reference
•
For validation requiring that credentials are input before clicking on change password or device
registration.
Optional resources included in this project are:
•
Link to Change Password
•
Link to Self Service (for guests creating their own accounts)
•
Link to device registration
•
There is HTML that is not covered here and for a developer to look over in the HTML package files
Important: Please use the sample files in the ISE12CustomPortalPackage-v#.zip file on cisco.com. Do NOT copy and paste any of
the HTML code from this document into a file. The code below is just a partial view. Please reference the .zip file on cisco.com
for the full code.
Cisco Identity Services Engine, Release 1.2 11 Customize Web Portals Elements in the sample customized Login page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width"/>
<title>Example Guest Login Page</title>
<link rel="stylesheet" href="/guestportal/portals/example/default.css">
<script type="text/javascript" src="/guestportal/portals/example/scripts.html"></script>
<script src="js/customportals.js"></script>
</head>
<body id="page-login">
<div id="page-wrapper">
<div id="bg-wrapper">
<div id="bg-image-overlay" class="fill"></div>
</div>
<div id="body-wrapper">
<div id="header-wrapper">
<div id="company-logo">
<div><img src="/guestportal/portals/example/custom_logo.png"
alt="logo"></div>
</div>
</div>
<div id="content-wrapper">
<div class="inner-wrapper">
<div id="form-wrapper">
<h2 id="page-title">Welcome Guests!</h2>
<p class="optional-text">Please enter your credentials to access our
network.</p>
<form id="form-login" method="post"
action="/guestportal/LoginCheck.action" onsubmit="getDynamicAction(this);">
<input type="text" placeholder="Username" name="guestUser.name"
id="username" alt="Username"><br>
<input type="password" placeholder="Password"
name="guestUser.password" id="password" alt="Password">
<button class="global-btn" type="submit" name="button">Log
In</button>
Cisco Identity Services Engine, Release 1.2 12 Customize Web Portals </form>
Cisco Identity Services Engine, Release 1.2 13 Customize Web Portals Information only. DO NOT USE.
The above section provides the login form to fill in credentials. On submission, the session ID is sent to Cisco ISE customportal.js
file for reference using the getDynamicAction in the post. After this the user is sent to the AUP page if configured for that under
configuration for multi-portal > operations.
<div class="links">
<a href="#" id="link-change-pwd">Change&nbsp;Password</a>
<a href="#" id="link-service">SelfService</a>
<a href="#" id="link-device-reg">Device&nbsp;Registration</a>
Information only. DO NOT USE.
The links above bring the user to Change Password, SelfService, or Device Registration referenced by the class used for links.
In order to process Change Password or Device Registration, valid credentials must be entered before clicking the links. If not, the
user is brought to an error page.
If you are not using any of these services, you can remove the option by deleting the appropriate <a href line.
This is what our Login page looks like across all platforms
Cisco Identity Services Engine, Release 1.2 14 Procedure 3
Customize Web Portals AUP page customization – aup.html
After a user logs in, if required, they will see the AUP (Acceptable Use Policy) page. You can fully customize the
look and feel of this page as long as you keep some of the key elements needed to work with Cisco ISE.
The key elements for the AUP Page are:
•
Accept or Decline button: Accept brings user to the success page. Decline redirects user back to login
page.
•
guestUser.acceptUsePolicy checkbox - http://www.cisco.com/c/en/us/td/docs/security/ise/12/user_guide/ise_user_guide/ise_custom_portals.html#13391
•
Customportal.js & Script reference
Important: Please use the sample files in the ISE12CustomPortalPackage-v#.zip file on cisco.com. Do NOT copy and paste any of
the HTML code from this document into a file. The code below is just a partial view. Please reference the .zip file on cisco.com
for the full code.
Elements in the sample customized AUP page
<!DOCTYPE html>
<html>
<head>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width"/>
<title>Example Guest Agreement</title>
<link rel="stylesheet" href="/guestportal/portals/example/default.css">
<script src="js/customportals.js"></script>
<script type="text/javascript" src="/guestportal/portals/example/scripts.html"></script>
</head>
<body id="page-aup">
<div id="page-wrapper">
<div id="bg-wrapper">
<div id="bg-image-overlay" class="fill"></div>
</div>
<div id="body-wrapper">
<div id="header-wrapper">
<div id="company-logo">
<div><img src="/guestportal/portals/example/custom_logo.png"
alt="logo"></div>
</div>
</div>
Cisco Identity Services Engine, Release 1.2 15 Customize Web Portals <div id="content-wrapper">
<div class="inner-wrapper">
<div id="form-wrapper">
<h2 id="page-title">Acceptable Use Policy</h2>
<div id="policy-wrapper">
<div id="policy-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum.</p>
Information only. DO NOT USE.
There are several more of these paragraphs with filler text in original files. I removed them to save space in this document.
<form id="form-1" action="/guestportal/AcceptPolicy.action" method="post"
onsubmit="getDynamicAction(this);">
<div class="row">
<input type="checkbox" id="guestUser.acceptUsePolicy"
name="guestUser.acceptUsePolicy">
<label for="guestUser.acceptUsePolicy" id="acceptInputLabel">
<span class="checkbox"></span>
<span class="label">Accept terms and conditions</span>
</label>
</div>
<button type="submit" id="acceptButton" class="globalbtn">Accept</button>
<button id="declineButton" class="local-btn">Decline</button>
</form>
<form id="form-2" action="/guestportal/DeclinePolicy.action" method="post"
onsubmit="getDynamicAction(this);">
<input type="hidden" id="buttonClicked" name="buttonClicked" value="">
<input type="hidden" id="switch_url"name="switch_url"value="">
<input type="hidden" id="redirect" name="redirect" value="">
<input type="hidden" id="err_flag"name="err_flag" value="">
</form>
Cisco Identity Services Engine, Release 1.2 16 Customize Web Portals Information only. DO NOT USE.
The above section provides an Accept or Deny button for the user. On submission, the session ID is sent to ISE customportal.js file
for reference using the getDynamicAction in the post. Accept brings user to Success page. Deny brings user to Login page.
This is what our AUP page looks like across all platforms
Cisco Identity Services Engine, Release 1.2 17 Procedure 4
Customize Web Portals Success page customization – guest_success.html
After the user accepts the AUP page they will see the success page. This page is rather simple. You can fully
customize the look and feel of this page.
The following elements are required for the Success Page:
•
Customportal.js & Script reference
Just a basic message is needed to make a success page. None of the elements below are required to make this
happen. We are capturing the username from login page into a cookie that we are calling on this page to make it
more personalized, but it is not required.
Important: Please use the sample files in the ISE12CustomPortalPackage-v#.zip file on cisco.com. Do NOT copy and paste any of
the HTML code from this document into a file. The code below is just a partial view. Please reference the .zip file on cisco.com
for the full code.
Elements in the sample customized Success page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Example Guest Success</title>
<link rel="stylesheet" href="/guestportal/portals/example/default.css">
<script type="text/javascript" src="/guestportal/portals/example/scripts.html"></script>
</head>
<body id="page-guest-success">
<div id="page-wrapper">
<div id="bg-wrapper">
<div id="bg-image-overlay" class="fill"></div>
</div>
<div id="body-wrapper">
<div id="header-wrapper">
<div id="company-logo">
<div><img src="/guestportal/portals/example/custom_logo.png"
alt="logo"></div>
</div>
</div>
<div id="content-wrapper">
<div class="inner-wrapper">
<div id="form-wrapper">
<h2 id="page-title">Guest Success</h2>
Cisco Identity Services Engine, Release 1.2 18 Customize Web Portals <p class="optional-text">Welcome, <span
id="username">Username</span>!<br><br>You have successfully logged in, now you
may enter your original URL.</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#username').html(get_cookie("username"));
</script>
</body>
</html>
Cisco Identity Services Engine, Release 1.2 19 Customize Web Portals This is what our Success Page looks like across all platforms
Cisco Identity Services Engine, Release 1.2 20 Procedure 5
Customize Web Portals Password Change page customization – change_password.html
On the login screen, a user has the ability to change their password. After they enter their credentials, they are able
to click on the Change Password link to be redirected to change the user password.
To support this, you need to provide a password change page. In the Cisco ISE Admin Portal setup (below), you
need to make sure to check the box: Allow users to change their password.
The password policy is set at Administration > Web Portal Management > Settings > Guest > Password Policy.
There is no form validation in this document when changing the password. The server will also not return guidance
if the password format is wrong. If the user does enter the wrong format, the page will simply reappear with no
message to the user so they might be confused. You can either build in validation or simply put a message stating
the correct format.
In this example customization package, you are not able to notify the user that the password change was successfully
sent. We are working to further enhance the password change feedback mechanisms to provide the user with more
useful information for a better user experience.
You can fully customize the look and feel of the Change Password page.
The following are required elements for the Password Change page:
•
A way to enter current and future passwords to submit to Cisco ISE
•
Customportal.js & Script reference
Username
username
1000 alphanumeric, and special characters. Specified in Cisco ISE Admin.
Old
password
currentpassword
1000 alphanumeric, and special characters. Specified in Cisco ISE Admin.
New
password
newpassword
1000 alphanumeric, and special characters. Defined in Cisco ISE Admin.
Confirm
password
confirmpassword
1000 alphanumeric, and special characters. Specified in Cisco ISE Admin.
Important: Please use the sample files in the ISE12CustomPortalPackage-v#.zip file on cisco.com. Do NOT copy and paste any of
the HTML code from this document into a file. The code below is just a partial view. Please reference the .zip file on cisco.com
for the full code.
Elements in the sample customized Change Password page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Example Guest Change Password</title>
<link rel="stylesheet" href="/guestportal/portals/example/default.css">
<script type="text/javascript" src="/guestportal/portals/example/scripts.html"></script>
<script src="js/customportals.js"></script>
</head>
Cisco Identity Services Engine, Release 1.2 21 Customize Web Portals <body id="page-change-password">
<div id="page-wrapper">
<div id="bg-wrapper">
<div id="bg-image-overlay" class="fill"></div>
</div>
<div id="body-wrapper">
<div id="header-wrapper">
<div id="company-logo">
<div><img src="/guestportal/portals/example/custom_logo.png"
alt="logo"></div>
</div>
</div>
<div id="content-wrapper">
<div class="inner-wrapper">
<div id="form-wrapper">
<h2 id="page-title">Change Password</h2>
<p class="optional-text">It is required that you change your password.</p>
<form id="form" method="post"
action="/guestportal/ChangePassword.action" onsubmit="getDynamicAction(this);">
<input type="password" placeholder="Enter current password"
name="currentpassword" id="currentpassword" alt="Enter current password">
<input type="password" placeholder="Enter new password"
name="newpassword" id="newpassword" alt="Enter new password">
<input type="password" placeholder="Re-enter new password"
name="confirmpassword" id="confirmpassword" alt="Re-enter new password">
<p id="password-policy" class="optional-text global-color">Password
policy:<br/>5 Upper & Lower Case Letters (a-zA-z), and at least 1 number(s) (0-9)</p>
<button id="button-submit" class="global-btn"
type="submit">Submit</button>
<button id="button-cancel" class="local-btn">Cancel</button>
</form>
Information only. DO NOT USE.
Cisco Identity Services Engine, Release 1.2 22 Customize Web Portals The above section provides a method for the user to enter the current and future password. It is captured and sent to Cisco ISE to
make the password change. On submission, the session ID is sent to ISE customerportal.js file for reference using the
getDynamicAction in the post. The user is brought back to the Login page to enter their new credentials when accessing the
network.
This is what our Change Password Page looks like across all platforms
Procedure 6
Self-Registration page customization – self_registration.html
On the login screen, a user has the ability to self-register if they need an account. After they click on the self- service
link, they are presented with a dialog box to enter information and register for an account. After they register for the
account, the login credentials are either displayed and/or emailed to the user. The user then clicks OK to proceed to
the Login page to enter those credentials for network access.
This page has no form validation built in. If you would like the phone number to show a certain way, you can do
that when creating your own portal.
You can fully customize the look and feel of this page.
The following are required elements for the Self Service Registration page:
•
A way to enter a form to fill out what is needed to register for self service
•
Customportal.js & Script reference
Cisco Identity Services Engine, Release 1.2 23 Customize Web Portals •
Uses the following field attributes. Not all of these are required. At a minimum, the page should
require the following: first name, last name, and email address or phone number to capture unique
information about the user. The required fields are set in the Guest Details Policy
•
Note that the optional fields are not being used but are still provided as an example when you
customize your self registration page
First name
guestUser.firstName
100 alphanumeric, and special characters
Last name
guestUser.lastName
100 alphanumeric, and special characters
Email address
guestUser.emailAddress
100 alphanumeric, and special characters
Phone number
guestUser.phoneNumber
1000 alphanumeric, and special characters
Company
guestUser.company
1000 alphanumeric, and special characters
Optional data 1-5
guestUser.optionalData
1 guestUser.optionalData
2 guestUser.optionalData
3 guestUser.optionalData
4 guestUser.optionalData
4000 alphanumeric, and special characters
Important: Please use the sample files in the ISE12CustomPortalPackage-v#.zip file on cisco.com. Do NOT copy and paste any of
the HTML code from this document into a file. The code below is just a partial view. Please reference the .zip file on cisco.com
for the full code.
Elements in the sample customized Self-service page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Example Guest Self Registration</title>
<link rel="stylesheet" href="/guestportal/portals/example/default.css">
<script src="js/customportals.js"></script>
<script type="text/javascript" src="/guestportal/portals/example/scripts.html"></script>
</head>
<body id="page-self-registration">
<div id="page-wrapper">
<div id="bg-wrapper">
<div id="bg-image-overlay" class="fill"></div>
</div>
<div id="body-wrapper">
<div id="header-wrapper">
<div id="company-logo">
<div><img src="/guestportal/portals/example/custom_logo.png"
alt="logo"></div>
</div>
Cisco Identity Services Engine, Release 1.2 24 Customize Web Portals </div>
<div id="content-wrapper">
<div class="inner-wrapper">
<div id="form-wrapper">
<h2 id="page-title">Self Registration</h2>
<p class="optional-text">Please fill in the information below to create your
own account for guest access.</p>
<form id="form" method="post"
action="/guestportal/SelfServiceSubmit.action" onsubmit="getDynamicAction(this);">
<div class="inputs">
<div class="column">
<input type="text" placeholder="First Name"
name="guestUser.firstName" id="firstName" alt="First Name">
<input type="text" placeholder="Last Name"
name="guestUser.lastName" id="lastName" alt="Last Name">
<input type="text" placeholder="Email Address"
name="guestUser.emailAddress" id="emailId" alt="Email Address">
<input type="text" placeholder="Phone Number"
name="guestUser.phoneNumber" id="phoneno" alt="Phone Number">
<input type="text" placeholder="Company"
name="guestUser.company" id="company" alt="Company">
</div>
</div>
<div class="row">
<button type="submit" id="button-submit" class="globalbtn">Submit</button>
<button type="submit" id="button-cancel" class="localbtn">Cancel</button>
</div>
</form>
Information only. DO NOT USE.
The above section provides a method for the user to enter the necessary elements for registration. Its captured and sent to ISE to
create the account. On submission the session ID is sent to ISE customerportal.js file for reference using the
getDynamicAction in the post, and the user is brought to the SelfService results page where the credentials are provided to the
user.
This is what our Self Service page looks like across all platforms
Cisco Identity Services Engine, Release 1.2 25 Cisco Identity Services Engine, Release 1.2 Customize Web Portals 26 Procedure 7
Customize Web Portals Self Registration success page customization - self_registration_result.html
After the user enters their information for self service, a page is displayed showing them the results of the process.
You can fully customize the look and feel of this page.
The following are required elements for the Self Registration Success page:
•
Customportal.js & Script reference
Important: Please use the sample files in the ISE12CustomPortalPackage-v#.zip file on cisco.com. Do NOT copy and paste any of
the HTML code from this document into a file. The code below is just a partial view. Please reference the .zip file on cisco.com
for the full code.
Elements in the sample customized Self Service success page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Example Guest Self Registration Result</title>
<link rel="stylesheet" href="/guestportal/portals/example/default.css">
<script type="text/javascript" src="/guestportal/portals/example/scripts.html"></script>
<script src="js/customportals.js"></script>
</head>
<body id="page-self-registration-result">
<div id="page-wrapper">
<div id="bg-wrapper">
<div id="bg-image-overlay" class="fill"></div>
</div>
<div id="body-wrapper">
<div id="header-wrapper">
<div id="company-logo">
<div><img src="/guestportal/portals/example/custom_logo.png"
alt="logo"></div>
</div>
</div>
<div id="content-wrapper">
<div class="inner-wrapper">
<div id="form-wrapper">
<h2 id="page-title">Self Registration Result</h2>
Cisco Identity Services Engine, Release 1.2 27 Customize Web Portals <div>
<p class="optional-text">You have successfully created your account
credentials.
Please record these for future access. Next click the button below to
proceed with login.
</p>
<table>
<tbody><tr style="display: none">
<!--INSERT HEADER HERE --><!--END HEADER HERE -->
</tr>
<!--INSERT RESULTS HERE -->
<!--END RESULTS HERE -->
</tbody>
</table>
</div>
<form id="form" method="post" action="/guestportal/LoginCheck.action"
onsubmit="getDynamicAction(this);">
<input type="hidden" name="guestUser.name" id="username"
alt="Username">
<input type="hidden" name="guestUser.password" id="password"
alt="Password">
<input alt="" name="redirect" id="redirect" type="hidden" value=""/>
<input alt="" name="switch_url" id="switch_url" type="hidden" value=""/>
<input alt="" name="err_flag" id="err_flag" type="hidden" value=""/>
<input alt="" name="byodSessionId" id="byodSessionId" type="hidden"
value=""/>
<input alt="" name="byodAction" id="byodAction" type="hidden"
value=""/>
<button type="submit" id="button-submit" class="global-btn">Log
In</button>
</form>
Information only. DO NOT USE.
The above section provides the credentials and other info that was provided during registration. On submission, the session ID is
sent to ISE customerportal.js file for reference using the getDynamicAction in the post, and the user is brought back to the
Login page to enter their new credentials when accessing the network.
This is what our Self Registration Results Page looks like across all platforms
Cisco Identity Services Engine, Release 1.2 28 Cisco Identity Services Engine, Release 1.2 Customize Web Portals 29 Procedure 8
Customize Web Portals Error page – error.html
If something happens in the system or if the user does not enter something correctly, the server will generate a
dynamic error message.
You can fully customize the look and feel of this page.
The following are required elements for the Error page:
•
Customportal.js & Script reference
•
Output error from server
•
Way to log back in again
There are no required field attributes.
Important: Please use the sample files in the ISE12CustomPortalPackage-v#.zip file on cisco.com. Do NOT copy and paste any of
the HTML code from this document into a file. The code below is just a partial view. Please reference the .zip file on cisco.com
for the full code.
Elements in the sample customized Error page.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Example Guest Error</title>
<link rel="stylesheet" href="/guestportal/portals/example/default.css">
<script type="text/javascript" src="/guestportal/portals/example/scripts.html"></script>
<script src="js/customportals.js"></script>
</head>
<body id="page-error">
<div id="page-wrapper">
<div id="bg-wrapper">
<div id="bg-image-overlay" class="fill"></div>
</div>
<div id="body-wrapper">
<div id="header-wrapper">
<div id="company-logo">
<div><img src="/guestportal/portals/example/custom_logo.png"
alt="logo"></div>
</div>
</div>
Cisco Identity Services Engine, Release 1.2 30 Customize Web Portals <div id="content-wrapper">
<div class="inner-wrapper">
<div id="form-wrapper">
<h2 id="page-title">You have encountered a problem</h2>
<form id="errorForm" name="errorForm"
action="/guestportal/Login.action" method="post">
<p class="optional-text">Sorry you have ran into an error, please click
<a href="#"
onclick="getDynamicAction(errorForm);errorForm.submit();return false;">login</a>
to try again, if you keep seeing this error please contact the following:
<span>xxx-xxx-xxx-xxx</span>
</p>
</form>
<table>
<tbody>
<tr>
<!--INSERT ERROR HERE -->
<td>Error from server:</td>
<!--END ERROR HERE -->
</tr>
</tbody>
</table>
Information only. DO NOT USE.
The above section provides the system the ability to output a custom tailored error message page and then the user a link to try to
login again.
On submission the session ID is sent to ISE customerportal.js file for reference using the getDynamicAction in the post.
This is what our Error Page looks like across all platforms. The red box is the server error message (some
example messages)
•
•
invalid username or password
invalid device id (if entering mac address incorrectly)
Cisco Identity Services Engine, Release 1.2 31 Cisco Identity Services Engine, Release 1.2 Customize Web Portals 32 Procedure 9
Customize Web Portals Device Registration page – device_registration.html
After the user clicks the device registration link on the login page (or accesses it through the login flow), a page is
displayed requiring device registration. The user enters the device mac address. After the device is registered, it is
put into the RegisteredDevices endpoint ID Group. An authorization policy would be needed stating that that if a
device does MAB and is part of this group, then they get FullGuestAccess. This would allow the guest to bypass
Web Authentication redirection and login requirements.
Unlike the default Guest portal, we do not have the ability to process the following functions. This is a known
defect; however, the basic function of registering a device to use in authorization policy still work:
•
List the registered devices
•
List the amount of devices allowed to register
•
Ability to delete an endpoint
•
A success page
You can fully customize the look and feel of this page.
The following are required elements for the Device Registration page:
•
Form for entering a mac address for registration
•
Validates the mac address on input (24:77:03:D9:95:8C)
•
Customportal.js & Script reference
Uses the following field attributes:
Device ID
registeredMac
6-pair alphanumeric character set
Important: Please use the sample files in the ISE12CustomPortalPackage-v#.zip file on cisco.com. Do NOT copy and paste any of
the HTML code from this document into a file. The code below is just a partial view. Please reference the .zip file on cisco.com
for the full code.
Elements on the sample customized Device Registration page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width" />
<title>Example Device Registration</title>
<link rel="stylesheet" href="/guestportal/portals/example/default.css">
<script type="text/javascript" src="/guestportal/portals/example/scripts.html"></script>
</head>
<body id="page-device-registration">
<div id="page-wrapper">
Cisco Identity Services Engine, Release 1.2 33 Customize Web Portals <div id="bg-wrapper">
<div id="bg-image-overlay" class="fill"></div>
</div>
<div id="body-wrapper">
<div id="header-wrapper">
<div id="company-logo">
<div><img src="/guestportal/portals/example/custom_logo.png"
alt="logo"></div>
</div>
</div>
<div id="content-wrapper">
<div class="inner-wrapper">
<div id="form-wrapper">
<h2 id="page-title">Device Registration</h2>
<p class="optional-text">Please note that you can not register more than X
devices</p>
<form id="form" action="/guestportal/RegisterDevice.action"
method="post">
<input type="text" placeholder="MAC Address" name="registeredMac"
id="registeredMac" alt="MAC Address">
<button id="button-submit" class="global-btn"
type="submit">Register</button>
<button id="button-cancel" class="local-btn">Cancel</button>
</form>
Information only. DO NOT USE.
The above section provides the ability for the user to register a MAC address.
On submission, the session ID is sent to ISE customerportal.js file for reference using the getDynamicAction in the post.
After a device is registered the user should be able to access the network with that device as it should now be authorized with an
Authorization rule to allow access to the internet (as an example) based off its registration status.
Cisco Identity Services Engine, Release 1.2 34 Customize Web Portals ISE Configuration
Now that we have completed building and customizing our pages, you will need to configure a new portal to use
these custom HTML pages. In the following procedure, we tell you how to make this happen in Cisco ISE 1.2.
Procedure 1
Configure a new guest portal
Step 1 Connect to your ISE 1.2 server web admin portal: http://ise.yourdomain.com
Step 2 Navigate to Administration à Web Portal Management à Settings.
Step 3 Double-click on Guest.
Step 4 Double-click on Multi-Portal Configurations.
Step 5 Click Add to add a new portal.
Step 6 Enter example under General for the portal Name.
*Note this name is case-sensitive and links the page/image path correctly to the portal.
Step 7 Select Custom Default Portal (Upload files) as a portal type, this option is needed to completely customize
the guest portal.
Step 8 Click the Operations tab.
Step 9 Select First Login for the Acceptable Use Policy section.
Step 1 0 Select Allow guest users to change password, Guest users should be allowed to do self service, and
device registration check boxes.
Important: Do not select any other options. This may result in some of the flows not working correctly.
Cisco Identity Services Engine, Release 1.2 35 Customize Web Portals Step 1 1 Select the File Uploads tab.
Step 1 2 Select all of the HTML, CSS, and image files necessary for your portal that you created.
Step 1 3 Click Upload File.
Step 1 4 Select the File Mapping tab, map all the necessary pages for your customized portal. In this scenario, we
are using the login, password change, aup, self service and guest success pages.
Cisco Identity Services Engine, Release 1.2 36 Customize Web Portals Step 1 5 Select the Authentication tab to choose the identity source sequence necessary for your portal access.
Note: You can setup an identity source sequence to use the internal guest database, or an external identity source such as Active
Directory (for employees), or LDAP for an integrated guest database of vendors that you have externally. You can choose one
or more sources in your sequence.
http://www.cisco.com/c/en/us/td/docs/security/ise/1-2/user_guide/ise_user_guide/ise_man_id_stores.html#pgfId1346290
http://www.cisco.com/c/en/us/td/docs/security/ise/1-2/user_guide/ise_user_guide/ise_man_id_stores.html#pgfId1117203
Step 1 6 At the bottom of the page, click Save.
Important: If you do not save, all your settings will be lost!
Cisco Identity Services Engine, Release 1.2 37 Procedure 2
Customize Web Portals Set the Guest (CWA) authorization policy to use the new portal
Now that we have configured a newly customized guest portal, let us activate the custom portal for use in our
network.
Step 1 Navigate to Policy à Policy Elements à Results.
Step 2 Expand Authorization and then Authorization Profiles.
Step 3 Select the Authorization Profile (or create a new one) you have configured that will provide the redirection to
the new guest portal.
Step 4 Under common tasks – Web Redirection, choose your Redirect – Manual and then choose your portal
name Selectial for Value.
Step 5 Verify under the Attribute details section the RADIUS information sent to the NAD during redirection.
Notice the portal name in the URL. This tells the client where the portal is located on Cisco ISE.
Step 6 At the bottom of the page, click Save.
Important: If you do not save, all your settings will be lost!
Cisco Identity Services Engine, Release 1.2 38 Customize Web Portals Conclusion
Congratulations! You have now successfully completed the customization of a guest portal and the necessary
configuration to make the portal Go Live!. Now test your portal by connecting to the necessary guest network!
Cisco Identity Services Engine, Release 1.2 39 Customize Web Portals References
Cisco TrustSec System and Design Guides: http://www.cisco.com/go/ise
Cisco Identity Services Engine 1.2 User Guide:
http://www.cisco.com/en/US/products/ps11640/products_user_guide_list.html
http://www.cisco.com/en/US/docs/security/ise/1.2/user_guide/ise_webportals.html
http://www.cisco.com/c/en/us/td/docs/security/ise/1-2/user_guide/ise_user_guide/ise_guest_pol.html#pgfId1564178 Cisco Identity Services Engine, Release 1.2 40 Customize Web Portals Terminology
ISE (Identity Services Engine) − AAA RADIUS server with extended capabilities such as device profiling, guest
access management, BYOD device onboarding, and posture compliance (health checks of network clients).
NAD (Network Access Device) – Switches and wireless controllers are example of NADs.
BYOD (Bring Your Own Device) – Bringing personal devices to your place of employment and utilize for work.
CWA (Centralized Web Authentication) – A web portal used to identify users on an Open wireless network or
Wired Network protected with MAB.
MAB (Mac Authentication Bypass) – A method to bypass the requirement of authenticating a MAC address,;
required in guest networks or employee networks, since not all the device MAC addresses are initially known.
Cisco Identity Services Engine, Release 1.2 41