微信连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触发呼起微信客户端:

[javascript]  view plain copy
  1. <script type="text/javascript">   
  2. var appId = "wx1bxxxxx33e";   
  3. var secretkey = "9cf2exxxxxxx0c237a";  
  4.  var extend = "shandian";     //开发者自定义参数集合   
  5. var timestamp = new Date().getTime();    //时间戳(毫秒)   
  6. var shop_id = "819xxx52";    //AP设备所在门店的ID   
  7. var authUrl = "http://xxx/callback/auth?httpCode=200?gwId=xxx"; //服务器回调地址 gwId当前连接的路由的设备编号   
  8. var mac = "3c:91:57:c2:cc:af";    //用户手机mac地址 安卓设备必需   
  9. var ssid = "A01-S001-R044"//AP设备信号名称,非必须   
  10. var bssid = "00:a0:b1:4c:a1:c5"//AP设备mac地址,非必须   
  11. function callWechatBrowser(){   
  12. var sign = $.md5(</span>appId + extend + timestamp + shop_id + authUrl + mac + ssid + bssid + secretkey);  
  13.  Wechat_GotoRedirect(appId, extend, timestamp, sign, shop_id, authUrl, mac, ssid, bssid); }  
  14. </script>  


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

[php]  view plain copy
  1. public function auth(){   
  2. $gwId = $_GET["gwId"];   
  3. $openId = $_GET["openId"];   
  4. $extend$_GET["extend"];   
  5. $tid$_GET["tid"]; //获取openId添加到数据库获取该用户的token   
  6. }  


参数说明

参数是否必须说明

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页面代码

