Configuration Guide for H3C SSL VPN Login Page Customization

Transcription

1 Configuration Guide for H3C SSL VPN Login Page Customization 1 Overview This function allows you to customize the login page for common users as needed. For example, you can customize the login parameters to be displayed on the login page, such as the username, password, and authentication method. This document describes the complete operation procedure for you to customize the SSL VPN login page, and the rules that you must follow to customize the login page. 2 Login Page Customization Procedure Follow these steps to customize the SSL VPN login page for common users: 1) Define a custom page, which usually includes one or more htm files, js files, css files, and/or picture files. 2) Telnet to the device, create a directory under directory flash:/domainn or cf0:/domainn (N is the number of a domain), and upload the files of the custom page to the created directory through TFTP or FTP. For example, if you are the administrator of domain 1 and want to save the files into the flash of the SecBlade SSL VPN card, you can create a directory named www/login under flash:/domain1, namely the directory flash:/domain1/www/login. The SecBlade SSL VPN card supports multiple domains, and supports the flash storage medium and the CF storage medium. The following figure shows the files for a sample custom page. The file user.htm is the login page for users.

2 3) Log in to the SSL VPN as an administrator, select Device > Device Management from the navigation tree, and then select the UI Customizing tab and click Full customization. Select the Common User Login Page option, and then specify the custom page directory and the login page file, as shown in the following figures. Figure 2-1 SecBlade SSL VPN Figure 2-2 SecPath SSL VPN 4) Save the domain configuration file, and then restart the domain or the SVPN service to validate the login page customization. 3 Page Customization Rules The customized login page must be an htm file, which can reference javascript, css, and picture files. There are no restrictions on the page s appearance, but the following code requirements must be satisfied for proper cooperation with the gateway: 1) If a javascript or CSS file is referenced in the login page, the javascript or CSS file must be under the corresponding directory in red: <script language="javascript" src="/svpn/domain1/www/login/demo.js" type="text/javascript"></script> <link href="/svpn/domain1/www/login/demo.css" rel="stylesheet" type="text/css" /> 2) If a picture file is referenced in the login page or the page background file is a picture file, the files must be under the corresponding directory in red: <IMG src="/svpn/domain1/www/login/demo.jpg" border=0> <TD align=right width="870" height=55 background="/svpn/domain1/www/login/bg.jpg"></td> 3) The login parameters to be submitted by a user mainly include the username, password, authentication method, and login domain. The username and password fields have a length limit and can only accept certain characters. The authentication method and login domain fields must be consistent with the system configuration. The following gives an example for configuration of these login parameters.

3 <td><input name="txtusrname" type="text" title = "1 to 55 characters (0-9, a-z, spaces, dots, hyphens, underscores)" maxlength="55" id="id_txtusrname" ></td> <td><input name="txtpassword" type="password" title = "1-63 visible characters." maxlength="63" id="id_password" ></td> <td> <select id="selauth_id" name="authmethod" ><option value=1 selected>local</option></select></td> <td> <select id="selauth_id" name="seldomain"><option value=1 selected> domain1</option></select></td> Parameter Name Valid characters and values Length Device Username txtusrname Digits (0-9), letters (a-z), spaces, dots (.), hyphens (-), and underscores (_) 1-55 SecBlade SSL VPN, SecPath SSL VPN Password txtpassword Visible characters 1-63 SecBlade SSL VPN, SecPath SSL VPN The value of this field can be 1, 2, 4, 8, or 9, representing local, RADIUS, Authenticatio n method authmethod LDAP, AD, and Combined. In this example, the default value is 1, which means the default authentication 1 SecBlade SSL VPN, SecPath SSL VPN method is local. You can change the default value as needed. The value is the domain number. In this example, the login domain Login domain seldomain number is 1, and the domain name is 3 SecBlade SSL VPN domain1. You can modify the login domain configuration as needed. 4) The CGI directory that the client submits must be "/svpn/vpnuser/login_submit.cgi". 5) Provide a link for users to download the ActiveX control, in this format: <a href="/svpn/support/firefox_activex.htm">activex Control</a> Note: The contents in red (after /svpn) must be consistent with the custom page storage directory configured in Login Page Customization Procedure. If all users in a domain use the same authentication method, you can set the authentication method field invisible to users. The administrator of a domain customizes the login page for the domain independently. The login domain field can also be set invisible to users. See the following source codes for references. 4 Sample Source Codes for a Custom Page <HTML> <HEAD> <TITLE>H3C SSL VPN Login Page</TITLE> <meta http-equiv="content-type" content="text/html; charset=gb2312" />

