移动端微信连WiFi的实现流程如下。
1）用户手动选择SSID。
当用户打开手机WLAN设置的时候，会列出附近的WiFi信号列表，选择Portal路由器的SSID（这里为FreeWiFi），如图18-7所示。
图18-7 WiFi列表
2）手机浏览器弹出Portal页面并初始化。
在Portal页面中引用微信JS API，让原有WiFi Portal页面具备调起微信的能力。其代码如下。
<script type="text/javascript">
/**
* 微信连WiFi协议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;
}
alert(url);
// 通过dom操作创建script节点，实现异步请求
var script = document.createElement('script');
script.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
Wechat_GotoRedirect函数参数的定义如表18-10所示。
表18-10 Wechat_GotoRedirect函数参数定义说明
Portal页面初始化时，需要同时向AC/AP请求移动端和AC/AP的MAC地址。请求代码如下。
// 获取手机MAC和路由器MAC的接口，由路由器厂家提供
function getMac{
var objXMLHTTP = new XMLHttpRequest;
var url = 'http:// fangbei.wifi/ubus';
objXMLHTTP.open('POST', url, true);
objXMLHTTP.onreadystatechange = function{
if(objXMLHTTP.readyState == 4){
var str = objXMLHTTP.responseText ;
alert(str);
var items = JSON.parse(str).result[1];
mac = items.client_mac.replace(/(^\s*)|(\s*$)/g,'');
apmac = items.macaddr.replace(/(^\s*)|(\s*$)/g,'');
}
}
var data = '{"id":1234,"jsonrpc":"2.0","method":"call", "params":["000000000
00000000000000000000000", "mgmtd", "info", {}]}' ;
objXMLHTTP.send(data);
}
Portal页面放置一个按钮，提供用户一键连WiFi功能，如图18-8所示。
3）用户点击微信连WiFi按钮。
当用户点击微信连WiFi按钮时，浏览器需要请求AC/AP临时放行，并且调用JS API触发调起微信客户端。
调起微信的代码如下。
<script type="text/javascript">
var appId = "wx1b7559b818e3c33e";
var secretkey = "9cf2e6e5af383b068178d313270c237a";
var extend = "fangbei"; // 开发者自定义参数集合
var timestamp = new Date.getTime; // 时间戳(毫秒)
var shop_id = "8191752"; // AP设备所在门店的ID
var authUrl = "http:// www.fangbei.org/ auth.xhtml"; // 认证服务端URL
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 = hex_md5(appId + extend + timestamp + shop_id + authUrl + mac + ssid
+ bssid + secretkey);
Wechat_GotoRedirect(appId, extend, timestamp, sign, shop_id, authUrl, mac,
ssid, bssid);
}
</script>
上述代码中，签名的计算方法如下。
sign = MD5(appId + extend + timestamp + shop_id + authUrl + mac + ssid + bssid + secretkey); #注意这里timestamp是以毫秒为单位的当前时间戳
获得签名后，Portal将生成如下URL并发送到微信服务器。
https:// wifi.weixin.qq.com/operator/callWechat.xhtml?appId=wx1b7559b818e3c223&extend= fangbei×tamp=1450260747171&sign=c9847fdf18209a760891b8de653fa71c&shopId=8191751&authUrl=http%3A%2F%2Fwifi.weixin.qq.com%2Fassistant%2Fwifigw%2Fauth.xhtml%3FhttpCode%3D200&mac=3c:91:57:c5:cc:af&ssid=A01-S001-R04&bssid=00:e0:61:4c:a7:c5
4）微信服务器返回URL Scheme。
微信服务器将返回如下链接。
jsonpCallback({'success':true,'data':'weixin:// connectToFreeWifi/?apKey=http%3A%2F%2Fmp.weixin.qq.com%2Fmp%2Fwifi%3Fq%3D47b33c80e2910d51&ticket=ba21685ba44144dc988fa02ec8254053'})
其中，data数据解码如下。
weixin:// connectToFreeWifi/?apKey=http:// mp.weixin.qq.com/mp/wifi?q=47b33c80e2910d51&ticket=ba21685ba44144dc988fa02ec8254053
此处为一个URL Scheme。
weixin:// connectToFreeWifi/
5）调起微信连WiFi前置页面。
该URL Scheme将调起微信APP，并向微信服务器核对连WiFi注册信息及获取用户微信身份，微信服务器返回用户身份信息（OpenId、tid），微信打开微信连WiFi前置页面，如图18-9所示。
图18-8 Portal页
图18-9 微信连WiFi前置页
6）连接WiFi。
用户点击“立即连接”按钮，微信自动向authURL（JS API的传入参数）发起请求，提交认证所需的用户微信身份信息参数，包括extend、openId、tid。
http:// www.fangbei.org/auth.xhtml&extend=fangbei&openId=oiPuduCHIBb2aHvZoqSm1t7KbXtw&tid=010002d1eb4ee298934a7d44c1ece599ed57c4c010119bb23028b8
authURL参数说明如表18-11所示。
表18-11 authURL参数说明
7）云端auth URL返回AC认证结果。
authUrl所对应的后台认证服务器必须能识别这些参数信息，并向微信客户端返回AC认证结果，微信客户端将根据HTTP返回码，提示用户联网成功与否。
8）连接成功。
若HTTP返回码为200，则认为服务认证成功，微信客户端跳转到成功连接页，并默认显示关注公众号按钮，用户点击“完成”按钮后，将跳转到商家主页；若认证服务器需要转移认证请求，则返回302和下一跳地址，微信客户端将向下一跳地址再发起一次请求，302跳转仅支持一次；对于非200和302，或者超过次数的302返回码，视为认证失败，此次联网失败，微信客户端跳转到连接失败页。
WiFi连接成功页面如图18-10所示。
注意，微信客户端一次请求的等待时间为10s，请确保后台认证服务器在微信客户端向authUrl发送请求10s之内返回AC认证结果，即HTTP返回码。超过10s未返回认证结果将视为认证失败。
9）跳转商家主页。
点击“完成”，再跳转到默认模板或自定义商家主页链接，如图18-11所示。
图18-10 微信连WiFi成功页
图18-11 自定义链接页