广告路由器判断指定手机浏览器自动认证上网教程 附代码

  • 广告路由器判断指定手机浏览器自动认证上网教程 附代码已关闭评论
  • 2,146 views
  • A+
所属分类:技术分享
点击领取阿里云1000元优惠券

说说应用过程,下面用QQ手机浏览器为例。在路由器搭建免费WIFI,用户连接免费WIFI后,使用QQ手机浏览器点击打开任意网页即可自动通过认证并上网,有的手机会自动打开认证网页,如果使用其他浏览器则自动跳转到认证页面,设置24小时认证一次即可保证用户每天使用QQ浏览器了。

说说需求,这功能可用于微信吸粉、广告推广、推广手机浏览器等,应用环境:可用户网吧、店铺、街边、酒店、车站等人多的地方。下面这个是来群网 www.laiqun.cn 做的一个演示页面,大家可以打开看一下,地址:https://www.laiqun.cn/freewifi

广告路由器判断指定手机浏览器自动认证上网教程 附代码

点击看大图

此页面为认证页面,也就是连接免费WIFI后使用其他手机浏览器打开网页的时候跳转的引导安装手机浏览器页面。点击 免费上网 会下载 QQ手机浏览器,点 试用网络 会有一段时间免费使用,试用到期后会自动断开。我们指定的是使用QQ手机浏览器打开的,如果使用QQ手机浏览器打开会出现下面这个页面。

广告路由器判断指定手机浏览器自动认证上网教程 附代码

实现此功能的原理是通过手机浏览器UA来判断,全称:userAgent,如果不懂可以百度搜索一下。

如果要实现这种模式,需要准备下面的东西:

1. 广告路由器点击这里

2. 软路由程序(我使用的是爱快,点击这里

3. 网站服务器 (推荐:点击这里

4. 判断QQ手机浏览器的源码 (下面提供)

好了,页面介绍就到这里,下面是代码。

一、判断手机浏览器UA代码

  1. <script language="javascript" type="text/javascript">
  2. if(navigator.userAgent.indexOf('MQQBrowser')==-1){
  3.   window.location.replace("https://www.laiqun.cn/freewifi/freewifi.html");
  4. }
  5. else
  6. {
  7. window.location.href="http://10.1.0.6/Action/webauth-up?type=7";
  8. }
  9. </script>

使用方法:在电脑桌面创建一个 index.html 文件,然后使用notepad++打开,粘贴上面的代码到 index.html 里面,把 https://www.laiqun.cn/freewifi/freewifi.html 修改成自己的引导页面,再把 http://10.1.0.6/Action/webauth-up?type=7 换成你的一键认证页面,然后保存。

二、引导页面源码:

  1. <!DOCTYPE html>
  2. <!-- saved from url=(0018)http://www.laiqun.cn -->
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=GBK">
  6. <meta charset="gb2312">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
  8. <meta name="description" content="">
  9. <meta name="author" content="">
  10. <title>免费无线</title>
  11. <link href="CSS文件链接" rel="stylesheet" type="text/css">
  12. <!-- Custom styles for this template -->
  13. </head>
  14. <body screen_capture_injected="true">
  15. <div class="wrapper">
  16.   <!-- header -->
  17.   <header class="header clearfix">
  18.     <span class="userName">完成最后一步,即可永久免费上网啦!</span>
  19.   </header>
  20.   <!-- header end -->
  21.   <section class="main-section clearfix">
  22.       <div class="soft_detail">
  23.           <div class="soft_info">
  24.               <span style="color:#E53333;"><center>免费上网,只需两步</center></span>
  25. <center>
  26. <p>1.点免费上网,下载安装并打开QQ浏览器;</p>
  27. <p>2.在QQ浏览器打开任意网页即可免费上网;</p>
  28. <p>3.每天只认证一次,请打开QQ浏览器认证;</p>
  29. <p>4.注意:此免费WIFI网络与QQ浏览器绑定;</p>
  30. <p>使用其他手机浏览器无法通过认证,切记!</p>
  31. </center>
  32.           </div>
  33.         <center>
  34.     <a href="手机浏览器下载地址" ><img src="图片地址" ></a>
  35.     <a href="免费试用地址" ><img src="免费试用按钮图片地址" ></a>
  36.          </center>
  37.       </div>
  38. <br>
  39.       <ul class="resList mb0">
  40.        <hr>
  41.         <center>
  42.         <a target="_blank" href="广告区链接 "><img src="广告区图片链接" width="96%" height="100" border="1"></a>
  43.         </center>
  44.       </ul>
  45.   </section>
  46.   <!-- footer -->
  47.   <footer class="footer">
  48.   <center>连接即表示同意:<A tabIndex=-1 target=_blank style = "color:#FF0000" href="协议链接">WIFI安全上网协议(点击查看)</A></center>
  49.   </footer>
  50.   <!-- footer end -->
  51. </div>
  52. </body>
  53. </html>

使用方法:在电脑桌面创建一个 freewifi.html 文件,然后使用notepad++打开,粘贴上面的代码到 freewifi.html 里面,把代码里面标注的位置换上你的链接,然后点击保存。修改完成后把这两个 html 文件上传到网站服务器即可。

如果不懂创建,请看文件末端的附件,小编会打包的。

路由器设置:

打开爱快路由后台:https://yun.ikuai8.com,选择路由器列表,再选择 设备管理。

广告路由器判断指定手机浏览器自动认证上网教程 附代码

找到 认证配置—自定义链接设置,把你的认证地址写上并把一键认证按钮勾上,点击下面的 完成并生效 即可。

广告路由器判断指定手机浏览器自动认证上网教程 附代码

好了,教程就到这里,如果有不明白的地方,请联系小编哦!

文件下载 WIFI认证上网源码
下载地址 查看演示
  • 微信公众号
  • 微信扫一扫关注我们
  • weinxin
  • 微信小程序
  • 微信扫一扫访问小程序
  • weinxin