微信连wifi认证
官网
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1444894086
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。
https://blog.csdn.net/u011650048/article/details/50469768
https://service.tp-link.com.cn/detail_article_3440.html
1 开一个微信门店小程序
2.创建一个门店
添加微信连Wi-Fi设备
完成后提交，获得门店Wi-Fi设备改造信息，包括：appId，shop_id，ssid，secretkey。
开发移动端Portal页面
微信连Wi-Fi流程
模块时序图
若无法看清图中文字，可先通过“图片另存为”将图片保存到本地，再放大查看。
1. 用户手动选择SSID，手机浏览器弹出Portal页面
路由器强制拦截所有访问，强制转向认证页面（存放在路由器里）。
2. Portal页面初始化时，向AC/AP请求移动端和AC/AP的MAC地址
这个页面读取手机的mac和WIfi路由器的mac还有名字，这个参数是为了将来微信弹出网页用的。
在这个页面搞一个超链接，http://www.dongvdong.top/weixin/weixin_md5/微信连Wi-Fi.html
点击后访问一个自己的服务器，里面存放一个能使预览器调用微信APP的网页（游览器原本是没有权限调用的）
移动设备在portal页中引用下述微信JSAPI，让原有Wi-Fi portal页具备呼起微信的能力：
网页打开（官方教程有基本样例）
md5.js 因为验证用到，用到网上搜索下载，放在和网页同级目录
文件夹是网页的一些基本元素（当然可以不用这些元素，直接变成网页链接，参看说明一）
<!DOCTYPE html>
<!-- saved from url=(0049)https://wifi.weixin.qq.com/operator/demoNew.xhtml -->
<html><head lang="zh-CN"><meta http-equiv="Content-Type" content="text/html; 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) { //iPhone
document.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="./微信连Wi-Fi_files/style-simple-follow.css">
<script src="./微信连Wi-Fi_files/callWechat.xhtml"></script></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="./微信连Wi-Fi_files/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="./微信连Wi-Fi_files/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" onclick="callWechatBrowser()">一键打开微信连Wi-Fi</a>
</div>
</div>
<script type="text/javascript" src="md5.js"></script>
<script type="text/javascript">
function callWechatBrowser(){
var appId = "wx4ccfdb6e5d7775fa";
var secretkey = "581668b51dad78d2a7f80cc3ad27448d";
var extend = "demo"; //开发者自定义参数集合
var timestamp = new Date().getTime(); //时间戳(毫秒)
var shop_id = "17483750"; //AP设备所在门店的ID
var authUrl = "http://www.dongvdong.top/weixin/weixin_php/auth.php?httpCode=200?gwId=11"; //服务器回调地址 gwId当前连接的路由的设备编号
var mac = "14:5f:94:d1:57:20"; //用户手机mac地址 安卓设备必需
var ssid = "SSID_ESP"; //AP设备信号名称，非必须
var bssid = "00:a0:b1:4c:a1:c5"; //AP设备mac地址，非必须
//alert("1");
var sign = md5(appId + extend + timestamp + shop_id + authUrl + mac + ssid + bssid + secretkey);
//alert("2");
Wechat_GotoRedirect(appId, extend, timestamp, sign, shop_id, authUrl, mac, ssid, bssid,'ff:ff:ff:ff:ff:ff');
//alert("3");
}
</script>
<script type="text/javascript">
document.addEventListener('visibilitychange', putNoResponse, false);
</script>
<iframe src="./微信连Wi-Fi_files/saved_resource.html" style="display: none; width: 0px; height: 0px;"></iframe></body></html>
这个调用的基本历程是这样的
移动设备在portal页中引用下述微信JSAPI，让原有Wi-Fi portal页具备呼起微信的能力：
<script type="text/javascript" src="https://wifi.weixin.qq.com/resources/js/wechatticket/wechatutil.js" ></script>
只不过我上面写的网页直接把这个js代码抠出来，直接写在html里了。
调用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(appId + extend + timestamp + shop_id + authUrl + mac + ssid + bssid + secretkey);
Wechat_GotoRedirect(appId, extend, timestamp, sign, shop_id, authUrl, mac, ssid, bssid); }
</script>
参数说明
实验证明，如果你不需要这个mac地址做记录名单，只是想通过这个使得网页拉起微信，手机mac地址没软用。 随便给个就行。
3 我们的服务器认证设备
点击这个认证页面的超链接，http://www.dongvdong.top/weixin/weixin_md5/微信连Wi-Fi.html
弹出网页
点击按钮
我们点击按键，实际上在执行3.3和3.4步
之后自动打开微信app,进入链接WIFI状态
紧接着自动
这个时候会失败，为什么？
因为微信这个时候去求去我们自己的服务器，是否允许其上网，我们的服务器必须给回应
给200认为通过
给302跳转到另外的认证页面
其余或者第二次302就认为失败。
微信给我们服务器发送
http://xxx/callback/auth?httpCode=200?gwId=xxx&gwId=&extend=xxx&openId=xxx&tid=xxx
参数说明
我们要自己写个后端，经过判断，给予回复
放在我们的服务器上，网址也就是在我们第一次认证页面里面填写的url
"http://www.dongvdong.top/weixin/weixin_php/auth.php?httpCode=200?gwId=11";
function callWechatBrowser(){
var appId = "wx4ccfdb6e5d7775fa";
var secretkey = "581668b51dad78d2a7f80cc3ad27448d";
var extend = "demo"; //开发者自定义参数集合
var timestamp = new Date().getTime(); //时间戳(毫秒)
var shop_id = "17483750"; //AP设备所在门店的ID
var authUrl = "http://www.dongvdong.top/weixin/weixin_php/auth.php?httpCode=200?gwId=11"; //服务器回调地址 gwId当前连接的路由的设备编号
var mac = "14:5f:94:d1:57:20"; //用户手机mac地址 安卓设备必需
var ssid = "SSID_ESP"; //AP设备信号名称，非必须
var bssid = "00:a0:b1:4c:a1:c5"; //AP设备mac地址，非必须
php获取微信返回的openId,tid,extend回调接口
<?php
function auth(){
$gwId = $_GET["gwId"];
$openId = $_GET["openId"];
$extend= $_GET["extend"];
$tid= $_GET["tid"]; //获取openId添加到数据库获取该用户的token
print_r(tid); // 相当于回复 200
}
auth();
?>
在这里我为了测试，直接给与回复 参数tid ，简单来说直接回馈 200.
微信认为我们同意，给预防性。
然后微信自动下一步
这时候左上角 完成，点击就没有了，啥都没有了。人为手机正常上网了。
但是我们需要用户关注公众号啊！！！
所以需要添加结束引导页面。
编辑
6. 跳转到商家主页可自己设置
紧接着设置
https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg5NzA2Mjc4Ng==&scene=126&bizpsid=0#wechat_redirect
这个公众号网址怎么来的
打开公众号->点右上角的小人图标->查看历史消息->点右上角的三个点->复制链接->在除微信外的其他地方复制。得到类似如下url：https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=abcdefg==&scene=124#wechat_redirect
设置之后。
我们微信在完成之后
自动跳转链接
正常情况下，这个 关注按钮点击，结束。
然而，微信为了防止被人恶意利用（是的，强制你关注别人家的公众号），取消了这个按键。再打开网页不到2S，按键自动消失
这个暂时无解。
然而，我们可以通过点击头像，进入有关注的页面
出现页面
然而问题来了，用户是不知道这个细节的。
暂时无解。
但是我们起码完成，普通网页调出微信APP,并且换到公众号认证页面。
比起搞个二维码在认证页面，更方便。
7未来探讨
tplink提出一种策略。简单来说没有关注就给二维码。
微信公众号强制关注设置方法
https://service.tp-link.com.cn/detail_article_3440.html
https://blog.csdn.net/qq_35430000/article/details/83379143
吐槽：最近微信更新了7.0的版本，上面的这种方式 引导 关注公众号失效了，关注按钮会一闪而过然后消失，暂时没有什么好的解决方案，但是 引导 用户 关注公众号的目的达到了，如果用户感兴趣 可能会点击标题或者文章然后关注公众号。
-----------------------------------------------------------------------------------------------------------------------------
8 如何跳到有关注按钮的界面
前面我们获取了一个url，凡是从完成页面跳转，按钮都消失。
但是如果把这个链接复制到对话框，发给别人，在对话框打开，能直接进去有按钮的关注页面
，也就是说，微信在完成页面后附加了参数。
H5跳转实现微信一键关注
https://blog.csdn.net/qq_23370345/article/details/84959146
实现方式：
首先登陆自己的微信公众平台，然后打开开发者工具，搜索window.wx其中的uin为自己平台的id。
经过base64加密，然后在如下链接中替换_biz码即可。
https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=替换成刚才经过加密的id即可&scene=110#wechat_redirect
加密网址
https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg5NzA2Mjc4Ng0K&scene=110#wechat_redirect
把网址发给朋友，点击打开，果然是有认证按钮。
屁颠屁颠替换结束页面跳转的URL
然并软，没用！依然消失。
微信从上次事件大清理，肯定在结束页面跳转过来的时候，附加了一些参数判断。
附加参数
第一次测试截取地址
http://mp.weixin.qq.com/mp/profile_ext?appId=wx4ccfdb6e5d7775fa&extend=demo×tamp=1555092757&openId=ognVI6JsmBGd7lxYTZY4GH29LcNg&tid=01000715fd93af5a83f017d2e6cad3a694e8bac06eaf89be465b59&shopId=17483750&bssid=&configIndex=0&jumpsrc=jumpfromfinishpage&isContact=0&action=home&__biz=Mzg5NzA2Mjc4Ng0K&scene=110#wechat_redirect
第二次测试截取地址
http://mp.weixin.qq.com/mp/profile_ext?appId=wx4ccfdb6e5d7775fa&extend=demo×tamp=1555092838&openId=ognVI6JsmBGd7lxYTZY4GH29LcNg&tid=01000697bb555263873fb13d2255071e7f45874bbd12b8aab1d75a&shopId=17483750&bssid=&configIndex=0&jumpsrc=jumpfromfinishpage&isContact=0&action=home&__biz=Mzg5NzA2Mjc4Ng0K&scene=110#wechat_redirect
虽说没有什么软用，但是我发现，从开发者模式搞来的网址，可以输出很多信息。 复制链接里面把这些信息都给出了。
一般的那种跳转连接是不会给的。
有了这些参数，可以做的事情
https://zhuanlan.zhihu.com/p/39298139
、说明：
下面的代码是个备用，我们是把网页资源放在我们自己服务器
下面代码全部是从云端获取的，减轻我们服务器压力，只参考这个资源网址，其他认证有问题。
<!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) { //iPhone
document.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" onclick="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设备所在门店的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>
<script type="text/javascript">
document.addEventListener('visibilitychange', putNoResponse, false);
</script>
</html>
