公交Wifi热点方案--利用Web认证页面实现广告投放

这是我们最近在做的一个公交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. document.getElementById("ADZone").innerHTML = "<a href=\"javascript:showAdAfterAuth('"+ adUrl +"')\"><img src=\'#\'" /span>+ adImg +"' border='0' /></a>"
  31.  
  32. <% 
  33.  
  34. //点击广告后在Session中存储广告链接,然后回调WiwizStartAuth()函数进行认证 
  35. if(request.getParameter("seturl") != null) { 
  36.         session.setAttribute("seturl", request.getParameter("seturl")); 
  37.         out.print("WiwizStartAuth();"); 
  38.  
  39. //认证后从Session中读取广告链接并跳转 
  40. if(request.getParameter("start") != null) {         
  41.         response.sendRedirect((String) session.getAttribute("seturl")); 
  42. %> 

 

你可能感兴趣的:(广告,wifi,公交,无线,Wiwiz,Web认证)