tiida2011 2012-11-13 21:59 这是我们最近在做的一个公交Wifi系统的一个方案。
认证页面的截图(在PC上进行的测试)
点击广告图片后进入广告目标地址(测试版的广告地址是百度移动版主页)
【以下是方案说明】网页认证实现采用的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 (认证页面) html head meta http-equiv= Content-Type content= text/html; charset=UTF-8 meta http-equiv= Pragma content= no-cache meta http-equiv= Cache-Control content= no-cache !– 必须引入AuthPageScript.js — script src= /as/AuthPageScript.js /script /head body form name= myform id= myform action= method= post center b 欢迎使用公交WiFi热点 /b br br font 点击以下广告后开始使用 br /font span id= ADZone /span script src= index.jsp?script=1 /script br /center /form /body /html 复制代码
index.jsp(综合处理) %//嵌入到认证页面的Javascript代码if(request.getParameter( script ) != null) {% //全部广告图片与广告链接var allAD = new Array([ ad/ad1.png , http://m.baidu.com ],[ ad/ad2.png , http://m.baidu.com ],[ ad/ad3.png , http://m.baidu.com ],[ ad/ad4.png , http://m.baidu.com ]);//从allAD数组中随机选取显示广告var x = Math.floor(Math.random()* (allAD.length));var adImg = allAD[x][0];var adUrl = allAD[x][1];var app = %=request.getRequestURL().toString()% //点击广告之后调用此函数function showAdAfterAuth(url) { var _src = app + ?seturl= + encodeURIComponent(url) + r= + Math.random(); var script = document.createElement(‘script’); script.setAttribute(‘src’, _src); document.getElementsByTagName(‘head’)[0].appendChild(script);}//显示广告document.getElementById( ADZone ).innerHTML = a href= javascript:showAdAfterAuth(‘ + adUrl + ‘) img src=’ + adImg + ‘ border=’0’ / /a %}//点击广告后在Session中存储广告链接,然后回调WiwizStartAuth()函数进行认证if(request.getParameter( seturl ) != null) { session.setAttribute( seturl , request.getParameter( seturl )); out.print( WiwizStartAuth(); }//认证后从Session中读取广告链接并跳转if(request.getParameter( start ) != null) { response.sendRedirect((String) session.getAttribute( seturl ));}% 复制代码