微信连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页具备呼起微信的能力:
<script type="text/javascript" src="https://wifi.weixin.qq.com/resources/js/wechatticket/wechatutil.js" ></script>
调用JSAPI触发呼起微信客户端:
<script type="text/javascript">
var appId = "wx1bxxxxx33e";
var secretkey = "9cf2exxxxxxx0c237a";var extend = "shandian"; //开发者自定义参数集合
var timestamp = new Date().getTime(); //时间戳(毫秒)
var shop_id = "819xxx52"; //AP设备所在门店的ID
var 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>
php获取微信返回的openId,tid,extend回调接口
public function auth(){
$gwId = $_GET["gwId"];
$openId = $_GET["openId"];
$extend= $_GET["extend"];
$tid= $_GET["tid"]; //获取openId添加到数据库获取该用户的token
}
参数说明
参数 | 是否必须 | 说明 |
---|---|---|
appId |
是 |
商家微信公众平台账号 |
extend |
是 |
extend里面可以放开发者需要的相关参数集合,最终将透传给运营商认证URL。extend参数只支持英文和数字,且长度不得超过300个字符。 |
timestamp |
是 |
时间戳使用毫秒 |
sign |
是 |
请求参数签名,具体计算方法见下方说明 |
shop_id |
是 |
AP设备所在门店的ID(微信公众平台门店) |
authUrl |
是 |
认证服务端URL,微信客户端将把用户微信身份信息向此URL提交并获得认证放行 |
mac |
安卓设备必需 |
用户手机mac地址,格式冒号分隔,字符长度17个,并且字母小写,例如:00:1f:7a:ad:5c:a8 |
ssid |
否 |
AP设备的信号名称 |
bssid |
否 |
无线网络设备的无线mac地址,格式冒号分隔,字符长度17个,并且字母小写,例如:00:1f:7a:ad:5c:a8 |
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
参数说明
参数 | 说明 |
---|---|
extend | 为上文中调用呼起微信JSAPI时传递的extend参数,这里原样回传给商家主页 |
openId | 用户的微信openId |
tid | 为加密后的用户手机号码(仅作网监部门备案使用) |
5. 浏览器生成ticket,发向微信Server
jsonpCallback({'success':true,'data':'weixin://connectToFreeWifi/?apKey=http%3A%2F%2Fmp.weixin.qq.com%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.weixin.qq.com/operator/callWechatBrowser.xhtml?appId=" + appId+ "&extend=" + extend+ "×tamp=" + timestamp+ "&sign=" + sign;//如果sign后面的参数有值,则是新3.1发起的流程if(authUrl && shopId){url = "https://wifi.weixin.qq.com/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.weixin.qq.com/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.weixin.qq.com/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.weixin.qq.com/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验证相关推荐
- 检测wifi是否需要portal验证 公共场所wifi验证
何为wifi portal验证? 平时在商场,咖啡厅,银行等公共场所,我们手机提示:有可用WLAN.这些WIFI可以直接连接,不需要密码,但需要我们手动在手机网页上进行验证,一般是输入一个手机号码,点 ...
- 检測wifi是否须要portal验证 公共场所wifi验证
何为wifi portal验证? 平时在商场,咖啡厅,银行等公共场所.我们手机提示:有可用WLAN.这些WIFI能够直接连接,不须要password,但须要我们手动在手机网页上进行验证,通常是输入一个 ...
- 微信公众平台开发(110) 微信连Wi-Fi
微信连Wi-Fi是为商家的线下场所提供一套完整和便捷的微信连Wi-Fi的方案.商家接入微信连Wi-Fi后,顾客无需输入繁琐的Wi-Fi密码,通过微信扫二维码等方式即可快速上网.微信连Wi-Fi还帮助商 ...
- 新版微信认证——微信连wifi上网设置教程
l 微信公众平台准备 1.打开浏览器进入微信公众平台①,如果没有公众平台账号,请自行申请②.填写完账号密码后登陆即可. 2. 公众平台新账号或者是没有微信连WiFi功能的公众号,请点击添加功能插 ...
- 为Jfinal-weixin SDK添加微信连WiFi成功通知事件
2019独角兽企业重金招聘Python工程师标准>>> 1.在event包中添加InWifiConnectedEvent类: package com.jfinal.weixin.sd ...
- 将普通路由器设置成微信连WiFi路由器的方法
本文介绍将家用普通路由器设置成微信连WiFi路由器的方法. 1. 登录路由器后台,找到无线网络的SSID名称和密码的地方.将SSID和密码分别设置为: SSID: FreeWiFi 密码: WX123 ...
- 转载收藏之用 - 微信公众平台开发教程(三):微信公众平台开发验证
要对接微信公众平台的"开发模式",即对接到自己的网站程序,必须在注册成功之后(见Senparc.Weixin.MP SDK 微信公众平台开发教程(一):微信公众平台注册),等待官方 ...
- 微信连接WIFI并关注公众号的方法
分享一个改造路由器来实现微信连wifi关注公众已经成为一种高效的引流方法. 前提是先有自己的路由器.认证的公众号(服务号或订阅号).开通过门店小程序. 1.进入公众号后以此选择"微信连wif ...
- php 接入微信 验证,PHP实现微信公众平台企业号验证接口
这篇文章主要介绍了PHP编程之微信公众平台企业号验证接口,是通过回调操作实现的企业号验证功能接口,需要的朋友可以参考下 本文实例讲述了PHP微信公众平台企业号验证接口.分享给大家供大家参考,具体如下: ...
- 转 - 微信连WIFI,背后大棋局
不久前,微信公众平台新添了一个功能插件,即"微信连WiFi".当微信用户接近加入该计划的商户时,用户只要通过微信就能登录该商户的WiFi,绕开了输入密码,或者关注商户公众号获取验证 ...
最新文章
- 企业级nginx服务优化(一)
- 判断一个单链表中是否有环
- C:简单的学生信息处理程序实现
- MySQL分区表概念以及优缺点
- DVS/DVR常见的监控名词
- 理解ORACLE数据库字符集
- MySQL coalesce()函数
- k歌的录音伴奏合成技术如何实现_K歌神器,用唱吧麦克风攀登天籁高峰
- 腾讯地图api修改信息窗口样式_ThingJS通过地图的信息窗口展示常见数据
- NIPS放榜:谷歌占1/10,微软DeepMind打平,中国小哥4篇一作全球领先
- TCP的三次握手和四次挥手(超详解)
- python清空屏幕代码_python代码怎样清屏
- 最新!中科院分区发布2021年期刊重大调整
- 亿图图示(试用版)无水印导出流程图【2021最新】
- 推特Twitter API获取关注者名单
- 手机点击出现蓝色区域方块
- MacBook重启之后,外接显示器不亮的解决方法
- Android中高级面试必知必会,绝对干货
- 资深猎头解密:什么样的简历一投就中?
- 关于kafka数据丢失场景的一次激烈讨论.... |文末送书