[个人实战] wiwiz认证页面源码 - 招待券与短信验证两种认证可切换

[复制链接]


433 个金币	回复本帖可获得 1 个金币奖励! 每人限 1 次(中奖概率 80%)

tiida2011

774 回帖	6099 积分	1305 小时在线时间

中校

注册时间: 2011-4-12

金币: 4969 个

威望: 21 个

荣誉: 3 个

发消息

累计签到：32 天
连续签到：0 天
[LV.50]初入江湖

发表于 2013-1-15 11:42 |显示全部楼层

本帖最后由 tiida2011 于 2013-1-19 21:12 编辑

最近客户出了一个难题，希望同时使用手机号码短信验证和电子招待券两种认证方式，而且希望可以让客户二选一，也就是既能用招待券认证，也可以用手机号码认证。这样店内的人和有招待券的客人和只希望用手机号码上网的人都能进行认证。
难的地方在于wiwiz本身虽然支持同时设置这两种认证方式，但如果同时启用，认证的时候就必须同时满足这两个认证条件，而不能二选一。
经过一个朋友的帮助，终于用自己写的认证页面代码解决了这个问题。
原理是，先在Wiwiz后台设置一个默认的电子招待券（我叫它万能招待券），和一个万能手机验证码。
当用户选择电子招待券认证模式时，就用Javascript随便设置一个手机号，手机验证码设为之前设置的万能验证码，并且在页面上隐藏手机号和万能验证码。反过来，如果用户选择手机号码认证模式时，就用Javascript随便设置之前设置的万能招待券并隐藏。

认证页面截屏如下：

认证页面代码如下：
（代码中的MAGIC_VOUCHER和MAGIC_MOBILE_CODE就是在Wiwiz后台设置的万能招待券和万能手机验证码）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="viewport" content="user-scalable=no, width=device-width" />
<style type="text/css">
<!--
h1 { color: #841c39; }
td { color: #841c39; }
{ color: #841c39; }
a {color: #841c39;}
-->
</style>
<script src="/as/AuthPageScript.js"></script>
<script>
/* 自定义部分 */
var MAGIC_VOUCHER = "MagicVoucher3C3f3eollpoi0OC";
var MAGIC_MOBILE = "13011112222";
var MAGIC_MOBILE_CODE = "MagicMobileCode9c3iIl10OA";
function $(id) {
return document.getElementById(id);
}
/* 用电子招待券认证 */
function onVoucher() {
$("spVoucher").style.display = "";
$("spMobile").style.display = "none";
$("linkVoucher").style.fontWeight = "bold";
$("linkMobile").style.fontWeight = "normal";
$("spMarkVoucher").innerHTML = "▶";
$("spMarkMobile").innerHTML = "";
$("voucher").value = "";
$("phonenum").value = MAGIC_MOBILE;
$("phonecode").value = MAGIC_MOBILE_CODE;
}
/* 用手机号码（短信验证）认证 */
function onMobile() {
$("spVoucher").style.display = "none";
$("spMobile").style.display = "";
$("linkVoucher").style.fontWeight = "normal";
$("linkMobile").style.fontWeight = "bold";
$("spMarkVoucher").innerHTML = "";
$("spMarkMobile").innerHTML = "▶";
$("voucher").value = MAGIC_VOUCHER;
$("phonenum").value = "";
$("phonecode").value = "";
}
/* 响应回车键 */
document.onkeydown = function(e){
if(!e) e = window.event;
if((e.keyCode || e.which) == 13){
$("login").click(); return false; //触发认证按钮
}
}
/* 以下为需要对接Wiwiz所需的函数 */
/* 回调函数。“获取验证码”按钮按下后，将自动调用此函数。可根据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 == 6) {
alert("超过最大在线用户数。");
} else if(code == 7) {
alert("请输入手机号码。");
} else if(code == 8) {
alert("热点已停用。");
} else if(code == 32) {
alert("账户存在异常，暂时锁定中。");
} else if(code == 35) {
alert("手机验证码错误或已超时。");
} else {
alert("未知错误。错误码："+ code);
}
}
</script>
</head>
<body topmargin="0" leftmargin="0" onload="onVoucher();">
<form name="myform" id="myform" action="" method="post" onsubmit="alert(0);">
<table width="100%" cellspacing="1" cellpadding="4" style="font-size:14px" bgcolor="#FFFFFF">
<tr align="center">
<td width="100%">
<img src=/as/s/uploaduserfile/?dl=0&fn=13c3970f650.png />
<br><br>
<span id="linkVoucher" style="font-weight:bold; font-size:14px"><span id="spMarkVoucher">▶</span><a href="#" onclick="onVoucher();return false;">用电子招待券认证</a></span>
<span id="linkMobile" style="font-weight:normal; font-size:14px"><span id="spMarkMobile"></span><a href="#" onclick="onMobile();return false;">用手机号码认证</a></span>
<br><br>
<span id="spVoucher" style="display:">
<br>
<table style="font-size:14px">
<tr>
<td><b>电子招待券: </b></td>
<td>
<input name="voucher" id="voucher" type="text" style="width:140px" />
</td>
</tr>
<tr>
<td colspan="2" align="center"><font style="font-size:12px;color:#666666">请向店员索取上网用电子招待券</font></td>
</tr>
</table>
</span>
<span id="spMobile" style="display:none">
<table style="font-size:14px">
<tr>
<td><b>手机号码: </b></td>
<td>
<input name="phonenum" id="phonenum" type="text" value="" style="width:140px" />
</td>
</tr>
<tr>
<td></td>
<td>
<!-- 用于取得发送手机验证码短信的按钮，onclick事件必须调用WiwizSmsVerify()函数
WiwizSmsVerify()参数说明:
参数1(必须): 手机号码
参数2(必须): HotSpot ID
-->
<input type="button" value="获取验证码" onclick="WiwizSmsVerify(document.getElementById('phonenum').value, WiwizGetQueryParameter('gw_id'));" />
</td>
</tr>
<tr>
<td><b>手机验证码: </b></td>
<td>
<input name="phonecode" id="phonecode" type="text" value="" style="width:140px" />
</td>
</tr>
<tr>
<td colspan="2" align="center"><font style="font-size:12px;color:#666666">验证码将通过短信发送至手机</font></td>
</tr>
</table>
</span>
<br>
<input type="button" name="login" id="login" value=" 认证 " onclick="WiwizStartAuth();" />
<br><br>
</td>
</tr>
</table>
</form>
</body></html>