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

এ塔铃独语别黄昏এ 151

{{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服务,操作要谨慎哦;




四、效果展示


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

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

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

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

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

等我来答:

换一批

发表新帖
热门标签
全部标签>
GIF动图学习
每日一问
信服课堂视频
技术笔记
项目案例
技术咨询
在线直播
产品连连看
技术圆桌
新版本体验
专家分享
功能体验
原创分享
安装部署配置
SDP百科
SANGFOR资讯
每日一记
畅聊IT
标准化排查
答题自测
授权
安全攻防
专家问答
MVP
网络基础知识
升级
上网策略
测试报告
日志审计
问题分析处理
流量管理
运维工具
云计算知识
用户认证
解决方案
sangfor周刊
VPN 对接
技术顾问
信服故事
功能咨询
终端接入
设备维护
资源访问
地址转换
虚拟机
存储
迁移
加速技术
排障笔记本

本版版主

25
56
81

发帖

粉丝

关注

本版达人

新手24268...

本周建议达人

阿凯

本周分享达人

新手39341...

本周提问达人