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

廣州蘆葦科技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複製程式碼