自己做的wiwiz自定義認證頁面代碼，支持Cookie和自動登錄

原創 tiida2011 2018-09-12 03:13

一直覺得Wiwiz自帶的認證頁面不太方便，尤其是不支持Cookie，這樣每次認證時都需要手動輸入認證信息，會比較麻煩。
我利用自定義認證頁面的定製代碼，加入了記錄和處理Cookie的功能，用Javascript實現的。
這裏分享給大家，誰需要請拿去用吧。

認證頁面效果圖：

認證頁面HTML代碼：

  1. <html> 
  2. <head> 
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  4. <meta http-equiv="Pragma" content="no-cache"> 
  5. <meta http-equiv="Cache-Control" content="no-cache"> 
  6. <meta name="viewport" content="user-scalable=no, width=device-width" />   
  7.   
  8. <!-- 必須引入AuthPageScript.js --> 
  9. <script src="/as/AuthPageScript.js"></script> 
  10. <script> 
  11.  
  12.  
  13. /* 讀寫Cookie的函數 */ 
  14. function SetCookie(name,value) { 
  15.     var Days = 180; 
  16.     var exp  = new Date(); 
  17.     exp.setTime(exp.getTime() + Days*24*60*60*1000); 
  18.     document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
  19. } 
  20.  
  21. function getCookie(name) { 
  22.     var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); 
  23.     if(arr != null)  
  24.         return unescape(arr[2]);  
  25.     return ""; 
  26. } 
  27.  
  28. /* 用於在認證時記錄Cookie */ 
  29. function recordCookie() { 
  30.     if(document.getElementById("remember").checked == false) 
  31.         return; 
  32.     else { 
  33.         var u = document.getElementById("username").value; 
  34.         var p = document.getElementById("pswd").value; 
  35.          
  36.         SetCookie("wifi-user", u); 
  37.         SetCookie("wifi-pswd", p); 
  38.     } 
  39. } 
  40.  
  41. /* 頁面初始化是讀入Cookie並自動按下認證按鈕 */ 
  42. function doInit() { 
  43.     var u = getCookie("wifi-user"); 
  44.     var p = getCookie("wifi-pswd"); 
  45.      
  46.     if(u != "") { 
  47.         document.getElementById("username").value = u; 
  48.         document.getElementById("pswd").value = p; 
  49.          
  50.         document.getElementById("login").click(); 
  51.     } 
  52. } 
  53.   
  54. /* 回調函數。“獲取驗證碼”按鈕按下後，將自動調用此函數。可根據code值自行改寫該函數。 */ 
  55. function WiwizSmsVerifyMsg(code) { 
  56.     if      (code == "-1") { 
  57.         alert("手機號碼不可爲空!"); 
  58.     } else if(code == "0") { 
  59.         alert("驗證碼已通過短信發送至您的手機，請注意查收。然後請在認證頁面輸入驗證碼。"); 
  60.     } else if(code == "1") { 
  61.         alert("該熱點不允許進行手機號碼驗證。如有疑問請您聯繫熱點管理員。"); 
  62.     } else if(code == "2") { 
  63.         alert("該熱點不允許進行手機號碼驗證。如有疑問請您聯繫熱點管理員。"); 
  64.     } else if(code == "3") { 
  65.         alert("該手機號碼不允許進行驗證。如有疑問請您聯繫熱點管理員。"); 
  66.     } else if(code == "4") { 
  67.         alert("手機號碼驗證過於頻繁，請稍後再試。"); 
  68.     } else if(code == "5") { 
  69.         alert("該手機號碼進行驗證次數已超過今日上限。"); 
  70.     } else if(code == "6") { 
  71.         alert("熱點認證服務已暫停，不可進行手機驗證。"); 
  72.     } else if(code == "7") { 
  73.         alert("該熱點手機驗證次數已超過配額。請聯繫熱點管理員。"); 
  74.     } else if(code == "8") { 
  75.         alert("請求已超時，請刷新認證頁面。"); 
  76.     } else if(code == "9") { 
  77.         alert("請使用上一次通過短信接收到的驗證碼。"); 
  78.     } else if(code == "99") { 
  79.         alert("驗證短信發送失敗。請檢查手機號碼的有效性，或聯繫熱點管理員。"); 
  80.     } else if(code == "999") { 
  81.         alert("系統異常，驗證短信發送失敗。請聯繫熱點管理員。"); 
  82.     } else { 
  83.         alert("系統異常。請聯繫熱點管理員。"); 
  84.     } 
  85. } 
  86.   
  87. /* 回調函數。“認證”按鈕按下後，如報錯將自動調用此函數。可根據code值自行改寫該函數。 */ 
  88. function WiwizAuthPageError(code) { 
  89.     if       (code == 1) { 
  90.         alert("您無法使用此網絡，除非您認同此協議條款。"); 
  91.     } else if(code == 2) { 
  92.         alert("請輸入用戶名。"); 
  93.     } else if(code == 3) { 
  94.         alert("用戶名或密碼錯誤。"); 
  95.     } else if(code == 4) { 
  96.         alert("電子招待券無效。"); 
  97.     } else if(code == 6) { 
  98.         alert("超過最大在線用戶數。"); 
  99.     } else if(code == 7) { 
  100.         alert("請輸入手機號碼。"); 
  101.     } else if(code == 32) { 
  102.         alert("賬戶存在異常，暫時鎖定中。"); 
  103.     } else if(code == 35) { 
  104.         alert("手機驗證碼錯誤或已超時。"); 
  105.     } else { 
  106.         alert("未知錯誤。錯誤碼："+ code); 
  107.     } 
  108. } 
  109. </script> 
  110. </head> 
  111. <body onload="doInit();"> 
  112.   
  113. <form name="myform" id="myform" action="" method="post">  
  114.   
  115. <center> 
  116.  
  117. <table width="320" bgcolor="#ffffff"> 
  118. <tr><td align="center"> 
  119. <br> 
  120. <table width="100%" cellspacing="2" cellpadding="2"> 
  121. <tr align="center"><td> 
  122. <font size="+2" color="#000000"><b>Wifi無線網絡 - 10M帶寬 </b> </font> 
  123. </td></tr> 
  124.  
  125. <tr align="center"><td> 
  126. <img src="/as/img/wiwiz.gif"></img> 
  127. </td></tr> 
  128. </table> 
  129.  
  130. <table width="99%" cellspacing="1" cellpadding="2" style="font-size:12px"> 
  131. <tr align="center"> 
  132.     <td width="100%">    
  133.         <table style="font-size:12px" width="98%"> 
  134.         <tr><td> 
  135.         <font color="#ff1111"> 
  136.         本熱點爲計費WiFi熱點。費率爲： 
  137.         3元/日 
  138.         50元/月 
  139.         </font> 
  140.         </td></tr> 
  141.         </table> 
  142.          
  143.  
  144.  
  145.         <table style="font-size:12px" width="100%"> 
  146.         <tr> 
  147.         <td align="center"> 
  148.              
  149.             在使用此網絡之前，請您詳細閱讀使用條款。<br> 
  150.             <textarea readonly rows="4" style="width:87%;font-size:12px">條款內容</textarea> 
  151.             <br> 
  152.             <!-- 參數: agree 代表認同協議 --> 
  153.             <input name="agree" id="agree" type="checkbox" value="1" checked /> 
  154.             <label for="agree">我完全同意此條款的內容。</label> 
  155.         </td> 
  156.         </tr> 
  157.         </table>     
  158.          
  159.     </td> 
  160. </tr> 
  161. </table> 
  162.  
  163. <table width="100%" cellspacing="1" cellpadding="4" style="font-size:12px"> 
  164. <tr align="center"> 
  165.     <td width="100%"> 
  166.      
  167.          
  168.         <table style="font-size:12px"> 
  169.         <tr> 
  170.             <td>用戶名: </td> 
  171.             <td><!-- 參數: username 代表用戶名 --> 
  172.                 <input name="username" id="username" type="text" value="" style="width:140px" /> 
  173.              
  174.             </td> 
  175.         </tr> 
  176.         <tr> 
  177.             <td>密碼: </td> 
  178.             <td><!-- 參數: pswd 代表密碼 --> 
  179.                 <input name="pswd" id="pswd" type="password" style="width:140px" /> 
  180.             </td> 
  181.         </tr> 
  182.         </table> 
  183.          
  184.         <input name="remember" id="remember" type="checkbox" value="1" checked /><label for="remember">下次自動登錄</label> 
  185.         <br><br> 
  186.         <!-- 用於開始觸發認證的按鈕，onclick事件必須調用WiwizStartAuth()函數 --> 
  187.         <!-- recordCookie函數用於處理記錄Cookie -->      
  188.         <input type="button" name="login" id="login" value="   立即開始使用此網絡   " onclick="recordCookie(); WiwizStartAuth();" /> 
  189.          
  190.         <br> 
  191.         <br> 
  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.         <br> 
  194.         <br> 
  195.         <font style="font-size:12px"><b> 
  196.         <a href="/as/s/register/" target="_blank">註冊</a> &nbsp; | &nbsp;  
  197.         <a href="/as/s/remindpswd/" target="_blank">忘記密碼?</a> 
  198.         </b></font>  
  199.     </td> 
  200. </tr> 
  201. </table> 
  202.  
  203. </td></tr></table> 
  204.  
  205. <br> 
  206. </center> 
  207.   
  208. </form> 
  209. </body></html> 

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

