#每日一记#手把手教你做SSL VPN登录界面

এ塔铃独语别黄昏এ 1392

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

模板下载请戳这里:



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

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

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



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


  • <script src="../com/common.js"></script>
  • <script src="../com/component.js"></script>
  • <script src="../com/Login.js"></script>
  • <script type="text/javascript" src="../com/MSIE.PNG.js"></script>
  • <script type="text/javascript">
  • var client = {
  •         EnableKeypad:                '<%USE_SOFT_KB%>',
  •         showSetup:                        '<%COMP_LINK_INFO%>',
  •         showSvpntool:                '<%SHOW_TOOL_LINK%>',
  •         showHelpCenter:                '<%SHOW_HELP_LINK%>',
  •         EnableDKeyVer:                '<%DKEY_VER_ENABLE%>',
  •         EnableRandCode:                '<%USE_RAND_CODE%>',
  •         EnableAnonymous:        '<%ALLOW_ANONYMOUS_ACCESS%>',
  •         denyNormalAccess:        '<%DENY_NORMAL_ACCESS%>',
  •         EnableMidAtkCheck:        '<%MID_ATK_CHECK%>',
  •         EncryptKey:                        '<%RSA_ENCRYPT_KEY%>',
  •         EncryptExp:                        '<%RSA_ENCRYPT_EXP%>',
  •         N_INPUTNAME:                '<%N_INPUTNAME%>',
  •         N_INPUTPASS:                '<%N_INPUTPASS%>',
  •         N_HIDEBUTTONS:                '<%HideButton%>',
  •         N_BUTTONNAME:                'logButton',
  •         N_ANONYBUTTONNAME:        'anonyButton',
  •         N_INPUTRAND:                'p_rand_code',
  •         N_LOGFORM:                        'formLogin',
  •         N_COMPLAYER:                'ComLayer',
  •         N_DKEYTIPS:                        'DkeyTips',
  •         N_SIGNINBYCERT:                'log0',
  •         N_SIGNINBYDKEY:                'log1',
  •         N_RANDCODEIMG:                'randcodeImg',
  •         content:{
  •                 "NORMAL_LOGIN": tr("登 录"),
  •                 "ANONYMOUS_LOGIN": tr("匿名登录"),
  •                 "ANONYMOUS_USER": "Anonymous",
  •                 "NEED_USERNAME": tr("请输入用户名,否则无法登录"),
  •                 "INVALID_USER": tr("不合法的用户名,用户名不能超过72个字节"),
  •                 "NEED_RANDCODE": tr("校验码不能为空!"),
  •                 "LOGING": tr("正在检测登录信息...")
  •         }
  • };
  • var errorMsg = '<%ERROR_INFO%>';
  • window.onload = function(){
  •         if(isMordernIE()){
  •                 window.location.href = "/com/mode_warn.html"
  •         }
  • }
  • </script>
[color=rgb(3, 133, 237) !important]复制代码

4、修改表单属性值,将我们自己弄的登录页面中表单的属性参数修改为如下标红的内容,这个是关键步骤,必须要正确设置,否则会导致用户名密码提交不了;
a.将from标签的action属性修改为<%U_PSWACTION%>;
  • <form action="<%U_PSWACTION%>" name="loginform" accept-charset="utf-8" id="login_form"  method="post">
[color=rgb(3, 133, 237) !important]复制代码

b.将用户名的input标签的属性id和name值修改为<%N_INPUTNAME%>;
  • <input type="text" id="<%N_INPUTNAME%>" name="<%N_INPUTNAME%>" />
[color=rgb(3, 133, 237) !important]复制代码

c.将密码框的input标签的属性id和name值修改为<%N_INPUTPASS%>;
  • <input type="password"  id="<%N_INPUTPASS%>" name="<%N_INPUTPASS%>" class="inputstyle" />
[color=rgb(3, 133, 237) !important]复制代码


5、添加页面其他链接,下面是我们SSL页面一些常用的链接,在自己的页面中找合适的位置插入即可;
  • <a href="javascript:HelpCenter()" _html="帮助中心">帮助中心</a>
  • <a href="javascript:HelpCenter()" _html="用户手册">用户手册</a>
  • <a href="javascriptnInstall(INST_COMP)" _html="手动安装组件">手动安装组件</a>
[color=rgb(3, 133, 237) !important]复制代码

  • <a href="javascript:CertLogin();" _html="证书登录">证书登录</a>
  • <a href="javascript: if(!checkReLoginEx()){HandleDkey()};" _html="USB-Key登录">USB-Key登录</a>
  • <a href="javascriptnInstall(client.EnableDKeyVer)" _html="下载USB-Key驱动">下载USB-Key驱动</a>
[color=rgb(3, 133, 237) !important]复制代码


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


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




四、效果展示


解决该疑问,预计可以帮助到 16369 人!

回帖即可获得
2S豆
,被楼主采纳即奖励20S豆+10分钟内回帖奖励10S豆 [已过期] ,了解更多S豆奖励信息

完善手机号和公司名称,让服务更省心更便捷!立即完善

水之蓝色 发表于 2021-5-4 22:22
  
楼主善于研究,值得学习!!!!
新手650001 发表于 2021-5-6 08:29
  
不错不错, 没有特别必要默认的看着也不错
Sangfor01 发表于 2021-5-10 11:28
  

楼主善于研究,值得学习!!!!

等我来答:

换一批

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

本版版主

26
76
83

发帖

粉丝

关注

本版达人

新手24268...

本周建议达人

阿凯

本周分享达人

新手39341...

本周提问达人