公眾號(hào)獲取授權(quán)流程
背景
在公眾號(hào)網(wǎng)頁中,使用系統(tǒng)，根據(jù)用戶手機(jī)號(hào)進(jìn)行賬號(hào)同步關(guān)聯(lián)（PC端系統(tǒng)），所以授權(quán)采用靜默授權(quán)獲取openID.
授權(quán)流程
1、 授權(quán)頁wxAuthPage --》微信授權(quán)OAuth --》 重定向授權(quán)頁 --》wxAuthPage頁拿到code --》 wxAuthPage 獲取 openId - -》 根據(jù)openID與后端交互決定去首頁or登陸頁，做后續(xù)的業(yè)務(wù)邏輯
-
網(wǎng)頁授權(quán)回調(diào)域名配置
- 需要先到公眾平臺(tái)官網(wǎng)中的
【設(shè)置與開發(fā)】-【功能設(shè)置】-【網(wǎng)頁授權(quán)域名】的配置選項(xiàng)中，配置授權(quán)回調(diào)域名。回調(diào)域名可配置多個(gè)（一般只會(huì)配置一個(gè)回調(diào)頁，統(tǒng)一進(jìn)行授權(quán)），授權(quán)頁面需要下載上傳【授權(quán)文件】（MP_文件）到【回調(diào)頁面】所在項(xiàng)目的根目錄下。詳見公眾號(hào)回調(diào)域名配置
image.png
- 需要先到公眾平臺(tái)官網(wǎng)中的
坑點(diǎn)?。。。号渲没卣{(diào)頁面時(shí)，一直提示文件找不到匹配，已經(jīng)按照文檔指示，把文件下載，放在了項(xiàng)目的根目錄里，排查后發(fā)現(xiàn)打包后的dist目錄沒有MP文件（``項(xiàng)目打包時(shí)，MP文件因?yàn)闆]有引用，所以沒有打包到dist目錄里``）
解決方案如下：本項(xiàng)目框架是UNIAPP，流水線自動(dòng)打包上傳項(xiàng)目（Docker容器），MP文件因?yàn)闆]有被引用，沒有打包到dist目錄里，所以打包后需要把MP文件添加進(jìn)dist文件，配置如下：
COPY MP_verify_LZajyYxePcus2bkd.txt /usr/share/nginx/html
具體步驟如下
-
發(fā)起授權(quán)獲取openID
可后端做，也可前端做，本項(xiàng)目由前端發(fā)起，參數(shù)說明如下網(wǎng)頁授權(quán)的作用域scope:
snsapi_base：（靜默授權(quán)）
snsapi_userinfo
appid："wx520c15f417810387"----服務(wù)端維護(hù)
redirect_uri：回調(diào)成功后URL頁面（wxAuthPage）
secret：公眾號(hào)的appsecret----服務(wù)端維護(hù)
一： 發(fā)起授權(quán)，獲取code。
引導(dǎo)用戶打開授權(quán)鏈接頁面：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
const hrefUrl = 'https://ksbl-yingjian-h5-test.shoupaji.com'
const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${res.appId}&redirect_uri=${encodeURI(hrefUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
location.href = url
二.：同意授權(quán)，頁面將跳轉(zhuǎn)至 redirect_uri/?code=CODE&state=STATE。
三：通過code換取網(wǎng)頁授權(quán)access_token 和 openid
網(wǎng)頁授權(quán)的作用域?yàn)閟nsapi_base，本步驟中獲取到網(wǎng)頁授權(quán)access_token的同時(shí)，也獲取到了openid， snsapi_base式的網(wǎng)頁授權(quán)流程即到此為止。
將授權(quán)拿到的code傳給后端，通過后端調(diào)用微信API獲取access_token和openid
// 微信獲取access_token API
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
```javascript
正確時(shí)返回的JSON數(shù)據(jù)包如下：
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE",
"is_snapshotuser": 1,
"unionid": "UNIONID"
}
```
四：拿到openID后跟后端進(jìn)行登陸綁定交互
后端根據(jù)openID進(jìn)行判斷用戶是否關(guān)聯(lián)手機(jī)號(hào)
未關(guān)聯(lián)：引導(dǎo)用戶填寫手機(jī)號(hào)，關(guān)聯(lián)手機(jī)號(hào)和openID
已關(guān)聯(lián)： token未失效，進(jìn)入h5首頁，失效，引導(dǎo)去登陸頁。
