在本地測試微信登陸

在作微信登陸的時候，但願能在本地可以測試登陸。這裏使用的是微信開放平臺的網站應用微信登陸, 與微信公衆平臺不一樣，微信開放平臺並無提供測試號的服務，所以在調試起來會十分的麻煩。比較傳統的方法就是部署上測試服務器上專門先測試這一個接口。但從流程上來講，會比較麻煩，不夠高效。下文將分享另外一種測試的過程。

代碼編寫

首先在頁面引入微信的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再進行測試登陸，登陸完畢後就能拿到用戶數據了。

參考資料

• whistle
• 網站應用微信登陸開發指南

原文出處： https://anran758.github.io/bl...