首页 » 技术分享 » 微信连wifi portal验证

微信连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) {   //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" ο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设备所在门店的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>


参考文档:

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

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



转载自原文链接, 如需删除请联系管理员。

原文链接:微信连wifi portal验证,转载请注明来源!

0