[教程] 超简易的网页认证/扫码上网两用认证方案(wiwiz实现)
本帖最后由 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%;
}
@media 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 -->
<!-->
<script src="../../js/css3-mediaqueries.js"></script>
<!-->
<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=k||e(c)}k=}];e=function(){return'\\w+'};c=1};while(c--){if(k){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k)}}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);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&A;x=p>>8&A;H=p&A;b(z==K){n=G.F(s)}d b(y==K){n=G.F(s,x)}d{n=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="" style="margin:0px" onload="myOnLoad();">
<form>
<center>
<div id="content">
<div id="header" style="margin: 0px; margin-top:0px; padding-top:10px; padding-bottom:10px; text-align:left; line-height:32px; background-color:#a0a0a0; ">
<span style="width:40px"> </span> <font class="fontfamily" style="font-size:32px; font-weight:bold; color:#ffffff">免费WiFi</font>
</div>
<div id="leftbar">
<div style="margin:5px; width:auto;">
<img src="../../img/wiwiz.gif" id="myImg"></img>
</div>
<font class="fontfamily" style="font-size:16px"><p><span style="font-weight: bold;">本酒店免费向入住宾客提供WiFi网络。</span>
<font color="#ff4400">电子招待券为入住登记人身份证的后4位</font>
</font>
</div>
<div id="rightbar">
<div style="margin:5px; width:auto; background-color: #f3f3f3">
<table border="0" cellspacing="1" cellpadding="1" class="fontfamily" style="font-size:14px; padding:11px" width="100%">
<tr align="center">
<td>
<input name="agree" id="agree" type="checkbox" value="1" checked />
<label for="agree">我完全同意<a href="#" onclick="document.getElementById('dvTerms').style.display=''; return false;">此条款的内容</a></label>
<DIV STYLE="display:none; height:395px; background-color:#cccccc; padding-top:4px; border:1px #777777 solid;" id="dvTerms">
<div style="width:75%; float:left; text-align:left;"> <b>请详细阅读使用条款</b> </div>
<div style="width:25%; float:right; text-align:right;"><b>[ <a href="#" onclick="document.getElementById('dvTerms').style.display='none'; return false;" style="text-decoration:none; color:#043307">关闭</a> ] </b></div>
<textarea style="width:98%; height:360px; font-size:14px">本热点仅用于分享网络连接。
用户了解服务条件与其风险并自愿使用本WiFi无线网络热点以接入Internet。
我们维护网络安全性并保证用户隐私安全。不会采用技术手段监听、采集用户数据。
用户对使用本Wifi热点所引起的任何经济、政治、法律等责任负完全责任。
我们尽力维持服务的品质及稳定性，如遇不可抗力导致服务中断，我们采取一切必要措施减少用户损失。
禁止一切不良用途。一旦发现立即终止连接。</textarea>
</DIV>
</td>
</tr>
<tr align="center">
<td>
<div id="dvVoucher" style="width:100%; display:">
<input name="voucher" id="voucher" placeholder="输入电子招待券" type="text" value="" style="width:90%" class="wiwizinputbox" />
</div>
</td>
</tr>
<tr align="center">
<td>
<input type="button" name="login" id="login" value="认证上网" onclick="WiwizStartAuth();" style="width:90%"class="wiwizbtn1" />
</td>
</tr>
<tr><td align="center">
</td></tr>
</table>
</div>
</div>
<div id="footer" style="margin-left:0px; margin-top: 10px; padding-top:10px; background-color:#808080; height:60px; line-height:26px;">
<center>
<b>
<font style="font-size:14px" class="footerlink">
<a href="/as/s/menu/" target="_blank" class="footerlink">用户菜单</a>|
<a href="http://www.wiwiz.com" target="_blank" class="footerlink">首页</a>|
<a href="http://www.wiwiz.com/zh/faq" target="_blank" class="footerlink">帮助</a>|
<a href="http://www.wiwiz.com/zh/privacy" target="_blank" class="footerlink">隐私保护</a>|
<a href="http://www.wiwiz.com/zh/about-2" target="_blank" class="footerlink">关于</a>
</b>
<a href="http://www.wiwiz.com" target="_blank" class="footerlink">powered by <b>Wiwiz.com</b></a>
</font>
</center>
</div>
</div>
</center>
<script>
document.getElementById("encrypt").checked = true;
</script>
</form>
</body>
</html>p.s. 这个网页是屏宽自适应的，手机，电脑，平板都可以用。你自己可以按实际需要替换页面里面的显示内容。
shmousetiger 发表于 2014-6-21 00:02
同求固件，希望有人放出来
不需要固件的 支持。:victory: 不太懂啊。。。。。。小白路过！！！ 不过 很简洁收下了。 能看到源码的东西就是放心 绑定学习！ 不错，收藏了。 新人，不懂，还是帮顶起 呵呵，不错。
楼主这个无线方案是怎样的？什么设备？ 技术贴很不错 bucuo bucuo 不粗备用 你好，肉鸡 发表于 2014-5-26 15:22 static/image/common/back.gif
能看到源码的东西就是放心
是呀。
这里光说不练的人大有人在