公众号获取授权流程
背景
在公众号网页中,使用系统，根据用户手机号进行账号同步关联（PC端系统），所以授权采用静默授权获取openID.
授权流程
1、 授权页wxAuthPage --》微信授权OAuth --》 重定向授权页 --》wxAuthPage页拿到code --》 wxAuthPage 获取 openId - -》 根据openID与后端交互决定去首页or登陆页，做后续的业务逻辑
授权流程图
-
网页授权回调域名配置
- 需要先到公众平台官网中的
【设置与开发】-【功能设置】-【网页授权域名】的配置选项中，配置授权回调域名。回调域名可配置多个（一般只会配置一个回调页，统一进行授权），授权页面需要下载上传【授权文件】（MP_文件）到【回调页面】所在项目的根目录下。详见公众号回调域名配置
image.png
- 需要先到公众平台官网中的
image-1.png
坑点！！！：配置回调页面时，一直提示文件找不到匹配，已经按照文档指示，把文件下载，放在了项目的根目录里，排查后发现打包后的dist目录没有MP文件（``项目打包时，MP文件因为没有引用，所以没有打包到dist目录里``）
image-3.png
解决方案如下：本项目框架是UNIAPP，流水线自动打包上传项目（Docker容器），MP文件因为没有被引用，没有打包到dist目录里，所以打包后需要把MP文件添加进dist文件，配置如下：
COPY MP_verify_LZajyYxePcus2bkd.txt /usr/share/nginx/html
image-4.png
具体步骤如下
-
发起授权获取openID
可后端做，也可前端做，本项目由前端发起，参数说明如下网页授权的作用域scope:
snsapi_base：（静默授权）
snsapi_userinfo
appid："wx520c15f417810387"----服务端维护
redirect_uri：回调成功后URL页面（wxAuthPage）
secret：公众号的appsecret----服务端维护
一： 发起授权，获取code。
引导用户打开授权链接页面：
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
二.：同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE。
三：通过code换取网页授权access_token 和 openid
网页授权的作用域为snsapi_base，本步骤中获取到网页授权access_token的同时，也获取到了openid， snsapi_base式的网页授权流程即到此为止。
将授权拿到的code传给后端，通过后端调用微信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
正确时返回的JSON数据包如下：
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE",
"is_snapshotuser": 1,
"unionid": "UNIONID"
}
```
四：拿到openID后跟后端进行登陆绑定交互
后端根据openID进行判断用户是否关联手机号
未关联：引导用户填写手机号，关联手机号和openID
已关联： token未失效，进入h5首页，失效，引导去登陆页。
