手把手教你做SSL VPN登录界面

一、前言

最近经常看到论坛的小伙伴在纠结VPN登录界面，觉得现有的不好看、不知道怎么改等等。今天我来教大家如何自己来定制SSL VPN的登录界面。

模板下载请戳这里：

http://bbs.sangfor.com.cn/forum.php?mod=viewthread&tid=15539

http://bbs.sangfor.com.cn/forum.php?mod=viewthread&tid=24721

二、准备工作

工具：dreamweaver+SSL VPN内置模板+SSL VPN设备+一台电脑

最好您熟悉html语言，这个是一门非常简单的语言，可以网上找个教程看看，一个小时就可以速成。

三、步骤

1、首页需要设计一个登录页面，如果觉得麻烦就直接去网上去搜一个登录模板，然后在原来基础上进行相应的修改。比如说这样的。

2、改文件后缀名，将我们下载的内置模板解压出来，将里面的login_psw.tml后缀名修改为login_psw.html，变成一个dreamweaver可以编辑的网页文件。

3、代码搬运，将下面的代码放入到我们的自己的登录模板中，放在页面的title标签下面，这里是一些页面的js脚本文件，具体的用途没有深入研究过，建议放上去。

1. <script src="../com/common.js"></script>
   
2. <script src="../com/component.js"></script>
   
3. <script src="../com/Login.js"></script>
   
4. <script type="text/javascript" src="../com/MSIE.PNG.js"></script>
   
5. <script type="text/javascript">
   
6. var client = {
   
7.         EnableKeypad:                '<%USE_SOFT_KB%>',
   
8.         showSetup:                        '<%COMP_LINK_INFO%>',
   
9.         showSvpntool:                '<%SHOW_TOOL_LINK%>',
   
10.         showHelpCenter:                '<%SHOW_HELP_LINK%>',
    
11.         EnableDKeyVer:                '<%DKEY_VER_ENABLE%>',
    
12.         EnableRandCode:                '<%USE_RAND_CODE%>',
    
13.         EnableAnonymous:        '<%ALLOW_ANONYMOUS_ACCESS%>',
    
14.         denyNormalAccess:        '<%DENY_NORMAL_ACCESS%>',
    
15.         EnableMidAtkCheck:        '<%MID_ATK_CHECK%>',
    
16.         EncryptKey:                        '<%RSA_ENCRYPT_KEY%>',
    
17.         EncryptExp:                        '<%RSA_ENCRYPT_EXP%>',
    
18.         N_INPUTNAME:                '<%N_INPUTNAME%>',
    
19.         N_INPUTPASS:                '<%N_INPUTPASS%>',
    
20.         N_HIDEBUTTONS:                '<%HideButton%>',
    
21.         N_BUTTONNAME:                'logButton',
    
22.         N_ANONYBUTTONNAME:        'anonyButton',
    
23.         N_INPUTRAND:                'p_rand_code',
    
24.         N_LOGFORM:                        'formLogin',
    
25.         N_COMPLAYER:                'ComLayer',
    
26.         N_DKEYTIPS:                        'DkeyTips',
    
27.         N_SIGNINBYCERT:                'log0',
    
28.         N_SIGNINBYDKEY:                'log1',
    
29.         N_RANDCODEIMG:                'randcodeImg',
    
30.         content:{
    
31.                 "NORMAL_LOGIN": tr("登 录"),
    
32.                 "ANONYMOUS_LOGIN": tr("匿名登录"),
    
33.                 "ANONYMOUS_USER": "Anonymous",
    
34.                 "NEED_USERNAME": tr("请输入用户名,否则无法登录"),
    
35.                 "INVALID_USER": tr("不合法的用户名,用户名不能超过72个字节"),
    
36.                 "NEED_RANDCODE": tr("校验码不能为空!"),
    
37.                 "LOGING": tr("正在检测登录信息...")
    
38.         }
    
39. };
    
40. 
    
41. var errorMsg = '<%ERROR_INFO%>';
    
42. 
    
43. window.onload = function(){
    
44.         if(isMordernIE()){
    
45.                 window.location.href = "/com/mode_warn.html"
    
46.         }
    
47. }
    
48. </script>

复制代码

4、修改表单属性值，将我们自己弄的登录页面中表单的属性参数修改为如下标红的内容，这个是关键步骤，必须要正确设置，否则会导致用户名密码提交不了；

a.将from标签的action属性修改为<%U_PSWACTION%>；

1. <form action="<%U_PSWACTION%>" name="loginform" accept-charset="utf-8" id="login_form"  method="post" onSubmit="return formSubmit();">

复制代码

b.将用户名的input标签的属性id和name值修改为<%N_INPUTNAME%>；

1. <input type="text" id="<%N_INPUTNAME%>" name="<%N_INPUTNAME%>" />

复制代码

c.将密码框的input标签的属性id和name值修改为<%N_INPUTPASS%>；

1. <input type="password"  id="<%N_INPUTPASS%>" name="<%N_INPUTPASS%>" class="inputstyle" />

复制代码

5、添加页面其他链接，下面是我们SSL页面一些常用的链接，在自己的页面中找合适的位置插入即可；

1. <a href="javascript:HelpCenter()" _html="帮助中心">帮助中心</a>
   
2. <a href="javascript:HelpCenter()" _html="用户手册">用户手册</a>
   
3. <a href="javascript:onInstall(INST_COMP)" _html="手动安装组件">手动安装组件</a>

复制代码

1. <a href="javascript:CertLogin();" _html="证书登录">证书登录</a>
   
2. <a href="javascript: if(!checkReLoginEx()){HandleDkey()};" _html="USB-Key登录">USB-Key登录</a>
   
3. <a href="javascript:onInstall(client.EnableDKeyVer)" _html="下载USB-Key驱动">下载USB-Key驱动</a>

复制代码

6、打包，将自己修改好的页面文件login_psw.tml文件替换内置模板的login_psw.tml文件然后进行打包压缩为ZIP格式，目录结构必须按照下图设置，切勿修改；

7、上传新模板并选择模板应用模板，这个过程需要重启SSL VPN服务，操作要谨慎哦；

四、效果展示

关于资源页面感觉没什么看改的，本教程也仅限修改登录页面。如有更多问题可以联系楼主QQ393620170

好文章，必须收藏一下

非常有用，先收藏了~

非常实用的分享，使用SSL设备的，都要GET起来，说不定哪天就用到了，哈哈~~~

这个效果图太爱了，猫头鹰好萌，还会遮眼哦！

大赞，已get

界面真的 好萌

这个帖子很好，学到了。

这都行 哈哈     看来有空可以研究下自定义的可行性。

这个不错，可以试试

给100个赞