携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情
最近需要做一套h5系统，将其挂在微信公众号上展示，要求老用户从微信公众号底部配置的菜单点击进入系统时，能够通过微信信息实现自动登录，不用后续再进入到登录页进行登录操作，这就需要实现用户体系和微信openid的绑定，这样通过微信网页授权获取到微信openid后，就可以实现用户自动登录。下面我们来详细看下实现流程。
1. 准备工作
-
微信公众号账号申请
注意这里申请的是服务号，订阅号功能和服务号不一样，不要申请错了，申请成功并且认证后，登录后台查看下appid，后续授权需要这个信息。
-
https域名申请
微信网页授权域名只支持https，申请完https域名后，需要将其配置在公众号后台中的网页授权域名当中。
配置此授权域名时，要注意需要将微信提供的校验文件放置在域名根目录或者配置的目录下，例如，如果校验文件是abcd.txt，配置的授权域名是a.test.com ，那么需要保证a.test.com/abcd.txt 能够访问到；如果配置的授权域名是带目录的（我们的项目可能是部署在某个服务下的一个二级目录当中），例如，a.test.com/b-h5 那么就需要保证a.test.com/b-h5/abcd.t… 能够访问到。
ps：项目前期调试如果正式的服务号或https域名还没有申请下来，那么可以先申请一个公众平台的测试账号来使用（微信公众号测试号申请地址），此测试账号可以配置本地ip地址来进行网页授权的调试。
2. 代码接入
代码大致逻辑如下：
- 在vue项目的路由前置守卫中，对需要进行授权的页面进行拦截
- 首先判断是否已经是登录状态（登陆成功后会存一个登录的标志），如果是登录状态则直接进入页面；如果非登录状态，则判断页面url上是带有微信授权code，如果没有则跳转到微信授权页面，授权成功后会在返回地址上自动加上微信授权code，如果页面url上带有授权code，然后就可以通过这个授权code调取后端接口，获取到微信的openid，进行自动登录。
router.beforeEach(async (to, from, next) => {
const { code: wxCode } = to.query
if (to.path === '/login') {
next()
return
}
if (!isLogin()) {
if (wxCode) {
// 这里通过返回的授权code调取后端接口获取openid，并进行自动登录
// ...大家可根据自己后端同事提供的接口进行编写
next()
} else {
// 不同环境公众号下的appid和授权域名
const { VUE_APP_WEIXIN_APPID, VUE_APP_AUTHORIZE_DOMAIN } = process.env
const redirectUrl = `${VUE_APP_AUTHORIZE_DOMAIN}${to.fullPath}`
// 用户基本信息授权
const scope = 'snsapi_userinfo'
const state = 'test'
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${VUE_APP_WEIXIN_APPID}&redirect_uri=${redirectUrl}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`
}
return
}
next()
})
授权方式有两种，也就是scope的值有snsapi_userinfo和snsapi_base两种，其中snsapi_base是静默授权，snsapi_userinfo是微信用户信息的授权，如果不需要获取用户信息，仅仅只需要一个微信openid，则可以使用静默授权。
如果需要获取微信unionid，和其他相关的应用打通用户体系，那么也需要使用snsapi_userinfo才可以获取到unionid信息（具体unionid机制这里不做概述）。
注意，appid和授权域名测试环境和生产环境不一样，所以将其配置在vue环境变量当中。
3. 调试
网页授权的调试，需要下载微信开发者工具，进入工具后，打开公众号网页如下图：
在上方地址栏输入自己页面的地址就可以模拟网页授权流程，并对页面进行调试啦。
ps: 调试前，需要将开发者的微信号在后台进行绑定
