vWLAN 2.1 Single Click Customized Login Page

[#1]

vWLAN 2.1

Single Click Customized Login Page

Introduction

The Bluesocket vWLAN server comes with a default login screen, however there may be a desire to personalize or completely revamp this screen. This guide aims to provide the basic steps for customizing (or creating) a login single click sign on screen.

Throughout the guide references such as “Provision > Wireless > SSID” will be used. This refers to the various sections accessible through the banner at the top of the vWLAN Administrative User Interface (UI) as shown below.

Create a Local User

This user will be used for the single sign on page login.  When a user “clicks” the “I Accept the Terms & Conditions button, they will essentially be logging in with this local user.  This example illustrates creating a user with the name “guest” and password “guest”.  To create the internal user, follow these steps:

1.  From the Create Local User Menu (Provision > Auth > Local Users > Create > Local User) create a user with the Name: guest with a password of: guest and assign them to a pre-configured role for guest users. 

2.  Another very important setting is the number of active sessions the local user is allowed. A value of ‘0’ will allow unlimited sessions, however this setting can be modified if a total number of guest users is desired.

Upload Image File(s)

You can add your own text, images, or multimedia files to the HTML displayed on the login menu by uploading files as described in the File Uploads (Provision > Logins > File Uploads).  These files will be used later in the Custom HTML portion of the guide.

Creating the Login Screen

Once the local user is configured and all necessary image files have been uploaded, one can proceed to create the Login Form. To specify the login settings, follow these steps:

1.  From the Create Login Screen (Provision > Logins > Login Screens > Create > Login Screen ) menu, specify the Name for the Login Screen and be sure to, select Allow user logins option.

2.  Next, specify the maximum number of login attempts allowed for users on this login form by entering the number in the appropriate field. Entering 0 indicates there is no maximum number.  You will also be required to specify the delay (in minutes) before a user can attempt to login again after the maximum number of failed login attempts has been reached. Enter the value in the appropriate field.

3.  Select “Enable Complete Customization of Login Screen”

After configuring the login attempt settings, you can configure the visual elements of the login form by select Next at the bottom of the screen.

Entering the HTML Text

Specify the customized HTML that will appear on the right of the login menu in the appropriate field.  Please notice that the previously uploaded image files' stored path is listed on the right hand side of the page.

Enter the custom HTML above into the “Right side customization HTML” box (above).

<style><!--

#bsform {

display:none;

}

#bstr {

display:none;

}

</style>

<BR>

<p align=center>

<img src="/local/adtran.jpg">

<BR>

<strong>Welcome to the ADTRAN wireless network at the ADTRAN World Headquarters.

</strong><BR><BR>

</p>

<div style="display:none;"><!--USERS--></div>

<form method="POST" action="/login.pl" enctype="application/x-www-form-urlencoded" name="custom_login" class="nospace" onSubmit="return validate_form();"> <input type="hidden" name="_FORM_SUBMIT" value="1" />

<input type="hidden" name="which_form" value="reg" /> <input type="hidden" name="bs_name" value="guest" /> <input type="hidden" name="bs_password" value="guest" />

<script> document.writeln('<input type="hidden" name="destination" value="'+document.bluesocket_u.destination.value+'" />'); document.writeln('<input type="hidden" name="source" value="'+document.bluesocket_u.source.value+'" />');

</script>

<center>

<p align=center>

<b>Internet Acceptable Use Agreement</b>

</p>

<p align=left>

ADTRAN is pleased to offer our guests free wireless Internet service. Our goal is to provide you with an enriched, high quality Internet experience. The Acceptable Use Agreement (AUP) details acceptable use and rules of "online" behavior and access privileges for Internet users of the ADTRAN wireless network. The Acceptable Use Policy has been designed to protect our Services and the Internet community, from inappropriate, illegal, or otherwise objectionable activities. ADTRAN may revise the Acceptable Use Policy (AUP) from time to time without notice by posting a new version of this document on the ADTRAN Web site at http://adtran.com (or any successor URL(s)). By clicking the button below, you agree to abide by, and require others using this Service via your device to abide by the terms of the AUP. IF YOU DO NOT AGREE TO BE BOUND BY THESE TERMS, YOU SHOULD IMMEDIATELY STOP THE USE OF THIS SERVICE.

</p>

<p></p>

<input type="SUBMIT" border="0" value="I Acknowledge Terms & Conditions" class="btn"/> </form>

The sample HTML code is provided (above); items in red will need to be modified.  It is important to note the following lines.

1. <input type="hidden" name="which_form" value="reg" /> <input type="hidden" name="bs_name" value="guest" /> <input type="hidden" name="bs_password" value="guest" />
2. <img src="/local/adtran.jpg">

The bs_name and bs_password are passed to (https://<vWLAN IP ADDRESS>/login.pl) thus allowing the client to authenticate transparently. The bs_name and bs_password values are associated with the previously configured local user. The img src path and filename can be found above in the “Entering the HTML Text” Section.

*When the HTML has been modified, click the “Save” button.     

Optional Checkbox Validation to Require Accepting Terms of Service (ToS)

There may be a desire to use a checkbox validation for agreement of the ToS. This requires minor changes to the HTML above. Notably it requires that a checkbox be added as well as a means to validate the checkbox. This example uses a small javascript to accomplish the task. Insert the following code before the last line in the HTML above, directly above the Acknowledge button.

<input type=checkbox id="require_terms_g" name="require_terms_g" title="I accept authorized use agreement"/>

<input type="SUBMIT" border="0" value="Continue" class="btn"/>

<script type="text/javascript">  function validate_form ( ) {

      if ( document.getElementById('require_terms_g').checked ) {

        valid = true;

      } else {

        alert ( "Please check box if you accept terms of service" );

        valid = false;

      }

      return valid;

  }

</script>

Assign the Login Page to an SSID

The SSID that will be used must be configured to ensure users are redirected properly; either create a new SSID or edit an existing one by navigating to (Provision > Wireless > SSID). The "Default Role" must be set to “Un-registered” and the “Custom User Login” must be set to the previously configured Login Screen.  Once the SSID has been created or edited, you will be required to Apply the changes to the APs.

Testing Page

To test the configuration, simply connect a client to the SSID, open a web browser, and try to access any web page. The client should be redirected to the terms of service page. If a certificate warning is present, either continue or add an exception, and from that time forward the client will only be prompted with the acknowledgment/disclaimer screen (for more information on eliminating certificate errors, please visit the ADTRAN Support Community)  Shown below is the screen created in this example.