准备阶段
一个开通了服务号功能的微信号(一个微信号只能开通一项微信公众服务,所以如果你的微信号已经用于开发小程序,则请使用其它微信号或者公众测试号)
-
使用微信测试号(推荐,下面以测试号为例)
进行配置
- 在测试号管理界面,首先扫码登录后,关注该微信公众号
image.png
- 设置回调地址(这个请设置为直接跟你H5网页的地址一致)
image.png
image.png
开始授权
- 更多细节,请参考官网文档,建议大致读一下____点击进入官方文档
-
引导用户点击相关授权链接,同意授权，获取code(这个链接的具体配置是根据个人配置组合成的)
//这个组合的链接很多都是固定写法,只有下面这个几个参数可以根据情况自己填写 const DefaultConfig = { //这个是公众号的信息(参考下图,这个需要提供给后端,方便它去获取换取access_token) appId: "wxd4b3bae38393b376", //授权方式:静默授权 loginWay: "snsapi_base", //这个是授权后跳转的地址 redirectUriWx: "http://10.85.21.166/#/welcome", }; const newUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${DefaultConfig.appId}&redirect_uri=${url}&response_type=code&scope=${DefaultConfig.loginWay}&state=#wechat_redirect`;
image.png
- 让后端根据前端授权后得到的
code换取网页授权access_token - 通过网页授权
access_token和openid获取用户基本信息
- (备注:前端基本只需要做第一步就可以了,就是引导用户点击授权链接)
