微信公衆平臺開發(110) 微信連Wi-Fi
微信連Wi-Fi是爲商家的線下場所提供一套完整和便捷的微信連Wi-Fi的方案。商家接入微信連Wi-Fi後，顧客無需輸入繁瑣的Wi-Fi密碼，經過微信掃二維碼等方式便可快速上網。微信連Wi-Fi還幫助商家打造個性化服務，如提供微信頂部常駐入口、商家主頁展現、連網後公衆號下發消息等。所以，微信連Wi-Fi既能夠極大的提高用戶體驗，又能夠幫助商家提供精準的近場服務。javascript
微信連Wi-Fi具備如下特性css
在這篇微信公衆平臺開發教程中，咱們將介紹如何實現微信連Wi-Fi的功能。html
本文分爲如下二個部分：java
- 建立公衆帳號門店
- 添加微信連Wi-Fi設備
- 改造Portal型路由器設備
- 開發移動端Portal頁面
使用微信連Wi-Fi須要在「添加功能插件」中添加「門店管理」和「微信連Wi-Fi」兩項。android
微信連Wi-Fi設備分爲密碼型設備和Portal型設備，本教程介紹Portal型設備。ios
1、建立公衆帳號門店
登陸微信公衆平臺，在左側邊欄點擊「門店管理「web
點擊右上角「新建門店」按鈕，進入門店新建頁面；json
手工填寫各種信息，完成後提交門店，而後進入審覈流程，審覈結果將會在5個工做日內反饋。
審覈經過後，門店新建完成。api
2、添加微信連Wi-Fi設備
在微信公衆平臺，在左側邊欄點擊「微信連Wi-Fi「瀏覽器
在「設備管理」中點擊「添加設備」按鈕，
完成後提交，得到門店Wi-Fi設備改造信息，包括：appId，shop_id，ssid，secretkey。
3、改造Portal型路由器設備
如下是某路由器設備支持鏈接SSID: A01-S001-R04時，查看到的路由狀態表，
root@OpenWrt:~# ubus call privoxy get_client
{
"client_array": [
{
"mac": "3c9157c5ccaf",
"ip": "192.168.4.25",
"last_active": "Wed Dec 16 14:29:31 2015\n",
"ref_cnt": 0,
"ssid": "A01-S001-R04",
"extra_infos": {
"browser_name": "safari",
"userAgent": "android"
},
"state_array": [
{
"name": "auth",
"duration": 0,
"mode": 1,
"created": "Wed Dec 16 12:17:24 2015\n"
}
]
},
{
"mac": "0c153969563f",
"ip": "192.168.4.73",
"last_active": "Wed Dec 16 14:31:41 2015\n",
"ref_cnt": 1,
"ssid": "A01-S001-R04"
}
]
}
root@OpenWrt:~#
該AC/AP在移動設備鏈接上SSID，彈出portal頁後，可以臨時放行用戶的上網請求。
詳細實現通常由Wi-Fi硬件設備商來完成。
4、開發移動端Portal頁面
微信連Wi-Fi流程
顧客在手機上點選ssid後喚起portal頁，點擊頁面上「微信連Wi-Fi」按鈕進入鏈接前頁，展現公衆號logo和名稱，點擊「當即連網」按鈕後開始連WiFi，鏈接成功後跳轉到成功鏈接頁，默認勾選關注商家公衆號。
微信連Wi-Fi時序圖
1. 用戶手動選擇SSID，手機瀏覽器彈出Portal頁面
2. Portal頁面初始化時，向AC/AP請求移動端和AC/AP的MAC地址
蘋果手機須要開放 http://captive.apple.com/鏈接
3. 用戶點擊微信連Wi-Fi按鈕，瀏覽器請求AC/AP臨時放行
4. AC/AP臨時放行移動端全部上網請求
5. 瀏覽器生成ticket，發向微信Server
移動設備在portal頁中引用下述微信JSAPI，讓原有Wi-Fi portal頁具有呼起微信的能力：
<script type="text/javascript" src="https://wifi.weixin.qq.com/resources/js/wechatticket/wechatutil.js" ></script>
調用JSAPI觸發呼起微信客戶端：
Wechat_GotoRedirect(
appId,
extend,
timestamp,
sign,
shop_id,
authUrl,
mac,
ssid,
bssid
);
具體示例以下
<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/wifigw/auth.xhtml?httpCode=200"; //認證服務端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>
參數說明
| 參數 | 是否必須 | 說明 |
|---|---|---|
| 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 |
簽名的計算方法：
sign = MD5(appId + extend + timestamp + shop_id + authUrl + mac + ssid + bssid + secretkey); #注意這裏timestamp爲毫秒單位的當前時間戳
得到簽名後，Portal將生成以下URL併發送到微信Server
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
6. 微信服務器返回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/
7. 調起微信連Wi-Fi前置頁面
該URL Scheme將調起微信APP，並向微信服務Server覈對連WiFi註冊信息及獲取用戶微信身份，微信Server返回用戶身份信息(OpenId, tid)，微信打開微信連Wi-Fi前置頁面
8. 鏈接Wi-Fi
用戶點當即鏈接 按鈕，微信自動向authUrl（JSAPI的傳入參數）發起請求，提交認證所需的用戶微信身份信息參數，包括extend、openId、tid。
http://www.fangbei.org/wifigw/auth.xhtml?httpCode=200&extend=fangbei&openId=oiPuduCHIBb2aHvZoqSm1t7KbXtw&tid=010002d1eb4ee298934a7d44c1ece599ed57c4c010119bb23028b8
參數說明以下
| 參數 | 說明 |
|---|---|
| extend | 爲上文中調用呼起微信JSAPI時傳遞的extend參數，這裏原樣回傳給商家主頁 |
| openId | 用戶的微信openId |
| tid | 爲加密後的用戶手機號碼（僅做網監部門備案使用） |
雲端Auth URL 返回AC認證結果
authUrl所對應的後臺認證服務器必須能識別這些參數信息，並向微信客戶端返回AC認證結果，微信客戶端將根據http返回碼，提示用戶連網成功與否。
若http返回碼爲200，則認爲服務認證成功，微信客戶端跳轉到成功鏈接頁，並默認勾選關注公衆號，用戶點擊「完成」按鈕後，將跳轉到商家主頁；若認證服務器須要轉移認證請求，請返回302和下一跳地址，微信客戶端將向下一跳地址再發起一次請求，302跳轉僅支持一次；對於非200和302，或者超過次數的302返回碼，視爲認證失敗，這次連網失敗，微信客戶端跳轉到鏈接失敗頁。
注意：微信客戶端一次請求的等待時間爲10s，請確保後臺認證服務器在微信客戶端向authUrl發送請求10s以內返回AC認證結果，即http返回碼。超過10s未返回認證結果將視爲認證失敗。
9. 鏈接成功
當http返回碼爲200時，將轉入微信連WiFi鏈接成功頁
成功頁面中，顯示公衆帳號，而且默認勾選關注選項
10. 跳轉商家主頁
點擊「「完成」，再跳轉到商家模版或自定義連接
11. 路由表中能夠查看到放行狀態以下
root@OpenWrt:~# ubus call privoxy get_client
{
"client_array": [
{
"mac": "3c9157c5ccaf",
"ip": "192.168.4.25",
"last_active": "Wed Dec 16 14:58:13 2015\n",
"ref_cnt": 0,
"ssid": "A01-S001-R04",
"extra_infos": {
"browser_name": "safari",
"userAgent": "android"
},
"state_array": [
{
"name": "auth",
"duration": 0,
"mode": 1,
"created": "Wed Dec 16 12:17:24 2015\n"
}
]
},
{
"mac": "0c153969563f",
"ip": "192.168.4.73",
"last_active": "Wed Dec 16 15:08:18 2015\n",
"ref_cnt": 3,
"ssid": "A01-S001-R04",
"extra_infos": {
"browser_name": "safari",
"userAgent": "ios"
},
"state_array": [
{
"name": "auth",
"duration": 0,
"mode": 1,
"created": "Wed Dec 16 14:44:38 2015\n"
}
]
}
]
}
root@OpenWrt:~#
5、Portal頁面代碼
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" onclick="callWechatBrowser()">一鍵打開微信連Wi-Fi2</a>
</div>
</div>
</body>
<script type="text/javascript" src="md5.js"></script>
<script type="text/javascript">
var appId = "wx1b7559b818e3c223";
var secretkey = "9cf2e6e5af387b068178d313270c737a";
var extend = "www.fangbei.org"; //開發者自定義參數集合
var timestamp = new Date().getTime(); //時間戳(毫秒)
var shop_id = "8191751"; //AP設備所在門店的ID
var authUrl = "http://www.fangbei.org/wifigw/auth.xhtml?httpCode=200"; //認證服務端URL
var mac = "3c:91:57:c5:cc:af"; //用戶手機mac地址 安卓設備必需
var ssid = "A01-S001-R044"; //AP設備信號名稱，非必須
var bssid = "00:e0:61:4c:a7: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>
<script type="text/javascript">
document.addEventListener('visibilitychange', putNoResponse, false);
</script>
</html>
6、其餘常見問題
1. 部分安卓手機的web瀏覽器沒法自動呼起微信客戶端
6.2.5以上的Android版微信已經支持手動打開客戶端後繼續進行鏈接流程的功能，爲保證此流程順暢進行，開發者需注意如下幾點：
1.保證微信客戶端版本爲6.2.5以上的Android版微信； 2.參考示例demo中jsapi的寫法，在沒法自動跳轉微信客戶端時彈出提示，讓用戶手動切換到微信； 3.在portal頁面中調用微信jsapi時，需保證AP設備的bssid、ssid、和手機mac這三個參數真實有效； 4.測試過程請從切換到目標ssid動做開始（例如：原來爲3G或4G網絡而後手動選擇目標ssid，原來爲非目標ssid的wifi信號而後手動選擇目標ssid，等等）。
2. IOS從portal頁面跳轉到微信後如何保證手機仍保持在目標ssid下？
IOS系統爲了保證Wi-Fi是可用的，在用戶選擇完一個ssid後不會立刻切換過去，而是會嗅探經過該ssid是否能觸達公網上的預設服務，若是能嗅探到才真正顯示鏈接該ssid。在彈portal的AP環境中，這點正好被用來彈出portal頁面，若是在portal頁面上完成了認證，則在portal右上方的提示會由「取消」變爲「完成」，若是在「取消」狀態下離開這個界面，那麼剛剛選擇的ssid將會被斷開，回到上一個可用的鏈接，而若是在「完成」狀態下離開這個界面則不會斷開。
因爲經過微信認證時，會由portal界面跳轉到微信，因此確保portal右上角的「完成」狀態是個前提。開發者須要注意如下幾點：
1.確保彈出portal後，臨時放行手機的全部流量； 2.臨時放行手機的全部流量後，局部或總體刷新portal頁面觸發IOS再次進行嗅探； 3.IOS嗅探能夠正常觸達公網上的預設服務後「取消」變爲「完成」； 4.以上動做完成後，再調用跳轉微信的JSAPI，繼而跳轉微信完成認證鏈接流程。
7、設備類型說明
設備類型詳細說明
| 密碼型設備 | portal型設備 | |
|---|---|---|
| 設備類型 |
|
|
| 註冊加入 微信連WiFi方式 |
|
有兩種方式：
|
| 可獲取的微信連WiFi能力 |
|
不一樣的接入方式具有的能力不一樣：
|
微信連WiFi能力詳細說明
| 能力類型 | 微信連WiFi能力 | 能力說明 |
|---|---|---|
| 微信方式聯網能力 | 微信方式連WiFi | 接入微信賬號驗證體系，用戶可掃一掃或經過公衆號菜單一鍵鏈接WiFi，不需輸入密碼或經過手機號碼驗證。 |
| 默認關注公衆號 | 微信方式連WiFi過程與商家公衆號關聯，連WiFi後默認關注商家公衆號，幫助商家零邊際成本得到線下顧客粉絲 | |
| 商戶品牌持續曝光 | 微信方式連WiFi過程當中，會持續展現商戶品牌信息，爲品牌提供更多曝光機會 | |
| 聯網後近場服務能力 | 微信頂部常駐入口 | 設備添加成功後、顧客到店連上WiFi，便可在微信首頁頂部看到歡迎光臨的商家主頁入口 |
| 連網後自定義消息推送 | 設備添加成功後、顧客到店連上WiFi，便可收到此店公衆號下發的聯網成功通知消息。此消息支持文字和卡券兩種格式。 | |
| 開放式商家主頁 | 從微信頂部常駐入口點擊可進入商家主頁，此頁面開放給商家自行定義內容、可配置商家自有網站連接。 |
相關文章
- 1. 微信公衆平臺開發(110) 微信連Wi-Fi
- 2. 微信公衆平臺開發--接入微信公衆平臺
- 3. 公衆號，微信開放平臺和微信公衆平臺
- 4. 微信公衆號開發（二）—— 微信公衆平臺接入
- 5. Java微信公衆平臺開發(一)——接入微信公衆平臺
- 6. 微信公衆平臺開發 微信公衆平臺示例代碼分析
- 7. Java微信公衆平臺開發(一)--接入微信公衆平臺
- 8. 微信公衆平臺開發 微信JSSDK開發
- 9. 微信公衆平臺開發
- 10. 微信公衆平臺開發概述
- 更多相關文章...
- • ionic 平臺 - ionic 教程
- • 瀏覽器信息 - 瀏覽器信息
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
- • PHP開發工具
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策
歡迎關注本站公眾號,獲取更多信息
