vWLAN Single Click Customized Login Page

[#1]

1. Introduction
2. Create an Internal User
3. Upload Image Files
4. Create the Login Form
   1. Enter the Custom HTML
      
   2. Optional Checkbox Validation
      
5. Additional Configuration Requirements
6. Testing the 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 where a user simply clicks a button to login. The user does not have to input any login credentials. Optionally, the user can be forced to accept terms of service before continuing.

Create an Internal User

Even though the end user will not input any information at the splash screen, a login action still occurs as far as vWLAN is concerned. The custom code below will contain a username and password that is input automatically when the end user clicks a button. This means an internal user must be created to facilitate this application. 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, browse to Configuration > Internal Authentication > Users and click Create Internal User. In this example the username should be guest and the password is also guest. Assign this to a pre-configured role for guest users.

Upload Image File

You can add your own text, images, or multimedia files to the HTML displayed on the login menu. These files are uploaded under Configuration > Captive Portal > Items. You will need to note the path for the web login page as indicated in Figure 2.

Create the Login Form

You will need to configure the basic login form settings: name, authentication methods, and the login attempts. To specify the login form settings, follow the steps outlined below.

1. Browse to Configuration > Captive Portal > Forms and click Create Login Form. Give the login form a unique name and Allow user logins as the Authentication method. Even though this login form may be used for guests, the actual username and password supplied to vWLAN will be an Internal User. Make sure to check Allow User Logins and not Allow Guest Logins as shown in the screenshot below.
   
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 Page and do not show a Bluesocket logo or left side form”
   

After configuring the these basic settings, you can configure the visual elements of the login form.

Enter the Custom HTML

Specify the customized HTML that will appear on the right of the login menu in the appropriate field.

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

<style><!--

#bsform {

display:none;

}

#bstr {

display:none;

}

</style>

<p align=center>

<img src="/local/1/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">

<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>

<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>

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

Any items in red should be modified.  It is important to note the following lines.

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

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 internal user. The img src path and filename can be found above in the “Upload Image File” Section.

When the HTML has been modified, click the “Create Login Form” button.

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

There may be a desire to use a checkbox to validate that I user accepts 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. First, replace the form method line in the example above.

<form method="POST" action="/login.pl" enctype="application/x-www-form-urlencoded" name="custom_login" class="nospace" onSubmit="return validate_form();"

Next, insert the checkbox into the form between <form> and </form>.

<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"/>

Finally, add the following script to the bottom of the existing code

<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>

Additional Configuration Requirements

Captive Portal Authentication, in general, requires a few addition considerations. The SSID must use the Un-registered role in order to redirect client traffic. Be sure create or edit an existing SSID under Configuration > Wireless > SSIDs, and select the Un-registered role. While editing the SSID, you can also select the Login Form. If this is the only SSID will use this form, then select the form created above. You can also choose to "Default from AP Template" which will automatically select the form assigned in the AP Template assigned to the AP to which you will connect.

Testing the 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, check out the guide on how to Install and Renew SSL Cert vWLAN Version 2.2.1 and Later).  Shown below is the screen created in this example.