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

认证页面效果图：
自己做的wiwiz自定义认证页面代码，支持Cookie和自动登录_第1张图片

认证页面HTML代码：

   
   
   
   
    
    
    
    
    
  1. <html> 
    2. 
    
    
    
    
  2. <head> 
    3. 
    
    
    
    
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    4. 
    
    
    
    
  4. <meta http-equiv="Pragma" content="no-cache"> 
    5. 
    
    
    
    
  5. <meta http-equiv="Cache-Control" content="no-cache"> 
    6. 
    
    
    
    
  6. <meta name="viewport" content="user-scalable=no, width=device-width" />   
    7. 
    
    
    
    
  7.   
    8. 
    
    
    
    
  8.  
    9. 
    
    
    
    
  9. <script src="/as/AuthPageScript.js">script> 
    10. 
    
    
    
    
  10. <script> 
    11. 
    
    
    
    
  11.  
    12. 
    
    
    
    
  12.  
    13. 
    
    
    
    
  13. /* 读写Cookie的函数 */ 
    14. 
    
    
    
    
  14. function SetCookie(name,value) { 
    15. 
    
    
    
    
  15.     var Days = 180; 
    16. 
    
    
    
    
  16.     var exp  = new Date(); 
    17. 
    
    
    
    
  17.     exp.setTime(exp.getTime() + Days*24*60*60*1000); 
    18. 
    
    
    
    
  18.     document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
    19. 
    
    
    
    
  19. } 
    20. 
    
    
    
    
  20.  
    21. 
    
    
    
    
  21. function getCookie(name) { 
    22. 
    
    
    
    
  22.     var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); 
    23. 
    
    
    
    
  23.     if(arr != null)  
    24. 
    
    
    
    
  24.         return unescape(arr[2]);  
    25. 
    
    
    
    
  25.     return ""; 
    26. 
    
    
    
    
  26. } 
    27. 
    
    
    
    
  27.  
    28. 
    
    
    
    
  28. /* 用于在认证时记录Cookie */ 
    29. 
    
    
    
    
  29. function recordCookie() { 
    30. 
    
    
    
    
  30.     if(document.getElementById("remember").checked == false) 
    31. 
    
    
    
    
  31.         return; 
    32. 
    
    
    
    
  32.     else { 
    33. 
    
    
    
    
  33.         var u = document.getElementById("username").value; 
    34. 
    
    
    
    
  34.         var p = document.getElementById("pswd").value; 
    35. 
    
    
    
    
  35.          
    36. 
    
    
    
    
  36.         SetCookie("wifi-user", u); 
    37. 
    
    
    
    
  37.         SetCookie("wifi-pswd", p); 
    38. 
    
    
    
    
  38.     } 
    39. 
    
    
    
    
  39. } 
    40. 
    
    
    
    
  40.  
    41. 
    
    
    
    
  41. /* 页面初始化是读入Cookie并自动按下认证按钮 */ 
    42. 
    
    
    
    
  42. function doInit() { 
    43. 
    
    
    
    
  43.     var u = getCookie("wifi-user"); 
    44. 
    
    
    
    
  44.     var p = getCookie("wifi-pswd"); 
    45. 
    
    
    
    
  45.      
    46. 
    
    
    
    
  46.     if(u != "") { 
    47. 
    
    
    
    
  47.         document.getElementById("username").value = u; 
    48. 
    
    
    
    
  48.         document.getElementById("pswd").value = p; 
    49. 
    
    
    
    
  49.          
    50. 
    
    
    
    
  50.         document.getElementById("login").click(); 
    51. 
    
    
    
    
  51.     } 
    52. 
    
    
    
    
  52. } 
    53. 
    
    
    
    
  53.   
    54. 
    
    
    
    
  54. /* 回调函数。“获取验证码”按钮按下后，将自动调用此函数。可根据code值自行改写该函数。 */ 
    55. 
    
    
    
    
  55. function WiwizSmsVerifyMsg(code) { 
    56. 
    
    
    
    
  56.     if      (code == "-1") { 
    57. 
    
    
    
    
  57.         alert("手机号码不可为空!"); 
    58. 
    
    
    
    
  58.     } else if(code == "0") { 
    59. 
    
    
    
    
  59.         alert("验证码已通过短信发送至您的手机，请注意查收。然后请在认证页面输入验证码。"); 
    60. 
    
    
    
    
  60.     } else if(code == "1") { 
    61. 
    
    
    
    
  61.         alert("该热点不允许进行手机号码验证。如有疑问请您联系热点管理员。"); 
    62. 
    
    
    
    
  62.     } else if(code == "2") { 
    63. 
    
    
    
    
  63.         alert("该热点不允许进行手机号码验证。如有疑问请您联系热点管理员。"); 
    64. 
    
    
    
    
  64.     } else if(code == "3") { 
    65. 
    
    
    
    
  65.         alert("该手机号码不允许进行验证。如有疑问请您联系热点管理员。"); 
    66. 
    
    
    
    
  66.     } else if(code == "4") { 
    67. 
    
    
    
    
  67.         alert("手机号码验证过于频繁，请稍后再试。"); 
    68. 
    
    
    
    
  68.     } else if(code == "5") { 
    69. 
    
    
    
    
  69.         alert("该手机号码进行验证次数已超过今日上限。"); 
    70. 
    
    
    
    
  70.     } else if(code == "6") { 
    71. 
    
    
    
    
  71.         alert("热点认证服务已暂停，不可进行手机验证。"); 
    72. 
    
    
    
    
  72.     } else if(code == "7") { 
    73. 
    
    
    
    
  73.         alert("该热点手机验证次数已超过配额。请联系热点管理员。"); 
    74. 
    
    
    
    
  74.     } else if(code == "8") { 
    75. 
    
    
    
    
  75.         alert("请求已超时，请刷新认证页面。"); 
    76. 
    
    
    
    
  76.     } else if(code == "9") { 
    77. 
    
    
    
    
  77.         alert("请使用上一次通过短信接收到的验证码。"); 
    78. 
    
    
    
    
  78.     } else if(code == "99") { 
    79. 
    
    
    
    
  79.         alert("验证短信发送失败。请检查手机号码的有效性，或联系热点管理员。"); 
    80. 
    
    
    
    
  80.     } else if(code == "999") { 
    81. 
    
    
    
    
  81.         alert("系统异常，验证短信发送失败。请联系热点管理员。"); 
    82. 
    
    
    
    
  82.     } else { 
    83. 
    
    
    
    
  83.         alert("系统异常。请联系热点管理员。"); 
    84. 
    
    
    
    
  84.     } 
    85. 
    
    
    
    
  85. } 
    86. 
    
    
    
    
  86.   
    87. 
    
    
    
    
  87. /* 回调函数。“认证”按钮按下后，如报错将自动调用此函数。可根据code值自行改写该函数。 */ 
    88. 
    
    
    
    
  88. function WiwizAuthPageError(code) { 
    89. 
    
    
    
    
  89.     if       (code == 1) { 
    90. 
    
    
    
    
  90.         alert("您无法使用此网络，除非您认同此协议条款。"); 
    91. 
    
    
    
    
  91.     } else if(code == 2) { 
    92. 
    
    
    
    
  92.         alert("请输入用户名。"); 
    93. 
    
    
    
    
  93.     } else if(code == 3) { 
    94. 
    
    
    
    
  94.         alert("用户名或密码错误。"); 
    95. 
    
    
    
    
  95.     } else if(code == 4) { 
    96. 
    
    
    
    
  96.         alert("电子招待券无效。"); 
    97. 
    
    
    
    
  97.     } else if(code == 6) { 
    98. 
    
    
    
    
  98.         alert("超过最大在线用户数。"); 
    99. 
    
    
    
    
  99.     } else if(code == 7) { 
    100. 
    
    
    
    
  100.         alert("请输入手机号码。"); 
    101. 
    
    
    
    
  101.     } else if(code == 32) { 
    102. 
    
    
    
    
  102.         alert("账户存在异常，暂时锁定中。"); 
    103. 
    
    
    
    
  103.     } else if(code == 35) { 
    104. 
    
    
    
    
  104.         alert("手机验证码错误或已超时。"); 
    105. 
    
    
    
    
  105.     } else { 
    106. 
    
    
    
    
  106.         alert("未知错误。错误码："+ code); 
    107. 
    
    
    
    
  107.     } 
    108. 
    
    
    
    
  108. } 
    109. 
    
    
    
    
  109. script> 
    110. 
    
    
    
    
  110. head> 
    111. 
    
    
    
    
  111. <body onload="doInit();"> 
    112. 
    
    
    
    
  112.   
    113. 
    
    
    
    
  113. <form name="myform" id="myform" action="" method="post">  
    114. 
    
    
    
    
  114.   
    115. 
    
    
    
    
  115. <center> 
    116. 
    
    
    
    
  116.  
    117. 
    
    
    
    
  117. <table width="320" bgcolor="#ffffff"> 
    118. 
    
    
    
    
  118. <tr><td align="center"> 
    119. 
    
    
    
    
  119. <br> 
    120. 
    
    
    
    
  120. <table width="100%" cellspacing="2" cellpadding="2"> 
    121. 
    
    
    
    
  121. <tr align="center"><td> 
    122. 
    
    
    
    
  122. <font size="+2" color="#000000"><b>Wifi无线网络 - 10M带宽 b> font> 
    123. 
    
    
    
    
  123. td>tr> 
    124. 
    
    
    
    
  124.  
    125. 
    
    
    
    
  125. <tr align="center"><td> 
    126. 
    
    
    
    
  126. <img src="/as/img/wiwiz.gif">img> 
    127. 
    
    
    
    
  127. td>tr> 
    128. 
    
    
    
    
  128. table> 
    129. 
    
    
    
    
  129.  
    130. 
    
    
    
    
  130. <table width="99%" cellspacing="1" cellpadding="2" style="font-size:12px"> 
    131. 
    
    
    
    
  131. <tr align="center"> 
    132. 
    
    
    
    
  132.     <td width="100%">    
    133. 
    
    
    
    
  133.         <table style="font-size:12px" width="98%"> 
    134. 
    
    
    
    
  134.         <tr><td> 
    135. 
    
    
    
    
  135.         <font color="#ff1111"> 
    136. 
    
    
    
    
  136.         本热点为计费WiFi热点。费率为： 
    137. 
    
    
    
    
  137.         3元/日 
    138. 
    
    
    
    
  138.         50元/月 
    139. 
    
    
    
    
  139.         font> 
    140. 
    
    
    
    
  140.         td>tr> 
    141. 
    
    
    
    
  141.         table> 
    142. 
    
    
    
    
  142.          
    143. 
    
    
    
    
  143.  
    144. 
    
    
    
    
  144.  
    145. 
    
    
    
    
  145.         <table style="font-size:12px" width="100%"> 
    146. 
    
    
    
    
  146.         <tr> 
    147. 
    
    
    
    
  147.         <td align="center"> 
    148. 
    
    
    
    
  148.              
    149. 
    
    
    
    
  149.             在使用此网络之前，请您详细阅读使用条款。<br> 
    150. 
    
    
    
    
  150.             <textarea readonly rows="4" style="width:87%;font-size:12px">条款内容textarea> 
    151. 
    
    
    
    
  151.             <br> 
    152. 
    
    
    
    
  152.              
    153. 
    
    
    
    
  153.             <input name="agree" id="agree" type="checkbox" value="1" checked /> 
    154. 
    
    
    
    
  154.             <label for="agree">我完全同意此条款的内容。label> 
    155. 
    
    
    
    
  155.         td> 
    156. 
    
    
    
    
  156.         tr> 
    157. 
    
    
    
    
  157.         table>     
    158. 
    
    
    
    
  158.          
    159. 
    
    
    
    
  159.     td> 
    160. 
    
    
    
    
  160. tr> 
    161. 
    
    
    
    
  161. table> 
    162. 
    
    
    
    
  162.  
    163. 
    
    
    
    
  163. <table width="100%" cellspacing="1" cellpadding="4" style="font-size:12px"> 
    164. 
    
    
    
    
  164. <tr align="center"> 
    165. 
    
    
    
    
  165.     <td width="100%"> 
    166. 
    
    
    
    
  166.      
    167. 
    
    
    
    
  167.          
    168. 
    
    
    
    
  168.         <table style="font-size:12px"> 
    169. 
    
    
    
    
  169.         <tr> 
    170. 
    
    
    
    
  170.             <td>用户名: td> 
    171. 
    
    
    
    
  171.             <td> 
    172. 
    
    
    
    
  172.                 <input name="username" id="username" type="text" value="" style="width:140px" /> 
    173. 
    
    
    
    
  173.              
    174. 
    
    
    
    
  174.             td> 
    175. 
    
    
    
    
  175.         tr> 
    176. 
    
    
    
    
  176.         <tr> 
    177. 
    
    
    
    
  177.             <td>密码: td> 
    178. 
    
    
    
    
  178.             <td> 
    179. 
    
    
    
    
  179.                 <input name="pswd" id="pswd" type="password" style="width:140px" /> 
    180. 
    
    
    
    
  180.             td> 
    181. 
    
    
    
    
  181.         tr> 
    182. 
    
    
    
    
  182.         table> 
    183. 
    
    
    
    
  183.          
    184. 
    
    
    
    
  184.         <input name="remember" id="remember" type="checkbox" value="1" checked /><label for="remember">下次自动登录label> 
    185. 
    
    
    
    
  185.         <br><br> 
    186. 
    
    
    
    
  186.          
    187. 
    
    
    
    
  187.               
    188. 
    
    
    
    
  188.         <input type="button" name="login" id="login" value="   立即开始使用此网络   " onclick="recordCookie(); WiwizStartAuth();" /> 
    189. 
    
    
    
    
  189.          
    190. 
    
    
    
    
  190.         <br> 
    191. 
    
    
    
    
  191.         <br> 
    192. 
    
    
    
    
  192.         <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> 
    193. 
    
    
    
    
  193.         <br> 
    194. 
    
    
    
    
  194.         <br> 
    195. 
    
    
    
    
  195.         <font style="font-size:12px"><b> 
    196. 
    
    
    
    
  196.         <a href="/as/s/register/" target="_blank">注册a>   |    
    197. 
    
    
    
    
  197.         <a href="/as/s/remindpswd/" target="_blank">忘记密码?a> 
    198. 
    
    
    
    
  198.         b>font>  
    199. 
    
    
    
    
  199.     td> 
    200. 
    
    
    
    
  200. tr> 
    201. 
    
    
    
    
  201. table> 
    202. 
    
    
    
    
  202.  
    203. 
    
    
    
    
  203. td>tr>table> 
    204. 
    
    
    
    
  204.  
    205. 
    
    
    
    
  205. <br> 
    206. 
    
    
    
    
  206. center> 
    207. 
    
    
    
    
  207.   
    208. 
    
    
    
    
  208. form> 
    209. 
    
    
    
    
  209. body>html> 
    210.