糖果星球 发表于 2022-12-25 20:43
  
感谢分享,很实用:爱你:
糖果星球 发表于 2022-12-25 20:45
  
有助于工作和学习!!!
我是路人甲55 发表于 2023-2-21 09:07
  
感谢楼主分享,每日学习打卡
蟲爺 发表于 2023-2-21 19:29
  
感谢分享
魏溢森 发表于 2023-3-14 10:39
  
果然是高手在民间,楼主帖子写的不错,很有参考价值,还想看更多精彩分享,期待楼主下一篇好帖!
她丶ta 发表于 2023-3-21 09:35
  
感谢分享,有助学习!!!
wshellym 发表于 2023-4-2 19:39
  
感谢分享,有助于工作和学习!
LHzz 发表于 2023-4-8 09:17
  
果然是高手在民间,楼主帖子写的不错,很有参考价值,还想看更多精彩分享,期待楼主下一篇好帖!
手把手教你做SSL VPN登录界面
  

北回归线 437184人觉得有帮助

{{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

打赏鼓励作者,期待更多好文!

打赏
25人已打赏

发表新帖
热门标签
全部标签>
每日一问
技术盲盒
技术笔记
每周精选
干货满满
技术咨询
信服课堂视频
秒懂零信任
自助服务平台操作指引
新版本体验
标准化排查
产品连连看
安装部署配置
功能体验
GIF动图学习
玩转零信任
2023技术争霸赛专题
技术晨报
安全攻防
每日一记
深信服技术支持平台
天逸直播
华北区交付直播
社区帮助指南
畅聊IT
答题自测
专家问答
技术圆桌
在线直播
MVP
网络基础知识
升级
上网策略
测试报告
日志审计
问题分析处理
流量管理
运维工具
云计算知识
用户认证
原创分享
解决方案
sangfor周刊
VPN 对接
项目案例
SANGFOR资讯
专家分享
技术顾问
信服故事
SDP百科
功能咨询
终端接入
授权
设备维护
资源访问
地址转换
虚拟机
存储
迁移
加速技术
排障笔记本
产品预警公告
信服圈儿
S豆商城资讯
技术争霸赛
「智能机器人」
追光者计划
答题榜单公布
纪元平台
通用技术
卧龙计划
华北区拉练
以战代练
山东区技术晨报
文档捉虫活动
齐鲁TV

本版版主

26
76
83

发帖

粉丝

关注

本版达人

新手24268...

本周建议达人

阿凯

本周分享达人

新手39341...

本周提问达人