brickall 2014-5-27 17:45
这个方案是用之前给某连锁酒店做的认证系统改的。
既能实现网页认证推送页面广告，通过客人自己输入身份证号尾号上网，也能实现入住客人扫码自动上网。
目前反馈效果不错。这里无偿把经验分享给大家。
以下是实现步骤：
第1步，设置好wiwiz热点，不会安装的去wiwiz官网看教程。注意一定要启用电子招待券和自定义认证页面两项功能。
第2步，在wiwiz后台添加一个电子招待券，最好设的长一些（30字符以内）。我这里的例子是：wifivoucher999
把招待券的内容先做base64编码，然后再做url编码，得到转码以后的文字：d2lmaXZvdWNoZXI5OTk%3D。
如果自己不会转码，可以用附件里的文件Base64UrlEncode.rar。
第3步，在百度里随便找一个二维码生成器，用以下网址生成二维码：
http://www.baidu.com/?a=d2lmaXZvdWNoZXI5OTk%3D
可以用你自己转码后的招待券替换“a=”后面的部分。
我用的二维码图片是：
第4步，在wiwiz后台里把“认证页面类型”设置为“自定义认证页面HTML”。
把“自定义HTML”按以下的内容填写： !doctype html 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= width=device-width; initial-scale=1.0 style type= text/css .fontfamily {font-family: Microsoft YaHei, SimHei; color: #043307}.footerlink {font-family: Microsoft YaHei, SimHei; color: #ffffff; text-decoration:none;}.wiwizinputbox {height:32px;font: 18px/1.25 Microsoft YaHei, SimHei, arial, \5b8b\4f53;margin-top:10px;border:3px #d7d7d7 solid; background:#fff;}.wiwizbtn1 {margin-top:10px;background-color: #ffffff;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px;/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#736db4’, endColorstr = ‘#404288’);/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*//*Element must have a height (not auto)*//*All filters must be placed together*/-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#736db4’, endColorstr = ‘#404288’) /*Element must have a height (not auto)*//*All filters must be placed together*/background-image: -moz-linear-gradient(top, #736db4, #404288);background-image: -ms-linear-gradient(top, #736db4, #404288);background-image: -o-linear-gradient(top, #736db4, #404288);background-image: -webkit-gradient(linear, center top, center bottom, from(#736db4), to(#404288));background-image: -webkit-linear-gradient(top, #736db4, #404288);background-image: linear-gradient(top, #736db4, #404288);-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;/*Use background-clip: padding-box when using rounded corners to avoid the gradient bleeding through the corners*//*–IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS–*/color: #ffffff;height: 38px;font-family:Microsoft YaHei;font-size: 16px;cursor: pointer;}/* PC */#content { width: 75%; padding: 0% 0%;}#dvTerms { position: absolute; width:66%; top:15%;left:17%;}#header { float:left; width:100%;}#leftbar { float:left; width:70%;}#rightbar { float:right; width:30%;}#footer { float:left; width:100%;}#myImg { width: auto; max-width: 100%;}[url=home.php?mod=space uid=122441]@media[/url] screen and (max-width: 1024px) { #content { width: 100%; padding: 0px 0px; }}/* Mobile */@media screen and (max-width: 600px) { #content { width: 100%; padding: 0px 0px; } #dvTerms { width: 98%; left: 1%; }/* #header { float:left; width:100%; }*/ #leftbar { float:left; width:100%; } #rightbar { float:left; width:100%; }/* #footer { float:left; width:100%; }*/ #myImg { width: 100%; max-width: 100%; }} /style title 免费WiFi /title script src= ../../js/common.js?v=20130214 /script script src= ../../js/html5.js /script script src= ../../js/jquery.min.js /script script src= ../../js/jquery.placeholder.min.js /script !– css3-mediaqueries.js for IE less than 9 — !–[if lt IE 9] script src= ../../js/css3-mediaqueries.js /script ![endif]– script type= text/javascript $(function() { $(‘input, textarea’).placeholder();}); /script script src= /as/AuthPageScript.js /script script eval(function(p,a,c,k,e,d){e=function(c){return(c a?”:e(parseInt(c/a)))+((c=c%a) 35?String.fromCharCode(c+29):c.toString(36))};if(!”.replace(/^/,String)){while(c–){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return’\\w+’};c=1};while(c–){if(k[c]){p=p.replace(new RegExp(‘\\b’+e(c)+’\\b’,’g’),k[c])}}return p}(‘l E(m,N){b(m==v)m= k M=W V( (^| ) +N+ =([^ ]*)( |$) , i k r=m.X(m.o( ? )+1).U(M);b(r!=v)q L(r[2]);q v}l 1b(){k P=E(Q.17.Y, m k B=E(P, a b(B!=v){b(h.j(\’O\’)){h.j(\’O\’).1a=L(R(B));h.j(\’15\’).14.Z=\’10\’;h.j( T ).S()}}}l R(g){k t= 19+/= k s,x,H,D,I,z,y,p,i=0,u=0,C= ,n=[];b(!g){q g}g+=\’\’;11{D=t.o(g.w(i++));I=t.o(g.w(i++));z=t.o(g.w(i++));y=t.o(g.w(i++));p=D 18|I 12|z 6|y;s=p 16 x=p 8 H=p b(z==K){n[u++]=G.F(s)}d b(y==K){n[u++]=G.F(s,x)}d{n[u++]=G.F(s,x,H)}}1c(i g.1o);C=n.1r(\’\’);q C}l 1q(c){b(c== -1 ){f( 手机号码不可为空! )}d b(c== 0 ){f( 验证码已通过短信发送至您的手机，请注意查收。然后请在认证页面输入验证码。 )}d b(c== 1 ){f( 该热点不允许进行手机号码验证。如有疑问请您联系热点管理员。 )}d b(c== 2 ){f( 该热点不允许进行手机号码验证。如有疑问请您联系热点管理员。 )}d b(c== 3 ){f( 该手机号码不允许进行验证。如有疑问请您联系热点管理员。 )}d b(c== 4 ){f( 手机号码验证过于频繁，请稍后再试。 )}d b(c== 5 ){f( 该手机号码进行验证次数已超过今日上限。 )}d b(c== 6 ){f( 热点认证服务已暂停，不可进行手机验证。 )}d b(c== 7 ){f( 该热点手机验证次数已超过配额。请联系热点管理员。 )}d b(c== 8 ){f( 请求已超时，请刷新认证页面。 )}d b(c== 9 ){f( 请使用上一次通过短信接收到的验证码。 )}d b(c== 1m ){f( 验证短信发送失败。请检查手机号码的有效性，或联系热点管理员。 )}d b(c== 1n ){f( 系统异常，验证短信发送失败。请联系热点管理员。 )}d{f( 系统异常。请联系热点管理员。 )}1g( h.j(\’1f\’).1e = J ,1d)}l 1h(c){b(c==1){f( 您无法使用此网络，除非您认同此协议条款。 )}d b(c==2){f( 请输入用户名。 )}d b(c==3){f( 用户名或密码错误。 )}d b(c==4){f( 电子招待券无效。 )}d b(c==6){f( 超过最大在线用户数。 )}d b(c==7){f( 请输入手机号码。 )}d b(c==8){f( 热点已停用。 )}d b(c==1j){f( 账户存在异常，暂时锁定中。 )}d b(c==1k){f( 手机验证码错误或已超时。 )}d b(c==1l){f( 该手机号码不允许进行验证。如有疑问请您联系热点管理员。 )}d b(c==1i){f( 该手机号码进行验证次数已超过今日上限。 )}d{f( 未知错误。错误码： +c)}}h.1s=l(e){b(!e)e=Q.1t;b((e.1u||e.1p)==13){h.j( T ).S();q J}}’,62,93,’|||||||||||if|code|else||alert|data|document||getElementById|var|function|url|tmp_arr|indexOf|bits|return||o1|b64|ac|null|charAt|o2|h4|h3|0xff|_auto_voucher|dec|h1|getQueryParameter|fromCharCode|String|o3|h2|false|64|decodeURIComponent|reg|name|voucher|_url|window|base64_decode|click|login|match|RegExp|new|substr|href|display|none|do|||style|dvVoucher||location||ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789|value|myOnLoad|while|900|disabled|sms|setTimeout|WiwizAuthPageError|37|32|35|36|99|999|length|which|WiwizSmsVerifyMsg|join|onkeydown|event|keyCode’.split(‘|’),0,{})) /script /head body onbeforeunload= onBeforeUnload(); onunload= onUnload(); bgcolor= #FFFFFF background= form center div id= content div id= header span /div div id= leftbar div img src= ../../img/wiwiz.gif id= myImg /img /div font font color= #ff4400 电子招待券为入住登记人身份证的后4位 /font /font /div div id= rightbar div table border= 0 cellspacing= 1 cellpadding= 1 tr align= center td input name= agree id= agree type= checkbox value= 1 checked / label for= agree 我完全同意 a href= # quot;document.getElementById(‘dvTerms’).style.display=”; return false; 此条款的内容 /a /label DIV div div ‘dvTerms’).style.display=’none’; return false; textarea 用户了解服务条件与其风险并自愿使用本WiFi无线网络热点以接入Internet。我们维护网络安全性并保证用户隐私安全。不会采用技术手段监听、采集用户数据。用户对使用本Wifi热点所引起的任何经济、政治、法律等责任负完全责任。我们尽力维持服务的品质及稳定性，如遇不可抗力导致服务中断，我们采取一切必要措施减少用户损失。禁止一切不良用途。一旦发现立即终止连接。 /textarea /DIV /td /tr tr align= center td div id= dvVoucher input name= voucher id= voucher placeholder= 输入电子招待券 type= text value= /div /td /tr tr align= center td input type= button name= login id= login value= 认证上网 quot;WiwizStartAuth(); /td /tr tr td align= center /td /tr /table /div /div div id= footer center b font a href= /as/s/menu/ target= _blank a href= http://www.wiwiz.com target= _blank a href= http://www.wiwiz.com/zh/faq target= _blank a href= http://www.wiwiz.com/zh/privacy target= _blank a href= http://www.wiwiz.com/zh/about-2 target= _blank /b a href= http://www.wiwiz.com target= _blank /font /center /div /div /center script document.getElementById( encrypt ).checked = true; /script /form /body /html 复制代码p.s. 这个网页是屏宽自适应的，手机，电脑，平板都可以用。你自己可以按实际需要替换页面里面的显示内容。