公众号授权流程

公众号获取授权流程

背景

在公众号网页中,使用系统，根据用户手机号进行账号同步关联（PC端系统），所以授权采用静默授权获取openID.

授权流程

1、授权页wxAuthPage --》微信授权OAuth --》重定向授权页 --》wxAuthPage页拿到code --》 wxAuthPage 获取 openId - -》根据openID与后端交互决定去首页or登陆页，做后续的业务逻辑

授权流程图

网页授权回调域名配置
1. 需要先到公众平台官网中的 【设置与开发】-【功能设置】-【网页授权域名】的配置选项中，配置授权回调域名。回调域名可配置多个（一般只会配置一个回调页，统一进行授权），授权页面需要下载上传【授权文件】（MP_文件）到【回调页面】所在项目的根目录下。详见公众号回调域名配置
  
  image.png

image-1.png

坑点！！！：配置回调页面时，一直提示文件找不到匹配，已经按照文档指示，把文件下载，放在了项目的根目录里，排查后发现打包后的dist目录没有MP文件（``项目打包时，MP文件因为没有引用，所以没有打包到dist目录里``）
    ![image-2.png](https://upload-images.jianshu.io/upload_images/2928576-d45f37fb4e985402.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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首页，失效，引导去登陆页。

公众号授权流程