微信公衆號開發 —— 微信網頁受權小記

時間 2019-11-16

標籤微信公衆號開發網頁受權欄目 HTML 简体版

原文原文鏈接

微信受權

簡要流程

進入（首頁）頁面 -> 請求數據 -> 401,須要用戶信息 -> 前端發起微信受權 -> 用戶肯定受權 -> 微信重定向到回調地址 -> 獲取code，經過code換取網頁受權access_token，生成token -> 跳轉至剛剛的頁面 ,並把token發送給前端 -> 前端專門整個頁面來接收token(儘可能不要讓用戶明顯地看到token吧)，再重定向到用戶一開始進入的頁面 html

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

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

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

微信受權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/authorizeweb

state：http://xxxx.xxxx.com/#/wechatLogin小程序

redirect_uri 微信規定須要encode處理微信小程序

state 是由於使用了Hash路由，有#，與‘#wechat_redirect’衝突，因此須要encode處理api

因此無論怎樣，redirect_uri與state 都通過encodeURIComponent處理吧，準沒錯瀏覽器

風流版bash

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
複製代碼