Wireless Controller
Dedicated Wi-Fi control and management for high density and mobility
gkaur
Staff
Staff
Article Id 195691
Description

Customizing the Splash Screen (Captive Portal screen)


Scope

KB Article Type: Configuration

RELATED PRODUCTS: ALL CONTROLLERS AND AP TYPES.

RELATED SOFTWARE VERSIONS: THIS IS VALID FOR ALL SD TYPES.

KEYWORDS: controller, configuration, SSID, Captive-Portal


Solution
CONFIGURATION STEPS:

To customize the Meru default login page:
The process to customize the Captive Portal login pages is as follows :

1. Click "Maintenance" >> "Captive Portal" >> "Customization".
This customization screen allows you to get the splash screen files, change the mode, delete files, or restore the splash screen to default.

2. Click the "Get Files" button to download a .tar file of the .html files that can be customized. At the download box, save the files to a convenient location on your system. Within the .ZIP file are four files. The 4 file names must remain the same so the system recognizes the files. The main login web page, "loginformWebAuth" is the file where most changes are made.

a. Locate and edit the "file loginformWebAuth" with a program such as WordPad. Possible edits include changing logos, text, and formatting. One area of the form must remain the same and that is the login form towards the bottom of the file.

b. You can hide the login buttons and send both the userid and password to the controller or radius server for authentication. An end-user does not know that they have been logged in with the system userid.

c. View the source text of the .html files and edit the HTML code to reflect the customization required for your site.

To the replace the first Meru logo graphic, look for the line that reads:·

src="Images.vpn/img_merulogo.gif"width=133 border=0></A></TD>

Change the text "Images.vpn/img_merulogo.gif" to "/opt/meru/etc/ws/Images.vpn.custom/your_image.gif" (note you are specifying a new directory for the .gif file, which is Images.vpn.custom).

To replace the second graphic (the mountain), look for the line that reads:·

src="Images.vpn/img_aboutmeru.jpg" width=326 border=0></TD></TR>

Change the text "Images.vpn/img_aboutmeru.jpg" to "Images.vpn.custom/your_image2.gif" (notice you are specifying a new directory for the .gif file, which is Images.vpn.custom).


<form name='login' action="/vpn/loginUser" method='post' class='nomargin'>

<TABLE cellSpacing=0 cellPadding=3 width=500 border=0>

<TR>

<TD vAlign=top colSpan=3 height=5>

</TD>

</TR>

<TR>

<TD class="largetext" valign=middle width = 70>

<b>User ID</b>

</TD>

<TD vAlign=top colSpan=2><INPUT name=userid size="20" maxLength="50"></TD>

</TR>

<TR>

<TD class="largetext" valign=middle width =70>

<b>Password</b>

</TD>

<TD vAlign=top width=125><INPUT type=password

onfocus="document.forms.login.elements['password'].value='';"

name=password size="20" maxLength="50"></TD>

<TD valign=middle width=200>

</TD>

</TR>

<TR>

<TD vAlign=top height=55>

</TD>

<TD valign=middle colSpan=3 height=55>

<input type= submit value = " Login " >

</TD>

</TR>

<TR>

<TD class="copytext" valign=middle colSpan=10>

<i>Copyright &copy; 2004, Meru Networks, Inc. All rights

reserved</i>.

</TD>

</TR>

</TABLE>

<input name="url" type="hidden" value="^url^">

</form>

  • This table must exist, but there is an option to hide it and have a default user log in, this can do accomplished by replacing the login form with this piece of code

<form name='login' action="/vpn/loginUser" method='post'

class='nomargin'>

<INPUT type=hidden name=userid value="guest">

<INPUT type=hidden name=password value="gu3st">

<center><INPUT type=submit value=" Accept "></center>

<INPUT name="url" type="hidden" value="^url^">

</form>

The code listed above hides the login buttons and sends both the userid set as guests and password gu3st to the controller or radius server for authentication where the guest usrid and gu3st password are created.

d. When finished, save your file, using the original file name. Make sure the graphics files are located in the same directory where the changed HTML files are located.

e. Test your changes by viewing the .html files in a browser to make sure they are displaying correctly. Make changes as needed.

3. Upload the modified files to the controller. First, set the mode of the Captive Portal to custom by following these steps:

a. On the Captive Portal Customization page in the Step 2-Mode Selection area,

click the "Customized" radio button.

b. Click the "Change Mode" button to change to the Customized mode. This informs

System Director that customized files are to be used.

c. Import the files by clicking "Import File" in the left pane.

d. Locate each file that needs to be uploaded, and then click "Import File".

CLI Steps:

To customize the Captive portal:

Meru Controller1 (config)# web login-page default
MeruController1(config)# web login-page custom
Notice: Using GUI be sure to Import files!

TEST RESULTS:

When a client was connected to the SSID where Webauth is enabled and when a URL is typed in the address bar - it redirected to the customized web auth screen and by clicking the accept/disclaim button the authentication was successful with the user id and the password embedded in the auth screen and was directed to the page requested.


Contributors