一直觉得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" />
- <!-- 必须引入AuthPageScript.js -->
- <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>
- <!-- 参数: agree 代表认同协议 -->
- <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><!-- 参数: username 代表用户名 -->
- <input name="username" id="username" type="text" value="" style="width:140px" />
- </td>
- </tr>
- <tr>
- <td>密码: </td>
- <td><!-- 参数: pswd 代表密码 -->
- <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>
- <!-- 用于开始触发认证的按钮,onclick事件必须调用WiwizStartAuth()函数 -->
- <!-- recordCookie函数用于处理记录Cookie -->
- <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>
转载于:https://blog.51cto.com/beastwu/999708