您的位置：首页 > 其它

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

2012-11-13 22:16 435 查看

这是我们最近在做的一个公交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=\'#\'" /span>+ 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"));
}
%>

本文出自 “野兽技术博客” 博客，请务必保留此出处http://beastwu.blog.51cto.com/5091229/1059367

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航