自定义WiWiz认证页面代码实现：支持Cookie与自动登录功能优化

作者：虚假爱情2502873563_918 | 来源：互联网 | 2024-10-30 14:06

针对WiWiz自带认证页面的不便之处，特别是缺乏Cookie支持导致每次认证需手动输入信息的问题，本文介绍了通过自定义认证页面代码实现支持Cookie与自动登录功能的方法，显著提升了用户体验。具体实现了记录和处理用户认证信息的功能，确保了认证过程的便捷性和高效性。

一直觉得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,  />   
     
    
   <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>

本文出自 “野兽技术博客” 博客，请务必保留此出处http://beastwu.blog.51cto.com/5091229/999708

推荐阅读

utf-8
Java: HttpClient 与 HtmlUnit 的比较

本文探讨了 Java 中 HttpClient 和 HtmlUnit 的区别，重点介绍了它们的功能和应用场景。 ... [详细]

蜡笔小新 2024-11-16 14:40:13
string
Cookie学习小结

Cookie学习小结 ... [详细]

蜡笔小新 2024-11-14 16:26:25
utf-8
深入解析HTML5字符集属性：charset与defaultCharset

本文将详细介绍HTML5中新增的字符集属性charset和defaultCharset，帮助开发者更好地理解和应用这些属性，以确保网页在不同环境下的正确显示。 ... [详细]

蜡笔小新 2024-11-13 11:09:46
string
从迷茫到收获：阿里腾讯实习Offer的求取之路

本文回顾了作者在求职阿里和腾讯实习生过程中，从最初的迷茫到最后成功获得Offer的心路历程。文中不仅分享了个人的面试经历，还提供了宝贵的面试准备建议和技巧。 ... [详细]

蜡笔小新 2024-11-22 19:32:32
io
解析 .NET 中的 AJAX 技术

Asynchronous JavaScript and XML (AJAX) 的流行很大程度上得益于 Google 在其产品如 Google Suggest 和 Google Maps 中的应用。本文将深入探讨 AJAX 在 .NET 环境下的工作原理及其实现方法。 ... [详细]

蜡笔小新 2024-11-22 18:18:57
header
Python3爬虫入门：pyspider的基本使用[python爬虫入门]

Python学习网有大量免费的Python入门教程，欢迎大家来学习。本文主要通过爬取去哪儿网的旅游攻略来给大家介绍pyspid ... [详细]

蜡笔小新 2024-11-22 18:00:41
数组
H5技术实现经典游戏《贪吃蛇》

本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术，我们将探讨如何构建这款游戏的两种主要玩法：积分闯关和无尽模式。 ... [详细]

蜡笔小新 2024-11-21 20:16:59
io
优化 DOM 以提升 JavaScript 性能

本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能，包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]

蜡笔小新 2024-11-21 18:16:19
spring
Beetl模板引擎初探

Beetl是一款先进的Java模板引擎，以其丰富的功能、直观的语法、卓越的性能和易于维护的特点著称。它不仅适用于高响应需求的大型网站，也适合功能复杂的CMS管理系统，提供了一种全新的模板开发体验。 ... [详细]

蜡笔小新 2024-11-21 16:57:10
string
阿里云 Aliplayer高级功能介绍(八)：安全播放

如何保障视频内容的安全，不被盗链、非法下载和传播，阿里云视频点播已经有一套完善的机 ... [详细]

蜡笔小新 2024-11-15 18:04:15
utf-8
网站访问全流程解析

本文详细介绍了从用户在浏览器中输入一个域名（如www.yy.com）到页面完全展示的整个过程，包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]

蜡笔小新 2024-11-12 18:13:16
match
DVWA学习笔记系列：深入理解CSRF攻击机制

DVWA学习笔记系列：深入理解CSRF攻击机制 ... [详细]

蜡笔小新 2024-11-11 13:19:51
match
Web应用与原生应用的区别及应用场景

本文探讨了Web应用（Web App）与原生应用（Native App）之间的主要差异，包括它们在开发、功能实现及版本管理等方面的不同特点，并分析了各自的优势与适用场景。 ... [详细]

蜡笔小新 2024-11-22 16:12:44
io
Fiddler 安装与配置指南

本文详细介绍了Fiddler的安装步骤及配置方法，旨在帮助用户顺利抓取用户Token。文章还涵盖了一些常见问题的解决方案，以确保安装过程顺利。 ... [详细]

蜡笔小新 2024-11-22 11:36:57
io
利用ChkBugReport工具分析Android Bugreport

本文介绍了如何使用开源工具ChkBugReport来解析和分析Android设备的Bugreport。ChkBugReport能够将复杂的Bugreport转换为易于阅读的HTML报告，并提供详细的图表和分析结论。 ... [详细]

蜡笔小新 2024-11-16 19:02:02

虚假爱情2502873563_918

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章