这是我们最近在做的一个公交Wifi系统的一个方案。

认证页面的截图

点击广告图片后进入广告目标地址（测试版的广告地址是百度移动版主页）

【以下是方案说明】

网页认证实现采用的Wiwiz，自定义认证页面的web程序放在自己的服务器上（测试版地址是192.168.1.10）。

设置方法如下：
设置“自定义认证页面URL”为http://192.168.1.10:8080/showAD/adwifi.htm
“自定义认证后跳转URL”为http://192.168.1.10:8080/showAD/index.jsp?start=1

参考下图：

 

还要将自己的系统服务器的域名或者IP加入到地址白名单。

以下是程序源代码：
adwifi.htm (认证页面)

 
  
  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. <!-- 必须引入AuthPageScript.js --> 
  7. <script src="/as/AuthPageScript.js"></script> 
  8. </head> 
  9. <body> 
  10. <form name="myform" id="myform" action="" method="post"> 
  11. <center> 
  12. <b>欢迎使用公交WiFi热点</b> 
  13. <br><br> 
  14. <font style="font-size:14px"> 
  15. 点击以下广告后开始使用<br> 
  16. </font> 
  17. <span id="ADZone"></span> 
  18.  
  19. <script src="index.jsp?script=1"></script> 
  20. <br> 
  21.  
  22. </center> 
  23. </form> 
  24. </body></html> 
 
  

 index.jsp（综合处理）
 
  
 
 
  
 
  
  1. <% 
  2. //嵌入到认证页面的Javascript代码 
  3. if(request.getParameter("script") != null) { 
  4. %> 
  5.  
  6. //全部广告图片与广告链接 
  7. var allAD = new Array( 
  8. ["ad/ad1.png", "http://m.baidu.com"], 
  9. ["ad/ad2.png", "http://m.baidu.com"], 
  10. ["ad/ad3.png", "http://m.baidu.com"], 
  11. ["ad/ad4.png", "http://m.baidu.com"] 
  12. ); 
  13.  
  14. //从allAD数组中随机选取显示广告 
  15. var x = Math.floor(Math.random()* (allAD.length)); 
  16. var adImg = allAD[x][0]; 
  17. var adUrl = allAD[x][1]; 
  18.  
  19. var app = "<%=request.getRequestURL().toString()%>"; 
  20.  
  21. //点击广告之后调用此函数 
  22. function showAdAfterAuth(url) {         
  23.         var _src = app + "?seturl="+ encodeURIComponent(url) + "&r=" + Math.random(); 
  24.          
  25.         var script = document.createElement('script'); 
  26.         script.setAttribute('src', _src);   
  27.         document.getElementsByTagName('head')[0].appendChild(script); 
  28. } 
  29.  
  30. //显示广告 
  31. document.getElementById("ADZone").innerHTML = "<a href=\"javascript:showAdAfterAuth('"+ adUrl +"')\"><img src='"+ adImg +"' border='0' /></a>"; 
  32.  
  33. <% 
  34. } 
  35.  
  36. //点击广告后在Session中存储广告链接，然后回调WiwizStartAuth()函数进行认证 
  37. if(request.getParameter("seturl") != null) { 
  38.         session.setAttribute("seturl", request.getParameter("seturl")); 
  39.         out.print("WiwizStartAuth();"); 
  40. } 
  41.  
  42. //认证后从Session中读取广告链接并跳转 
  43. if(request.getParameter("start") != null) {         
  44.         response.sendRedirect((String) session.getAttribute("seturl")); 
  45. } 
  46. %>