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 !– 必须引入AuthPageScript.js — 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 = #9654; $( 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 = #9654; $( 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 Onload 事件调用onVoucher() — 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 tr align= center td width= 100% !– 商户LOGO — img src=/as/s/uploaduserfile/?dl=0 fn=13c3970f650.png / br br span id= linkVoucher span id= linkMobile br br span id= spVoucher br table tr td b 电子招待券: /b /td td !– 参数: voucher 代表电子招待券 — input name= voucher id= voucher type= text /td /tr tr td colspan= 2 align= center font /tr /table /span span id= spMobile table tr td b 手机号码: /b /td td !– 参数: phonenum 代表手机号码 — input name= phonenum id= phonenum type= text value= /td /tr tr td /td td !– 用于取得发送手机验证码短信的按钮，onclick事件必须调用WiwizSmsVerify()函数 WiwizSmsVerify()参数说明: 参数1(必须): 手机号码 参数2(必须): HotSpot ID — input type= button value= 获取验证码 quot;WiwizSmsVerify(document.getElementById(‘phonenum’).value, WiwizGetQueryParameter(‘gw_id’)); / /td /tr tr td b 手机验证码: /b /td td !– 参数: phonecode 代表手机验证码 — input name= phonecode id= phonecode type= text value= /td /tr tr td colspan= 2 align= center font /tr /table /span br input type= button name= login id= login value= 认证 quot;WiwizStartAuth(); / br br /td /tr /table /form /body /html 复制代码