如何制作自定义认证页面
|
[修改履历] 2012-12-28: 加入参数userstring（自定义追踪信息） 2014-02-02: 加入可重写函数WiwizBeforeAuthDone() 2014-04-30: WiwizAuthPageError()函数的参数code值增加36与37 2014-07-22: WiwizAuthPageError()函数的参数code值增加5 2015-10-17: 加入WiwizSetAuthDelay()函数 |
本文是新版的关于如何制作自定义认证页面的指南。此新版指南对制作自定义认证页面的方法做了很大的简化。认证的处理使用JavaScript进行了封装，用户无需再关心传入与传出的参数处理。同时，还支持用户使用自己的代码来自定义报错机制。
* 尽管我们不推荐，但你依然可以参考旧版的指南来制作自定义认证页面。
你需要创建类似以下样例的页面作为自定义认证页面，并请阅读下面的“要点说明”：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<!-- 必须引入AuthPageScript.js -->
<script src="http://cp.wiwiz.com/as/AuthPageScript.js"></script>
<script>
/* 回调函数。“获取验证码”按钮按下后，将自动调用此函数。可根据code值自行改写该函数。 */
function WiwizSmsVerifyMsg(code) {
if (code == "-1") {
alert("手机号码不可为空!");
} else if(code == "0") {
alert("验证码已通过短信发送至您的手机，请注意查收。然后请在认证页面输入验证码。");
} else if(code == "1") {
alert("该热点不允许进行手机号码验证。如有疑问请您联系热点管理员。");
} else if(code == "2") {
alert("该热点不允许进行手机号码验证。如有疑问请您联系热点管理员。");
} else if(code == "3") {
alert("该手机号码不允许进行验证。如有疑问请您联系热点管理员。");
} else if(code == "4") {
alert("手机号码验证过于频繁，请稍后再试。");
} else if(code == "5") {
alert("该手机号码进行验证次数已超过今日上限。");
} else if(code == "6") {
alert("热点认证服务已暂停，不可进行手机验证。");
} else if(code == "7") {
alert("该热点手机验证次数已超过配额。请联系热点管理员。");
} else if(code == "8") {
alert("请求已超时，请刷新认证页面。");
} else if(code == "9") {
alert("请使用上一次通过短信接收到的验证码。");
} else if(code == "99") {
alert("验证短信发送失败。请检查手机号码的有效性，或联系热点管理员。");
} else if(code == "999") {
alert("系统异常，验证短信发送失败。请联系热点管理员。");
} else {
alert("系统异常。请联系热点管理员。");
}
}
/* 回调函数。“认证”按钮按下后，如报错将自动调用此函数。可根据code值自行改写该函数。 */
function WiwizAuthPageError(code) {
if (code == 1) {
alert("您无法使用此网络，除非您认同此协议条款。");
} else if(code == 2) {
alert("请输入用户名。");
} else if(code == 3) {
alert("用户名或密码错误。");
} else if(code == 4) {
alert("电子招待券无效。");
} else if(code == 5) {
alert("超过该电子招待券的最大使用人数限制。");
} else if(code == 6) {
alert("超过最大在线用户数。");
} else if(code == 7) {
alert("请输入手机号码。");
} else if(code == 8) {
alert("热点已停用。");
} else if(code == 32) {
alert("账户存在异常，暂时锁定中。");
} else if(code == 35) {
alert("手机验证码错误或已超时。");
} else if(code == 36) {
alert("该手机号码不允许进行验证。如有疑问请您联系热点管理员。");
} else if(code == 37) {
alert("该手机号码进行验证次数已超过今日上限。");
} else {
alert("未知错误。错误码："+ code);
}
}
/* 认证完成前先调用此函数 */
function WiwizBeforeAuthDone() {
alert("延时3秒钟触发认证");
WiwizSetAuthDelay(3000);
}
</script>
</head>
<body>
<form name="myform" id="myform" action="" method="post">
热点介绍文本<br>
使用协议与条款文本...... <br>
<!-- 以下各参数应根据热点的认证方式正确设置 -->
<!-- 参数: agree 代表认同协议 -->
<input name="agree" id="agree" type="checkbox" value="1" />
<label for="agree">我认同协议</label>
<br>
<!-- 参数: username 代表用户名 -->
用户名:
<input name="username" id="username" type="text" value="" />
<br>
<!-- 参数: pswd 代表密码 -->
密码:
<input name="pswd" id="pswd" type="password" />
<br>
<!-- 参数: encrypt 代表是否对密码加密 -->
<input name="encrypt" id="encrypt" type="checkbox" value="1" checked /><label for="encrypt">加密密码</label>
<br>
<!-- 参数: voucher 代表电子招待券 -->
电子招待券:
<input name="voucher" id="voucher" type="text" />
<br>
<!-- 参数: phonenum 代表手机号码 -->
手机号码:
<input name="phonenum" id="phonenum" type="text" value="" />
<!-- 用于取得发送手机验证码短信的按钮，onclick事件必须调用WiwizSmsVerify()函数
WiwizSmsVerify()参数说明:
参数1(必须): 手机号码
参数2(必须): HotSpot ID
-->
<input type="button" value="获取验证码" onclick="WiwizSmsVerify(document.getElementById('phonenum').value, WiwizGetQueryParameter('gw_id'));" />
<br>
<!-- 参数: phonecode 代表手机验证码 -->
手机验证码:
<input name="phonecode" id="phonecode" type="text" value="" />
<br>
<!-- 参数: userstring 代表自定义追踪信息 -->
<input name="userstring" id="userstring" type="HIDDEN" value="" />
<!-- 用于开始触发认证的按钮，onclick事件必须调用WiwizStartAuth()函数 -->
<input type="button" name="login" value=" 认证 " onclick="WiwizStartAuth();" />
<br>
<!-- 以下是一些非必须的可选链接 -->
<a href="#" onclick="window.open('http://cp.wiwiz.com/as/s/viewhotspot/?gw_id='+ WiwizGetQueryParameter('gw_id')); return false;">更多信息</a>
<a href="http://cp.wiwiz.com/as/s/register/" target="_blank">注册</a>
<a href="http://cp.wiwiz.com/as/s/remindpswd/" target="_blank">忘记密码?</a>
</form>
</body></html> |
[要点说明]
1. 页面HTML代码中必须通过script标签引入AuthPageScript.js。如果你使用的是“自定义认证页面HTML”（而不是“自定义认证页面URL”），那么它的路径应该是”/as/AuthPageScript.js”。
2. 认证页面样式可自由定义。但用于认证的各表单域必须被包含。包含的用于认证的表单域应与设置热点时的认证规则一致。
3. “获取验证码”按钮按下时，需调用WiwizSmsVerify()函数方可发送短信。调用后，系统将会自动调用WiwizSmsVerifyMsg()回调函数。用户可根据需要对函数内容由自由重写。
4. “认证”按钮按下时，需调用WiwizStartAuth()函数方可进行认证。调用后，如有错误，系统将会自动调用WiwizAuthPageError()回调函数。用户可根据需要对函数内容由自由重写。如果没有错误，则自动调用函数WiwizBeforeAuthDone()，它也可以重写。最后，认证通过并跳转到“认证后页面”。
5. 可以调用WiwizSetAuthDelay()函数来控制认证动作的延时，即WiwizStartAuth()调用后触发认证动作的延时。例如，如果希望认证动作延时3秒，那么可以写成WiwizSetAuthDelay(3000)。
