公众号H5授权

微信公众号授权，以公众平台接口测试帐号为例

1.申请测试号

申请公众测试号地址

2.配置网页授权回调地址，并关注测试号

3.网页授权

微信网页授权文档

分为两种形式 静默授权（snsapi_base） 网页授权（snsapi_userinfo），我们以网页授权为例，下方贴图为网页授权的弹框

1. 区别：有无授权完整服务弹框
2. 业务：有的网页只需要用户openid进行绑定，所以不需要弹框授权完整服务，用户会觉得整体体验不好。
3. snsapi_base：scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的。
4. snsapi_userinfo：scope发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。

// appid 为测试号的appid
// redirect_uri 为授权成功需要跳转的url地址，需要使用encodeURIComponent编码，微信会拼接code，code作用是获取acces_token
// 授权成功 http://127.0.0.1/login?code=001BWV4J1lRzz00H4J1J1vRE4J1BWV4q&state=1
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(redirect_uri)}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`

4.通过code换取网页授权access_token

前端接收地址栏code，调用后端提供的接口，后端通过下方接口获取用户access_token，判断是否注册，走注册或者系统业务逻辑流程

api.weixin.qq.com/sns/oauth2/…

{
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"SCOPE",
  "is_snapshotuser": 1,
  "unionid": "UNIONID"
}

流程如下

完结撒花