這是我們最近在做的一個公交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 (認證頁面)
- <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 style="font-size:14px">
- 點擊以下廣告後開始使用<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"));
- }
- %>