| 本帖最后由 北回归线 于 2017-8-18 09:02 编辑 
 一、前言
 最近经常看到论坛的小伙伴在纠结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> 
4、修改表单属性值,将我们自己弄的登录页面中表单的属性参数修改为如下标红的内容,这个是关键步骤,必须要正确设置,否则会导致用户名密码提交不了;a.将from标签的action属性修改为<%U_PSWACTION%>; 复制代码<form action="<%U_PSWACTION%>" name="loginform" accept-charset="utf-8" id="login_form"  method="post" onSubmit="return formSubmit();">
b.将用户名的input标签的属性id和name值修改为<%N_INPUTNAME%>; 复制代码<input type="text" id="<%N_INPUTNAME%>" name="<%N_INPUTNAME%>" />
c.将密码框的input标签的属性id和name值修改为<%N_INPUTPASS%>;复制代码<input type="password"  id="<%N_INPUTPASS%>" name="<%N_INPUTPASS%>" class="inputstyle" />
5、添加页面其他链接,下面是我们SSL页面一些常用的链接,在自己的页面中找合适的位置插入即可;
 复制代码<a href="javascript:HelpCenter()" _html="帮助中心">帮助中心</a>
<a href="javascript:HelpCenter()" _html="用户手册">用户手册</a>
<a href="javascript:onInstall(INST_COMP)" _html="手动安装组件">手动安装组件</a>
复制代码<a href="javascript:CertLogin();" _html="证书登录">证书登录</a>
<a href="javascript: if(!checkReLoginEx()){HandleDkey()};" _html="USB-Key登录">USB-Key登录</a>
<a href="javascript:onInstall(client.EnableDKeyVer)" _html="下载USB-Key驱动">下载USB-Key驱动</a>
6、打包,将自己修改好的页面文件login_psw.tml文件替换内置模板的login_psw.tml文件然后进行打包压缩为ZIP格式,目录结构必须按照下图设置,切勿修改;7、上传新模板并选择模板应用模板,这个过程需要重启SSL VPN服务,操作要谨慎哦; 四、效果展示 关于资源页面感觉没什么看改的,本教程也仅限修改登录页面。如有更多问题可以联系楼主QQ393620170 |