[个人实战] 分享WiFi认证页面代码 -- 点击广告通过认证

[复制链接]

tiida2011

775 回帖	6099 积分	1305 小时在线时间

中校

注册时间: 2011-4-12

金币: 4969 个

威望: 21 个

荣誉: 3 个

发消息

累计签到：32 天
连续签到：0 天
[LV.50]初入江湖

发表于 2012-11-13 21:58 |显示全部楼层

本帖最后由 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">
<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"));
}
%>