在做微信登錄的時候，希望能在本地能夠測試登錄。這裏使用的是微信開放平臺的網站應用微信登錄, 與微信公衆平臺不同，微信開放平臺並沒有提供測試號的服務，因此在調試起來會十分的麻煩。比較傳統的方法就是部署上測試服務器上專門先測試這一個接口。但從流程上來說，會比較麻煩，不夠高效。下文將分享另一種測試的過程。
代碼編寫
首先在頁面引入微信的js文件：
<script src="//res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>然後在登錄頁上實例化登錄對象：
<!-- login.vuw -->
<template>
<div class="container">
<div id="login_container"></div>
</div>
</template>
<script>
// other code ...
export default {
// other code ...
mounted() {
APIs.login({
redirect_uri: Base64.encode('http://apitest.anran758.com')
}).then(res => {
/* eslint-disable no-new */
new WxLogin({
id: 'login_container',
// appid: "",
// scope: "",
// redirect_uri: "",
// state: "",
// style: "",
// href: ""
...res.data
});
})
},
};
</script>WxLogin接收一個對象，對象屬性如下所示。其中對象裏的appid, scope，redirect_uri, state四個屬性是由後端控制返回的。
| 參數 | 是否必須 | 說明 |
|---|---|---|
| self_redirect | 否 | true：手機點擊確認登錄後可以在 iframe 內跳轉到 redirect_uri，false：手機點擊確認登錄後可以在 top window 跳轉到 redirect_uri。默認爲 false。 |
| id | 是 | 第三方頁面顯示二維碼的容器id |
| appid | 是 | 應用唯一標識，在微信開放平臺提交應用審覈通過後獲得 |
| scope | 是 | 應用授權作用域，擁有多個作用域用逗號（,）分隔，網頁應用目前僅填寫snsapi_login即可 |
| redirect_uri | 是 | 重定向地址，需要進行UrlEncode |
| state | 否 | 用於保持請求和回調的狀態，授權請求後原樣帶回給第三方。該參數可用於防止csrf攻擊（跨站請求僞造攻擊），建議第三方帶上該參數，可設置爲簡單的隨機數加session進行校驗 |
| style | 否 | 提供"black"、"white"可選，默認爲黑色文字描述。詳見文檔底部FAQ |
| href | 否 | 自定義樣式鏈接，第三方可根據實際需求覆蓋默認樣式。詳見文檔底部FAQ |
該方法會生成一個二維碼，並掛載到指定的容器 ID 上。用戶掃描二維碼時，頁面會向微信服務端發送一個請求等待用戶確認，用戶確認完成後，就會將頁面重定向至指定的路徑（redirect_uri）。
那麼現在問題就來了：重定向的地址要跟微信開放平臺裏設置的重定向的域名一致，就是說我們在本地開發起的localhost:8080這種是不行的。
這時我們就會想到了去修改hosts，但光改hosts是不行，還需要改端口。。這時就可以用到shistle了。
shistle
whistle是基於Node實現的跨平臺web調試代理工具，主要用於查看、修改HTTP、HTTPS、Websocket的請求、響應，也可以作爲HTTP代理服務器使用。我們可以使用它來進行轉發：
通過 npm 來安裝 whistle:
# 全局安裝 whistle
npm install -g whistle
# 啓動 whistle
w2 start
# 指定端口號來啓動 whistle
w2 start -p 9000安裝完畢後命令行提示我們可以進入 whistle 的控制檯(默認啓動的 URL 是 127.0.0.1:8899)，但此時還不能直接抓包，還需要配置代理纔可以使用.
配置代理可以使用全局代理或瀏覽器代理，比較推薦的做法是使用後者。我個人習慣使用chrome瀏覽器，因此可以安裝 SwitchyOmega 代理插件，將 shistle 的配置信息填入，保存配置後記得切換插件的模式噢。
想要攔截HTPPS的請求的話，還需要安裝根證書,
接着進入 whistle 的控制檯, 點進rules, 配置需要代理或轉發的地址。這個配置規則類似於設置 hosts.
設置好 rules 後，將本地開發的的網址http://localhost:8020/#/login替換爲http://test.anran758:8020/#/login再進行測試登錄，登錄完畢後就能拿到用戶數據了。