自定义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

推荐阅读

web
深入解析 MUI 开发中 plusReady 和 init 的区别

在使用 MUI 框架进行应用开发时，开发者常常会遇到 mui.init() 和 mui.plusReady() 这两个方法。本文将详细解释它们的区别及其在不同开发环境下的应用。 ... [详细]

蜡笔小新 2024-12-26 15:57:00
text
使用WebBrowser控件实现点击输入框显示图片验证码的方法

本文探讨了如何通过WebBrowser控件在用户点击输入框时自动显示图片验证码。该过程可能涉及JavaScript事件的触发与响应。 ... [详细]

蜡笔小新 2024-12-17 18:28:07
数组
深入理解Cookie与Session会话管理

本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息，以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制，解释其原理及应用场景。 ... [详细]

蜡笔小新 2024-12-27 18:20:43
数组
JavaScript 实战与基础案例解析

本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例，涵盖从入门到进阶的各个阶段，帮助读者全面提升JavaScript编程能力。 ... [详细]

蜡笔小新 2024-12-24 16:36:52
c语言
云屏系统：嵌入式GUI开发的新突破

云屏系统基于嵌入式微系统msOS，旨在解决当前嵌入式彩屏GUI编程中硬件要求高、软件开发复杂、界面效果不佳等问题。该系统通过结合MCU和Android技术，利用Html5+JavaScript实现高效、易用的图形用户界面开发，使嵌入式开发人员能够专注于业务逻辑。 ... [详细]

蜡笔小新 2024-12-20 03:01:10
web
CAS单点登录实现详解与案例分析

本文将详细介绍通过CAS（Central Authentication Service）实现单点登录的原理和步骤。CAS由耶鲁大学开发，旨在为多应用系统提供统一的身份认证服务。文中不仅涵盖了CAS的基本架构，还提供了具体的配置实例，帮助读者更好地理解和应用这一技术。 ... [详细]

蜡笔小新 2024-12-19 19:31:46
text
XWiki 数据模型开发指南

本文档不仅介绍XWiki作为一个增强版的wiki引擎，还深入探讨了其数据模型，该模型可在用户界面层面被充分利用。借助其强大的脚本能力，XWiki的数据模型支持从简单的应用到复杂的系统构建，几乎无需直接接触XWiki的核心组件。 ... [详细]

蜡笔小新 2024-12-17 16:41:27
text
如何使用JavaScript或jQuery检测文本框焦点状态和鼠标悬停事件

本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态，以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]

蜡笔小新 2024-12-27 21:33:33
text
DNN Community 和 Professional 版本的主要差异

本文详细解析了 DotNetNuke (DNN) 的两种主要版本：Community 和 Professional。通过对比两者的功能和附加组件，帮助用户选择最适合其需求的版本。 ... [详细]

蜡笔小新 2024-12-27 13:14:08
web
2023年全球运营商网络设备市场预计突破202亿美元

尽管某些细分市场如WAN优化表现不佳，但全球运营商路由器和交换机市场持续增长。根据最新研究，该市场预计在2023年达到202亿美元的规模。 ... [详细]

蜡笔小新 2024-12-27 12:44:44
web
libsodium 1.0.15 发布：引入重大不兼容更新

最新发布的 libsodium 1.0.15 版本带来了若干不兼容的变更，其中包括默认密码散列算法的更改和其他重要调整。 ... [详细]

蜡笔小新 2024-12-26 11:03:58
web
深入解析 Spring Security 用户认证机制

本文将详细介绍 Spring Security 中用户登录认证的核心流程，重点分析 AbstractAuthenticationProcessingFilter 和 AuthenticationManager 的工作原理。通过理解这些组件的实现，读者可以更好地掌握 Spring Security 的认证机制。 ... [详细]

蜡笔小新 2024-12-25 16:00:21
web
深入解析网站流量统计中的PV、UV和IP

本文详细探讨了网站流量统计中常用的三个关键指标：页面浏览量（PV）、独立访客数（UV）和独立IP数（IP）。通过分析这些指标的定义、计算方法及其应用场景，帮助网站运营者更好地理解用户行为，优化网站内容与用户体验。 ... [详细]

蜡笔小新 2024-12-24 23:33:04
数组
PHP 过滤器详解

本文深入探讨了 PHP 中的过滤器机制，包括常见的 $_SERVER 变量、filter_has_var() 函数、filter_id() 函数、filter_input() 函数及其数组形式、filter_list() 函数以及 filter_var() 和其数组形式。同时，详细介绍了各种过滤器的用途和用法。 ... [详细]

蜡笔小新 2024-12-23 19:05:02
shell
Ubuntu GamePack：专为游戏爱好者打造的Linux发行版

随着Linux系统在游戏领域的应用越来越广泛，许多Linux用户开始寻求在自己的系统上畅玩游戏的方法。UALinux，一家致力于推广GNU/Linux使用的乌克兰公司，推出了基于Ubuntu 16.04的Ubuntu GamePack，旨在为Linux用户提供一个游戏友好型的操作环境。 ... [详细]

蜡笔小新 2024-12-18 14:30:30

虚假爱情2502873563_918

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

Tags | 热门标签

RankList | 热门文章