如何制作自定义认证页面

[修改履历]
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)。

Comments are closed.