微信網(wǎng)頁(yè)授權(quán)

時(shí)間：2023-05-21 10:46:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-05-21 10:46:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

微信網(wǎng)頁(yè)授權(quán)：微信網(wǎng)頁(yè)授權(quán)步驟差不多有三步，具體文檔可查看這里，我畫(huà)了下流程圖：

以下為代碼實(shí)戰(zhàn)

第一步：用戶同意授權(quán)，獲取 code

需先調(diào)用 /auth 接口，傳入必傳參數(shù) url 以及 scope（此為參數(shù)名）

請(qǐng)求方式：GET

• url 為回調(diào)地址
• scope 有兩個(gè)可選參數(shù)
• snsapi_base 只能獲取進(jìn)入頁(yè)面用戶的 openid，用戶無(wú)感知，叫靜默授權(quán)
• snsapi_userinfo 能獲取用戶的基本信息，但需要用戶接受，叫手動(dòng)授權(quán)，如下圖

具體區(qū)別可前往 微信文檔 查看

第二步：通過(guò) code 換取網(wǎng)頁(yè)授權(quán) access_token

這里以手動(dòng)授權(quán)為例

獲取到微信的 code 后，再請(qǐng)求 /getUserInfo

請(qǐng)求方式： GET

請(qǐng)求參數(shù)：code，需請(qǐng)求 /auth 獲取到 code 先，如果你在請(qǐng)求 /auth 時(shí)傳入的 scope 為 snsapi_userinfo , 那么返回微信個(gè)人信息，包括微信名，性別，所在地區(qū)，國(guó)籍，頭像等等，如下

{ "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 ，請(qǐng)求成功時(shí)只返回用戶的 openid

PS: 請(qǐng)求/getOpenId、 /getUserInfo 成功時(shí)會(huì)返回 access_token，但此 access_token 和 微信服務(wù)端開(kāi)發(fā)中的 access_token 不同，一個(gè)是微信與服務(wù)器打交道（微信票據(jù)服務(wù)），另一個(gè)是微信網(wǎng)頁(yè)的 OAuth2.0 服務(wù)（網(wǎng)頁(yè)授權(quán)）

第三步：請(qǐng)求 userInfo

拿著 access_token 和 openid，去請(qǐng)求微信官方接口

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

返回 openid、nickname、sex、province、city、country、headimgurl 等信息，拿著 openid 和你想要的數(shù)據(jù)返回到原來(lái) /auth 參數(shù)中的 url 上

實(shí)戰(zhàn)

先調(diào)用 /auth 接口，傳入?yún)?shù) url 和 scope

請(qǐng)求接口：http://192.168.230.209/auth?url=http://192.168.230.209/home&scope=snsapi_userinfo

redis 存 url=http://192.168.230.209/home，即最后授權(quán)完成拿到數(shù)據(jù)后返回的前端地址

判斷參數(shù) scope，如果是 snsapi_userinfo，用戶點(diǎn)擊授權(quán)后跳轉(zhuǎn)至 /getWxUserInfo 接口；

如果是 snsapi_base，靜默授權(quán)后跳轉(zhuǎn)至 getOpenId 接口

這里我們傳的 scope 為 snsapi_userinfo，所以請(qǐng)求成功后會(huì)有授權(quán)頁(yè)面

點(diǎn)擊”同意“會(huì)跳轉(zhuǎn)至頁(yè)面

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

PS：http://192.168.230.209:8888/api/wechat 為該后端服務(wù)地址，getWxUserInfo 為路由（即請(qǐng)求接口）

從ctx.request.query 中拿到 code，拿著 code 請(qǐng)求 access_token 服務(wù)，access_token 服務(wù)也是微信官方提供的一個(gè)方法

獲取code后，請(qǐng)求以下鏈接獲取access_token： https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

請(qǐng)求成功的話，拿著這個(gè)返回值中的 access_token 和 openid，請(qǐng)求 userinfo 接口，在上文已經(jīng)介紹過(guò)，這里不做重復(fù)

這里要說(shuō)明的一點(diǎn)是，如果請(qǐng)求 access_token 的返回 code 為 40029，說(shuō)明 access_token 已經(jīng)失效，我們需要重新刷新 access_token

拿到 userinfo 的返回值后，在最開(kāi)始存在 redis 中的 url 上拼接 openid、headimgurl 等即可

這里需要說(shuō)明一點(diǎn)

需要先配置 OAuth2.0 網(wǎng)頁(yè)授權(quán)的回調(diào)頁(yè)面域名，類似這種

總結(jié)

一定要知道一點(diǎn)，微信網(wǎng)頁(yè)開(kāi)發(fā)和調(diào)用微信的 JS-SDK 不一樣，也和微信服務(wù)端開(kāi)發(fā)不一樣

它可以當(dāng)初拎出來(lái)說(shuō)，坑也比較少，不會(huì)遇到像 JS-SDK 那樣的各種報(bào)錯(cuò)

只要知道，它為為了獲取 openid （以及微信個(gè)人信息）而弄的一個(gè)服務(wù)就好了