HTML基礎及應用視頻教程

xyduan 2019-02-23 00:39:39

純CSS動畫打造~會動的小球

狐狸菌 2019-02-22 23:53:35

JavaScript強化教程——Bootstrap 包的內容

zhanyingwang 2019-02-22 23:39:04

JavaScript強化教程——Bootstrap

zhanyingwang 2019-02-22 23:39:04

JavaScript強化教程——Bootstrap

zhanyingwang 2019-02-22 23:39:04

JavaScript強化教程——AngularJS 指令

zhanyingwang 2019-02-22 23:39:04

JavaScript強化教程——使用誤區

zhanyingwang 2019-02-22 23:39:04

JavaScript強化教程——保留關鍵字

zhanyingwang 2019-02-22 23:39:04

JavaScript強化教程——canvas

zhanyingwang 2019-02-22 23:39:04

JavaScript強化教程——函數參數

zhanyingwang 2019-02-22 23:38:47

JavaScript強化教程——語句

zhanyingwang 2019-02-22 23:38:42

JavaScript強化教程——AngularJS 表達式

zhanyingwang 2019-02-22 23:38:42

JavaScript強化教程——數組的基本處理函數

zhanyingwang 2019-02-22 23:38:42

移動視頻監控傳輸技術

ran_sy 2019-02-23 13:41:40

Wifi終端設備的漫遊主動性

ran_sy 2019-02-23 13:41:40