Meru Technical Note - To delete the old customized files from the controller and to upload the new webauth screen (Captive Portal screen)

[nsamuel]

Description

To delete the old customized files from the controller and to upload the new webauth screen (Captive Portal screen)

Scope

KB ARTICLE TYPE: Configuration

RELATED PRODUCTS: MC3000, AP208

RELATED SOFTWARE VERSIONS: 3.6-127

KEYWORDS: controller, captive portal, customized

Solution

Meru Networks provides a default login page for Captive Portal. However, you can modify this page to show your own logos and have a default login set with the credentials embedded in it. A web page customized and uploaded in the controller can be deleted and you can upload a new customized web auth screen.

COMPONENTS USED: MC3000, AP208 running with the code 3.6-127

CONFIGURATION STEPS:

GUI Steps:
The process to delete the old customized login page and to upload a new login page is as follows:

STEP 1:To delete the old customized captive portal and to start over again, click "Maintenance" >> "Captive Portal" >> "Customization" >> "Delete Files" and then "Restore Default".

STEP 2: Click the "Get Files" button to download a .tar file of the .html files that can be customized by adding the old web auth screen's HTML codes if needed. 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 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 "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).

One area of the form must remain the same and that is the login form which can be found towards the bottom of the file. The login form code is given below:

<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 guest and password gu3st to the controller or radius server for authentication where the guest userid and gu3st password are created.

d. When finished, save your file, using the original filename. 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.

STEP 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 by reloading the old file to default:

MeruController1(config)# web login-page default

MeruController1(config)# web login-page custom

Notice: Using GUI, be sure to Import files!

When the client connects to the Captive portal enabled SSID and when typed in a URL in the address bar, it was redirected to the new customized captive portal web authentication page, sent by the controller.