微信公眾號開發 —— 微信網頁授權小記

廣州蘆葦科技web前端發表於2018-12-19

微信授權

簡要流程

進入（首頁）頁面 -> 請求資料 -> 401,需要使用者資訊 -> 前端發起微信授權 -> 使用者確定授權 -> 微信重定向到回撥地址 -> 獲取code，通過code換取網頁授權access_token，生成token -> 跳轉至剛剛的頁面 ,並把token傳送給前端 -> 前端專門整個頁面來接收token(儘量不要讓使用者明顯地看到token吧)，再重定向到使用者一開始進入的頁面

...很複雜對吧...還是忽略上面一段話吧

嗯,這可是我花了一晚上時間畫的,可以抱怨內容不全,但繪圖風格請儘量認可否則你只能看上面一段文字,好好想想吧

微信授權地址的解釋與說明

微信授權URL的真面目

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URL&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
複製程式碼

微信授權URL，其實就是這麼一串字串

解釋

欄位	是否必填	含義	說明
APPID	是	公眾號唯一的APPID
REDIRECT_URL	是	回撥地址，需要進行urlEncode處理	授權完後微信將會跳到該地址，如無特殊說明，該回撥地址是後臺介面，負責接收code，code以?code=123456的引數形式接在回撥地址後面
STATE	否	重定向後會帶上state引數，開發者可以填寫a-zA-Z0-9的引數值，最多128位元組	一般可以是前端告訴後臺跳轉授權前的頁面地址，讓後臺獲取code之後重定向到該地址，並且在該地址後帶上token資料
response_type	是	返回型別，此處填寫code
scope	是	應用授權作用域：snsapi_base （不彈出授權頁面，直接跳轉，只能獲取使用者openid），snsapi_userinfo （彈出授權頁面，可通過openid拿到暱稱、性別、所在地。並且，即使在未關注的情況下，只要使用者授權，也能獲取其資訊）
#wechat_redirect	是	無論直接開啟還是做頁面302重定向時候，必須帶此引數

示例

redirect_uri: http://xxxx.xxxxx.com/api/customer/wechat/authorize

state：http://xxxx.xxxx.com/#/wechatLogin

redirect_uri 微信規定需要encode處理

state 是因為使用了Hash路由，有#，與‘#wechat_redirect’衝突，所以需要encode處理

所以不管怎樣，redirect_uri與state 都經過encodeURIComponent處理吧，準沒錯

風流版

https://open.weixin.qq.com/connect/oauth2/authorize
?appid= **xxxxx**
&redirect_uri= **http%3A%2F%2Fxxxx.xxxx.com%2Fapi%2Fcustomer%2Fwechat%2Fauthorize**
&response_type=code
&scope=snsapi_userinfo
&state= **http%3A%2F%2Fxxxx.xxxx.com%2F%23%2FwechatLogin**
#wechat_redirect
複製程式碼

正常版

https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxx&redirect_uri=http%3A%2F%2Fxxxx.xxxx.com%2Fapi%2Fcustomer%2Fwechat%2Fauthorize&response_type=code&scope=snsapi_userinfo&state=http%3A%2F%2Fxxxx.xxxx.com%2F%23%2FwechatLogin#wechat_redirect
複製程式碼