[html]  view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head lang="zh-CN">  
  4.     <meta charset="UTF-8">  
  5.     <title>微信连Wi-Fi</title>  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1" />  
  7.     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  
  8.     <meta name="apple-mobile-web-app-capable" content="yes">  
  9.     <meta name="apple-mobile-web-app-status-bar-style" content="black">  
  10.     <meta name="format-detection" content="telephone=no">  
  11.     <script type="text/javascript">  
  12.         /**  
  13.          * 微信连Wi-Fi协议3.1供运营商portal呼起微信浏览器使用  
  14.          */  
  15.         var loadIframe = null;  
  16.         var noResponse = null;  
  17.         var callUpTimestamp = 0;  
  18.   
  19.         function putNoResponse(ev){  
  20.              clearTimeout(noResponse);  
  21.         }  
  22.   
  23.          function errorJump()  
  24.          {  
  25.              var now = new Date().getTime();  
  26.              if((now - callUpTimestamp) > 4*1000){  
  27.                  return;  
  28.              }  
  29.              alert('该浏览器不支持自动跳转微信请手动打开微信\n如果已跳转请忽略此提示');  
  30.          }  
  31.   
  32.          myHandler = function(error) {  
  33.              errorJump();  
  34.          };  
  35.   
  36.          function createIframe(){  
  37.              var iframe = document.createElement("iframe");  
  38.              iframe.style.cssText = "display:none;width:0px;height:0px;";  
  39.              document.body.appendChild(iframe);  
  40.              loadIframe = iframe;  
  41.          }  
  42.         //注册回调函数  
  43.         function jsonpCallback(result){  
  44.             if(result && result.success){  
  45.                 alert('WeChat will call up : ' + result.success + '  data:' + result.data);  
  46.                 var ua=navigator.userAgent;  
  47.                 if (ua.indexOf("iPhone") != -1 ||ua.indexOf("iPod")!=-1||ua.indexOf("iPad") != -1) {   //iPhone  
  48.                     document.location = result.data;  
  49.                 }else{  
  50.   
  51.                     if('false'=='true'){  
  52.                         alert('[强制]该浏览器不支持自动跳转微信请手动打开微信\n如果已跳转请忽略此提示');  
  53.                         return;  
  54.                     }  
  55.   
  56.                     createIframe();  
  57.                     callUpTimestamp = new Date().getTime();  
  58.                     loadIframe.src=result.data;  
  59.                     noResponse = setTimeout(function(){  
  60.                         errorJump();  
  61.                       },3000);  
  62.                 }  
  63.             }else if(result && !result.success){  
  64.                 alert(result.data);  
  65.             }  
  66.         }  
  67.   
  68.         function Wechat_GotoRedirect(appId, extend, timestamp, sign, shopId, authUrl, mac, ssid, bssid){  
  69.   
  70.             //将回调函数名称带到服务器端  
  71.             var url = "https://wifi.weixin.qq.com/operator/callWechatBrowser.xhtml?appId=" + appId  
  72.                                                                                 + "&extend=" + extend  
  73.                                                                                 + "×tamp=" + timestamp  
  74.                                                                                 + "&sign=" + sign;  
  75.   
  76.             //如果sign后面的参数有值,则是新3.1发起的流程  
  77.             if(authUrl && shopId){  
  78.                 url = "https://wifi.weixin.qq.com/operator/callWechat.xhtml?appId=" + appId  
  79.                                                                                 + "&extend=" + extend  
  80.                                                                                 + "×tamp=" + timestamp  
  81.                                                                                 + "&sign=" + sign  
  82.                                                                                 + "&shopId=" + shopId  
  83.                                                                                 + "&authUrl=" + encodeURIComponent(authUrl)  
  84.                                                                                 + "&mac=" + mac  
  85.                                                                                 + "&ssid=" + ssid  
  86.                                                                                 + "&bssid=" + bssid;  
  87.   
  88.             }  
  89.   
  90.             //通过dom操作创建script节点实现异步请求  
  91.             var script = document.createElement('script');  
  92.             script.setAttribute('src', url);  
  93.             document.getElementsByTagName('head')[0].appendChild(script);  
  94.         }  
  95.     </script>  
  96.     <link rel="stylesheet" href="https://wifi.weixin.qq.com/resources/css/style-simple-follow.css"/>  
  97. </head>  
  98. <body class="mod-simple-follow">  
  99. <div class="mod-simple-follow-page">  
  100.     <div class="mod-simple-follow-page__banner">  
  101.         <img class="mod-simple-follow-page__banner-bg" src="https://wifi.weixin.qq.com/resources/images/background.jpg" alt=""/>  
  102.         <div class="mod-simple-follow-page__img-shadow"></div>  
  103.         <div class="mod-simple-follow-page__logo">  
  104.             <img class="mod-simple-follow-page__logo-img" src="https://wifi.weixin.qq.com/resources/images/t.weixin.logo.png" alt=""/>  
  105.             <p class="mod-simple-follow-page__logo-name"></p>  
  106.             <p class="mod-simple-follow-page__logo-welcome">欢迎您</p>  
  107.         </div>  
  108.     </div>  
  109.     <div class="mod-simple-follow-page__attention">  
  110.         <p class="mod-simple-follow-page__attention-txt">欢迎使用微信连Wi-Fi</p>  
  111.         <a class="mod-simple-follow-page__attention-btn" onclick="callWechatBrowser()">一键打开微信连Wi-Fi2</a>  
  112.     </div>  
  113. </div>  
  114. </body>  
  115. <script type="text/javascript" src="md5.js"></script>  
  116. <pre name="code" class="javascript"><script type="text/javascript">  
  117.     var appId          = "wx1bxxxxx33e";  
  118.     var secretkey      = "9cf2exxxxxxx0c237a";  
  119.     var extend         = "shandian";        //开发者自定义参数集合  
  120.     var timestamp      = new Date().getTime();    //时间戳(毫秒)  
  121.     var shop_id        = "819xxx52";                //AP设备所在门店的ID  
  122.     var authUrl        = "http://xxx/callback/auth?httpCode=200?gwId=xxx";        //服务器回调地址 gwId当前连接的路由的设备编号  
  123.     var mac            = "3c:91:57:c2:cc:af";     //用户手机mac地址 安卓设备必需  
  124.     var ssid           = "A01-S001-R044";           //AP设备信号名称,非必须  
  125.     var bssid          = "00:a0:b1:4c:a1:c5";       //AP设备mac地址,非必须  
  126.   
  127.     function callWechatBrowser(){  
  128.         var sign = $.md5(</span>appId + extend + timestamp + shop_id + authUrl + mac + ssid + bssid + secretkey);  
  129.         Wechat_GotoRedirect(appId, extend, timestamp, sign, shop_id, authUrl, mac, ssid, bssid);  
  130.     }  
  131. </script>  
  132.   
  133. <script type="text/javascript">  
  134.     document.addEventListener('visibilitychange', putNoResponse, false);  
  135. </script>  
  136. </html>  


                
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值