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

北回归线 23423

{{ttag.title}}
本帖最后由 北回归线 于 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

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

打赏
3人已打赏

黄官礼 发表于 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个赞
×
有话想说?点这里!
可评论、可发帖
发表新帖
热门标签
全部标签>
GIF配置指导
信服课堂视频
每日一问
产品连连看
技术笔记
技术咨询
答题自测
技术圆桌
原创分享
专家分享
畅聊IT
每日一记
SANGFOR资讯
在线直播
技术顾问
专家问答
安装部署配置
新版本体验
项目案例
问题分析处理
网络基础知识
日志审计
sangfor周刊
MVP
用户认证
解决方案
升级
安全攻防
功能体验
上网策略
测试报告
流量管理
运维工具
云计算知识
VPN 对接

本版版主

24
42
78

发帖

粉丝

关注

本版达人

新手24268...

本周建议达人

阿凯

本周分享达人

新手39341...

本周提问达人