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

认证页面的截图

公交Wifi热点方案--利用Web认证页面实现广告投放_第1张图片

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

公交Wifi热点方案--利用Web认证页面实现广告投放_第2张图片

【以下是方案说明】

网页认证实现采用的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

参考下图：

公交Wifi热点方案--利用Web认证页面实现广告投放_第3张图片

 

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

公交Wifi热点方案--利用Web认证页面实现广告投放_第4张图片

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

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


index.jsp（综合处理）

 

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