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

北回归线 20805

本帖最后由 北回归线 于 2017-8-18 09:02 编辑

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

模板下载请戳这里:




二、准备工作
工具:dreamweaver+SSL VPN内置模板+SSL VPN设备+一台电脑
最好您熟悉html语言,这个是一门非常简单的语言,可以网上找个教程看看,一个小时就可以速成。

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

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

2.png

3.png
4.png

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

7.png

  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. var errorMsg = '<%ERROR_INFO%>';

  41. window.onload = function(){
  42.         if(isMordernIE()){
  43.                 window.location.href = "/com/mode_warn.html"
  44.         }
  45. }
  46. </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格式,目录结构必须按照下图设置,切勿修改;

9.png

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

10.png


11.png

四、效果展示

12.png

13.png

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

喜欢这篇文章吗?喜欢就给楼主打赏吧!

打赏
2人已打赏

黄官礼 发表于 2016-7-15 08:48
  
好文章,必须收藏一下
carl 发表于 2016-7-15 08:55
  
非常有用,先收藏了~
Sangfor_闪电回_朱丽 发表于 2016-7-15 09:06
  
非常实用的分享,使用SSL设备的,都要GET起来,说不定哪天就用到了,哈哈~~~

这个效果图太爱了,猫头鹰好萌,还会遮眼哦!
PC9527 发表于 2016-7-15 09:12
  
大赞,已get
Sangfor_闪电回_小云 发表于 2016-7-15 17:04
  
界面真的 好萌
神样队员 发表于 2016-7-19 14:21
  
这个帖子很好,学到了。
呼呼晕 发表于 2016-7-20 00:36
  
这都行 哈哈     看来有空可以研究下自定义的可行性。
小西瓜 发表于 2016-7-20 06:50
  
这个不错,可以试试
lavoe520 发表于 2016-7-20 10:27
  
给100个赞