记录微信公众号H5网页授权

前言

公司最近要做一个微信h5项目，涉及到微信页面授权相关，其实之前有做过一次，但已经过去挺久，具体流程也忘得差不多了，想着写一篇文章，记录一下，给自己梳理梳理流程，后续开发也方便，如果能帮到各位开发小伙伴的话，也是一件很好的事情😁

这里先挂个官方文档-网页授权，里面有详细解释说明

记得先注册一个测试公众号

网页授权流程

1、引导用户进入授权页面同意授权，获取code

// code作为换取access_token的票据，每次用户授权带上的 code 将不一样，
// code只能使用一次，5分钟未被使用自动过期

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

2、通过 code 换取网页授权access_token、有了access_token才能调用微信接口获取微信用户信息等等

// 注意：由于公众号的 secret 和获取到的access_token安全级别都非常高，必须只保存在服务器
// 不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤，也必须从服务器发起。

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

3、access_token由于安全机制，存在时效，有需要可以refresh_token进行刷新，避免过期

// REFRESH_TOKEN是获取access_token接口的回调参数字段refresh_token

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

4、通过网页授权access_token和 openid 获取用户基本信息

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

流程图

scope参数就是一个授权作用域，分为静默授权与手动授权

snsapi_base 不弹出授权页面，用户无感知直接跳转，只能获取用户openid

// 微信访问预览
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect

snsapi_userinfo 弹出授权页面，可通过 openid 拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取信息

// 微信访问预览
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx807d86fb6b3d4fd2&redirect_uri=http%3A%2F%2Fdevelopers.weixin.qq.com&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

url参数就是微信授权后重定向回前端的回调地址

这里注意需要对url进行编码（encodeURIComponent），并且要配置 OAuth2.0 网页授权的回调页面域名（回调域名也是后台服务域名）

// http://192.168.2.65:8080/api/xxx为后端服务地址，
// 在服务端发起微信授权认证，成功之后会重定向至redirect页面并携带必要参数

    const url = window.location.href.split(/[?#]/)[0];
    const redirect = encodeURIComponent(url);
    window.location.href = `http://192.168.2.65:8080/api/xxx?redirect=${redirect}`;