移動端微信連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 自定義鏈接頁