[无线运营] 分享自己做的wiwiz自定义认证页面代码，支持Cookie和自动登录

[复制链接]

tiida2011

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

中校

注册时间: 2011-4-12

金币: 4969 个

威望: 21 个

荣誉: 3 个

发消息

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

发表于 2012-9-20 16:21 |显示全部楼层

本帖最后由 tiida2011 于 2012-9-20 16:24 编辑

一直觉得Wiwiz自带的认证页面不太方便，尤其是不支持Cookie，这样每次认证时都需要手动输入认证信息，会比较麻烦。
我利用自定义认证页面的定制代码，加入了记录和处理Cookie的功能，用Javascript实现的。
这里分享给大家，谁需要请拿去用吧。

认证页面效果图：

认证页面HTML代码：

<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">
<meta name="viewport" content="user-scalable=no, width=device-width" />
<script src="/as/AuthPageScript.js"></script>
<script>
/* 读写Cookie的函数 */
function SetCookie(name,value) {
var Days = 180;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getCookie(name) {
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null)
return unescape(arr[2]);
return "";
}
/* 用于在认证时记录Cookie */
function recordCookie() {
if(document.getElementById("remember").checked == false)
return;
else {
var u = document.getElementById("username").value;
var p = document.getElementById("pswd").value;
SetCookie("wifi-user", u);
SetCookie("wifi-pswd", p);
}
}
/* 页面初始化是读入Cookie并自动按下认证按钮 */
function doInit() {
var u = getCookie("wifi-user");
var p = getCookie("wifi-pswd");
if(u != "") {
document.getElementById("username").value = u;
document.getElementById("pswd").value = p;
document.getElementById("login").click();
}
}
/* 回调函数。“获取验证码”按钮按下后，将自动调用此函数。可根据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 == 32) {
alert("账户存在异常，暂时锁定中。");
} else if(code == 35) {
alert("手机验证码错误或已超时。");
} else {
alert("未知错误。错误码："+ code);
}
}
</script>
</head>
<body onload="doInit();">
<form name="myform" id="myform" action="" method="post">
<center>
<table width="320" bgcolor="#ffffff">
<tr><td align="center">
<br>
<table width="100%" cellspacing="2" cellpadding="2">
<tr align="center"><td>
<font size="+2" color="#000000"><b>Wifi无线网络 - 10M带宽 </b> </font>
</td></tr>
<tr align="center"><td>
<img src="/as/img/wiwiz.gif"></img>
</td></tr>
</table>
<table width="99%" cellspacing="1" cellpadding="2" style="font-size:12px">
<tr align="center">
<td width="100%">
<table style="font-size:12px" width="98%">
<tr><td>
<font color="#ff1111">
本热点为计费WiFi热点。费率为：
3元/日
50元/月
</font>
</td></tr>
</table>
<table style="font-size:12px" width="100%">
<tr>
<td align="center">
在使用此网络之前，请您详细阅读使用条款。<br>
<textarea readonly rows="4" style="width:87%;font-size:12px">条款内容</textarea>
<br>
<input name="agree" id="agree" type="checkbox" value="1" checked />
<label for="agree">我完全同意此条款的内容。</label>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" cellspacing="1" cellpadding="4" style="font-size:12px">
<tr align="center">
<td width="100%">
<table style="font-size:12px">
<tr>
<td>用户名: </td>
<td>
<input name="username" id="username" type="text" value="" style="width:140px" />
</td>
</tr>
<tr>
<td>密码: </td>
<td>
<input name="pswd" id="pswd" type="password" style="width:140px" />
</td>
</tr>
</table>
<input name="remember" id="remember" type="checkbox" value="1"
checked /><label for="remember">下次自动登录</label>
<br><br>
<input type="button" name="login" id="login" value=" 立即开始使用此网络 " onclick="recordCookie(); WiwizStartAuth();" />
<br>
<br>
<font size="-1"><b><a href="#"
onclick="window.open('http://cp.wiwiz.com/as/s/viewhotspot/?gw_id='+
WiwizGetQueryParameter('gw_id')); return
false;">更多信息</a></font></b>
<br>
<br>
<font style="font-size:12px"><b>
<a href="/as/s/register/" target="_blank">注册</a> |
<a href="/as/s/remindpswd/" target="_blank">忘记密码?</a>
</b></font>
</td>
</tr>
</table>
</td></tr></table>
<br>
</center>
</form>
</body></html>