vue應用微信二維碼登陸的一些記錄

首先參考微信開放平臺的網站應用開發指南，

開發的前提是網站應用已經過微信開放平臺的應用審覈獲取到相應網頁受權做用域，獲得網站的appid，AppSecret。具體按照微信開放平臺指南操做。

獲取到appid以後，使用微信二維碼登陸有兩種方式，一種是跳轉到開放平臺域名下的二維碼登陸頁面，用戶進行掃碼登陸，一種是將二維碼內嵌到應用網站，用戶進行掃碼登陸。

兩種方式登陸流程相同：

用戶視角：掃描二維碼，贊成受權，網頁自動跳轉到其餘頁面。

前端工做：展現二維碼，用戶受權以後，得到code（code會跟隨在重定向地址redirect_uri後），安全起見，將code傳給後端，由後端經過code與開放平臺交互獲取access_token,及用戶openid,unionid,並驗證該微信用戶是否綁定帳戶，若綁定，則進入默認頁面，未綁定，則接着進行登陸或註冊操做，將當前微信id與登陸帳號進行綁定（此時，前端須要將後端返回的unionid連同登陸註冊信息一併傳給後端，由後端進行綁定操做）；

 

登陸流程的實現：

按指南中操做

參數id指容納二維碼的容器，href是對二維碼相關樣式進行修改的css文件地址，官方規定此css文件必須放在https協議的網站上，本地測試及不方便，具體解決方法參考http://www.javashuo.com/article/p-kpdfmmqe-dk.html，使用nodejs腳本，將的寫好css資源轉換爲data-url，再填入href中便可。

此時二維碼已能夠生成在當前頁面，掃描受權成功後，將會轉到redirect_uri指定頁面，並在地址後跟上code和state參數，

須要根據code及appid去微信開放平臺給的接口請求access_token回來，返回值包括access_token, apenid,unionid等用戶信息。由後端經過openid或者unionid來判斷當前微信用戶是否綁定，將結果反饋給前端，前端根據返回值進行下一步操做。

使用路由守衛，在重定向地址跳轉以前進行攔截，獲取到code，並傳給後端，重寫一個空頁面，進行將code傳給後端的操做，拿到返回結果再進行下一步操做，

這裏是將code及unionid保存在store裏面，方便各個登陸組件進行獲取，注意在使用以後及時清空這兩個參數，由於code使用一次即失效，不及時清空可能對下一次登陸形成影響