微信網頁授權

山頭人漢波發表於2022-04-25
網頁

微信網頁授權步驟差不多有三步，具體文件可檢視這裡，我畫了下流程圖：

微信授權流程圖

以下為程式碼實戰

第一步：使用者同意授權，獲取 code

需先呼叫 /auth 介面，傳入必傳引數 url 以及 scope（此為引數名）

請求方式：GET

  • url 為回撥地址

  • scope 有兩個可選引數

    • snsapi_base 只能獲取進入頁面使用者的 openid，使用者無感知，叫靜默授權
    • snsapi_userinfo 能獲取使用者的基本資訊，但需要使用者接受，叫手動授權，如下圖

snsapi_userinfo示意圖

具體區別可前往 微信文件 檢視

第二步：通過 code 換取網頁授權 access_token

這裡以手動授權為例

獲取到微信的 code 後，再請求 /getUserInfo

請求方式： GET

請求引數：code，需請求 /auth 獲取到 code 先，如果你在請求 /auth 時傳入的 scope 為 snsapi_userinfo , 那麼返回微信個人資訊，包括微信名，性別，所在地區，國籍，頭像等等，如下

{
  "openid":" OPENID",
  "nickname": NICKNAME,
  "sex":"1",
  "province":"PROVINCE",
  "city":"CITY",
  "country":"COUNTRY",        "headimgurl":"https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
  "privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],
  "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

但如果 scope 為 snsapi_base ，請求成功時只返回使用者的 openid

PS: 請求/getOpenId、 /getUserInfo 成功時會返回 access_token，但此 access_token 和 微信服務端開發中的 access_token 不同，一個是微信與伺服器打交道（微信票據服務），另一個是微信網頁的 OAuth2.0 服務（網頁授權）

第三步：請求 userInfo

拿著 access_token 和 openid，去請求微信官方介面

http：GET（請使用 https 協議） https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

返回 openid、nickname、sex、province、city、country、headimgurl 等資訊，拿著 openid 和你想要的資料返回到原來 /auth 引數中的 url 上

實戰

先呼叫 /auth 介面，傳入引數 url 和 scope

請求介面：http://192.168.230.209/auth?url=http://192.168.230.209/home&scope=snsapi_userinfo

redis 存 url=http://192.168.230.209/home，即最後授權完成拿到資料後返回的前端地址

判斷引數 scope，如果是 snsapi_userinfo，使用者點選授權後跳轉至 /getWxUserInfo 介面；

如果是 snsapi_base，靜默授權後跳轉至 getOpenId 介面

這裡我們傳的 scope 為 snsapi_userinfo，所以請求成功後會有授權頁面

授權示意圖

點選”同意“會跳轉至頁面

http://192.168.230.209:8888/api/wechat/getWxUserInfo?code=081UcAFa1s1OAz0o7wGa1wb8vG1UcAFX&state=123

PS：http://192.168.230.209:8888/api/wechat 為該後端服務地址，getWxUserInfo 為路由（即請求介面）

從ctx.request.query 中拿到 code，拿著 code 請求 access_token 服務，access_token 服務也是微信官方提供的一個方法

獲取code後，請求以下連結獲取access_token： https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

請求成功的話，拿著這個返回值中的 access_token 和 openid，請求 userinfo 介面，在上文已經介紹過，這裡不做重複

這裡要說明的一點是，如果請求 access_token 的返回 code 為 40029，說明 access_token 已經失效，我們需要重新重新整理 access_token

拿到 userinfo 的返回值後，在最開始存在 redis 中的 url 上拼接 openid、headimgurl 等即可

這裡需要說明一點

需要先配置 OAuth2.0 網頁授權的回撥頁面域名，類似這種

授權回撥頁面域名

總結

一定要知道一點，微信網頁開發和呼叫微信的 JS-SDK 不一樣，也和微信服務端開發不一樣

它可以當初拎出來說，坑也比較少，不會遇到像 JS-SDK 那樣的各種報錯

只要知道，它為為了獲取 openid （以及微信個人資訊）而弄的一個服務就好了

相關文章