失眠网 > 微信连wifi portal验证

微信连wifi portal验证

时间：2024-01-12 22:22:29

相关推荐

微信连wifi portal验证

创建公众账号门店

1.添加功能门店管理

2.创建门店

添加微信连Wi-Fi设备

完成后提交，获得门店Wi-Fi设备改造信息，包括：appId，shop_id，ssid，secretkey。

开发移动端Portal页面

微信连Wi-Fi流程

模块时序图

若无法看清图中文字，可先通过“图片另存为”将图片保存到本地，再放大查看。

1. 用户手动选择SSID，手机浏览器弹出Portal页面

2. Portal页面初始化时，向AC/AP请求移动端和AC/AP的MAC地址

移动设备在portal页中引用下述微信JSAPI，让原有Wi-Fi portal页具备呼起微信的能力：

调用JSAPI触发呼起微信客户端：

php获取微信返回的openId,tid,extend回调接口

public function auth(){ $gwId = $_GET["gwId"]; $openId = $_GET["openId"]; $extend= $_GET["extend"]; $tid= $_GET["tid"]; //获取openId添加到数据库获取该用户的token }

参数说明

3. 用户点击微信连Wi-Fi按钮，浏览器请求AC/AP临时放行

4. AC/AP临时放行移动端所有上网请求

可以wifidog中做防火墙策略临时放行微信所有的ip

http://xxx/callback/auth?httpCode=200?gwId=xxx&gwId=&extend=xxx&openId=xxx&tid=xxx

参数说明

5.浏览器生成ticket，发向微信Server

jsonpCallback({'success':true,'data':'weixin://connectToFreeWifi/?apKey=http%3A%2F%2Fmp.%2Fmp%2Fwifi%3Fq%3D47b33c80e2910d51&ticket=ba21685ba44144dc988fa02ec8254053'})

6. 连接成功

7. 跳转到商家主页可自己设置

Portal页面代码

<!DOCTYPE HTML><html><head lang="zh-CN"><meta charset="UTF-8"><title>微信连Wi-Fi</title><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="format-detection" content="telephone=no"><script type="text/javascript">/*** 微信连Wi-Fi协议3.1供运营商portal呼起微信浏览器使用*/var loadIframe = null;var noResponse = null;var callUpTimestamp = 0;function putNoResponse(ev){clearTimeout(noResponse);}function errorJump(){var now = new Date().getTime();if((now - callUpTimestamp) > 4*1000){return;}alert('该浏览器不支持自动跳转微信请手动打开微信\n如果已跳转请忽略此提示');}myHandler = function(error) {errorJump();};function createIframe(){var iframe = document.createElement("iframe");iframe.style.cssText = "display:none;width:0px;height:0px;";document.body.appendChild(iframe);loadIframe = iframe;}//注册回调函数function jsonpCallback(result){if(result && result.success){alert('WeChat will call up : ' + result.success + ' data:' + result.data);var ua=navigator.userAgent;if (ua.indexOf("iPhone") != -1 ||ua.indexOf("iPod")!=-1||ua.indexOf("iPad") != -1) { //iPhonedocument.location = result.data;}else{if('false'=='true'){alert('[强制]该浏览器不支持自动跳转微信请手动打开微信\n如果已跳转请忽略此提示');return;}createIframe();callUpTimestamp = new Date().getTime();loadIframe.src=result.data;noResponse = setTimeout(function(){errorJump();},3000);}}else if(result && !result.success){alert(result.data);}}function Wechat_GotoRedirect(appId, extend, timestamp, sign, shopId, authUrl, mac, ssid, bssid){//将回调函数名称带到服务器端var url = "https://wifi./operator/callWechatBrowser.xhtml?appId=" + appId+ "&extend=" + extend+ "×tamp=" + timestamp+ "&sign=" + sign;//如果sign后面的参数有值，则是新3.1发起的流程if(authUrl && shopId){url = "https://wifi./operator/callWechat.xhtml?appId=" + appId+ "&extend=" + extend+ "×tamp=" + timestamp+ "&sign=" + sign+ "&shopId=" + shopId+ "&authUrl=" + encodeURIComponent(authUrl)+ "&mac=" + mac+ "&ssid=" + ssid+ "&bssid=" + bssid;}//通过dom操作创建script节点实现异步请求var script = document.createElement('script');script.setAttribute('src', url);document.getElementsByTagName('head')[0].appendChild(script);}</script><link rel="stylesheet" href="https://wifi./resources/css/style-simple-follow.css"/></head><body class="mod-simple-follow"><div class="mod-simple-follow-page"><div class="mod-simple-follow-page__banner"><img class="mod-simple-follow-page__banner-bg" src="https://wifi./resources/images/background.jpg" alt=""/><div class="mod-simple-follow-page__img-shadow"></div><div class="mod-simple-follow-page__logo"><img class="mod-simple-follow-page__logo-img" src="https://wifi./resources/images/t.weixin.logo.png" alt=""/><p class="mod-simple-follow-page__logo-name"></p><p class="mod-simple-follow-page__logo-welcome">欢迎您</p></div></div><div class="mod-simple-follow-page__attention"><p class="mod-simple-follow-page__attention-txt">欢迎使用微信连Wi-Fi</p><a class="mod-simple-follow-page__attention-btn" οnclick="callWechatBrowser()">一键打开微信连Wi-Fi2</a></div></div></body><script type="text/javascript" src="md5.js"></script><pre name="code" class="javascript"><script type="text/javascript">var appId= "wx1bxxxxx33e";var secretkey= "9cf2exxxxxxx0c237a";var extend = "shandian";//开发者自定义参数集合var timestamp= new Date().getTime();//时间戳(毫秒)var shop_id = "819xxx52"; //AP设备所在门店的IDvar authUrl = "http://xxx/callback/auth?httpCode=200?gwId=xxx"; //服务器回调地址 gwId当前连接的路由的设备编号var mac = "3c:91:57:c2:cc:af"; //用户手机mac地址安卓设备必需var ssid = "A01-S001-R044"; //AP设备信号名称，非必须var bssid= "00:a0:b1:4c:a1:c5"; //AP设备mac地址，非必须function callWechatBrowser(){var sign = $.md5(</span>appId + extend + timestamp + shop_id + authUrl + mac + ssid + bssid + secretkey);Wechat_GotoRedirect(appId, extend, timestamp, sign, shop_id, authUrl, mac, ssid, bssid);}</script><script type="text/javascript">document.addEventListener('visibilitychange', putNoResponse, false);</script></html>

参考文档：

Wi-Fi硬件鉴权协议接口说明 - 微信公众平台开发者文档

微信公众平台开发(110) 微信连Wi-Fi

如果觉得《微信连wifi portal验证》对你有帮助，请点赞、收藏，并留下你的观点哦！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。