Guest Access Captive Portal without Authentication
Resolution
Attached to this post is an example of a Captive Portal Comfort Page, modified for use in a "Guest Access" environment. The objective here is to force users to click a button, confirming they acknowledge the terms of use, before being allowed access to the network/Internet. You will need to create one "guest" user (not covered in this article) for use in this portal.
The attached page is identical to the "built-in" Captive Portal Comfort Page. I have just added the javascript necessary to make the Captive Portal work without authentication by the user. You will just need to add the HTML/Text you would like to display to your "Guest" users.
To use your new Captive Portal Comfort Page, do the following:
1.) Go to the Device tab, and click on "Response Pages" on the left.
2.) Click on "Captive Portal Comfort Page".
3.) Click on the "Import" button, select the file you just edited, select the location (shared or a VSYS), and click ok.
4.) Commit the configuration.
Content of the attached file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<meta name="viewport" content="initial-scale=1.0">
<title>User Identification Portal</title>
<style>
html, body{
height: 99%;
}
body {
color: #111;
font-family: Verdana,Arial,Helvetica,sans-serif;
background-color:#d2d6dA;
vertical-align: middle;
}
#activearea {
border-width: 2px;
border-color: #c2c6cA;
border-style: solid;
border-radius: 15px;
background-color: #ffffff;
padding: 20px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
#heading {
font-size: 1.1em;
font-weight: bold;
max-width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#desc {
font-size: 1em;
margin: 15px;
max-width: 400px;
text-align: left;
margin-left: auto;
margin-right: auto;
}
form td span {
font-size: 1em;
font-weight: bold;
}
#formtable {
height: 100%;
width: 100%;
}
#taLogin {
width: 250px;
margin-left: auto;
margin-right: auto;
}
.buttonFixed {
font-size: 1em;
}
.msg {
background-color: #ffff99;
border-width: 2px;
border-color: #ff0000;
border-style: solid;
border-radius: 5px;
margin-top: 0.5em;
padding: 0.5em;
max-height: 150px;
height: expression( this.scrollHeight > 150 ? "150px" : "auto" ); /* sets max-height for IE */
overflow: auto;
font-size: 1em;
}
</style>
</head>
<!-- Changed LoadPage function to myLoadPage function for onload -->
<body onload="myLoadPage();">
<table id="formtable">
<tr><td>
<div id="activearea">
<div id="heading">User Identification Portal</div>
<div id="desc">The resource you are trying to access requires proper user identification prior to access. Please enter your credentials.</div>
<div id="formdiv">
<!-- This function hides the "pan_form", provides a new submit button and populates the username, password, escapeUser, and submit values used by the backend to process the form -->
<script>
function myLoadPage() {
//get the login form object
var my_form = document.getElementById("login_form");
//get the username form object
var my_user = document.getElementsByName("user")[0];
//populate the username form object with the configured "guest" user
my_user.setAttribute("value", "guestuser");
//get the password form object
var my_pass = document.getElementsByName("passwd")[0];
//populate the password object with the configured "guest" password
my_pass.setAttribute("value", "guestpass");
//get the escapeUser form object
var escape_user = document.getElementsByName("escapeUser")[0];
//populate the escapeUser object with the configured "guest" user
escape_user.setAttribute("value", "guestuser");
//remove the existing submit button from the DOM
document.getElementById("submit").remove();
//add a new custom button to the DOM with our own text on it
my_form.insertAdjacentHTML('beforeend', '<button class="buttonFixed" type="submit" id="submit" name="ok" onclick="submitClicked()" value="Login">Accept and Continue</button>');
//get the entire "original" login form object
var hide_form = document.getElementById("taLogin");
//hide the "original" login form object
//we need it to POST but not be visible
hide_form.style.visibility = "hidden";
hide_form.style.position = "absolute";
}
</script>
<pan_form/>
</div>
</div>
</td></tr>
</table>
</body>
</html>