4 <style type="text/css"> DIV.bar { background: d6000f; OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 5px; TEXT-OVERFLOW: ellipsis; body { font-size:11px; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif;.welcomefont{ font-weight: bold; font-size: 32px; font-family: Arial;.boldSize12Font{ font-weight: bold; font-size: 12px; font-family: Arial;.tabHeadWhite { font-weight: bold; font-size: 12px; font-family: Arial; color: #FFFFFF;.smallNormalFont { font-size: 12px; font-family: Verdana, Arial, Tahoma;.button { BORDER:1px ridge; WIDTH: 88px; HEIGHT: 22px; FONT: 9pt Arial; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: #F2F2ED; </style> <script language="javascript" type="text/javascript"> function onapply() { var obj = document.getelementbyid("id_frmlogin"); obj.action="/svpn/vpnuser/login_submit.cgi"; obj.submit(); return;

5 </script> </HEAD> <BODY> <DIV> <TABLE> <td width="25%"><img id="id_logo" src="/svpn/domain1/www/login/uclogo.jpg" alt="logo"></td> <td width="50%" class="welcomefont" align="center">welcome to the SSL VPN Login Page</td> <td width="25%"></td> </TABLE> </DIV> <DIV class="bar"></div> <table width="100%" height="85%" id="id_maintable" background="/svpn/domain1/www/login/bg.jpg"> <tr height="10%"><td></td> <tr height="60%"> <td width="20%"></td> <td width="60%" align="center"> <table> <td> <table width="280" bgcolor="#d6000f"></td> <td height="20" bgcolor="d6000f"> <span class="tabheadwhite">login</span></td> <td bgcolor="#f4f4f4"> <form name="loginform" method="post" id="id_frmlogin"> <table width="100%" border="0" cellspacing="5" cellpadding="0"> <td width="10%" rowspan="5"> </td> <td width="25%" class="boldsize12font" id="id_lbusername">username</td> <td><input name="txtusrname" type="text" title = "1 to 55 characters (0-9, a-z, spaces, dots, hyphens, underscores)" maxlength="55" id="id_txtusrname" class="smallnormalfont" style="width: 96%"></td> <td width="10%" rowspan="5"> </td> <td width="25%" class="boldsize12font" id="id_lbpwd">password</td> <td><input name="txtpassword" type="password" title = "1-63 visible characters" maxlength="63" id="id_password" class="smallnormalfont" style="width: 96%"></td> <tr style="display:none"> <td width="25%" class="boldsize12font" id=" trauth_id">authentication Method</td> <td> <select id="selauth_id" name="authmethod" class="smallnormalfont" style="width: 100%" ><option value=1 selected>local</option></select> </td>

6 <tr style="display:none" > <td width="25%" class="boldsize12font" id=" trdomain_id">domain </td> <td> <select id="selauth_id" name="seldomain" class="smallnormalfont" style="width: 100%" ><option value=1 selected> domain1</option></select></td> <td> </td> <td><input name="submit" type="button" class="button" id="submit" value="login" style="cursor:hand" onmouseover="this.style.color='#660066'" onmouseout="this.style.color='#000000'" onclick="return onapply();"></td></form></td> </td> <tr height="10"><td></td> <td> <table width="280" bgcolor="#d6000f"></td> <td height="20" bgcolor="d6000f"> <span class="tabheadwhite">download and Install</span></td> <td bgcolor="#f4f4f4"> <table width="100%" border="0" cellspacing="5" cellpadding="0"> <td width="10%" rowspan="3"> </td> <td class="smallnormalfont">if this is your first login, please click the following link to install the ActiveX control: </td> <td><li><a Control</a></li></td> </form> </td> </td> </td> <td width="20%"></td> <tr height="30%"><td></td> </BODY> </HTML> The login page will be displayed as follows: href="/svpn/support/firefox_activex.htm">activex

7