准备阶段

• 一个开通了服务号功能的微信号(一个微信号只能开通一项微信公众服务,所以如果你的微信号已经用于开发小程序,则请使用其它微信号或者公众测试号)

• 使用微信测试号(推荐,下面以测试号为例)

  进入微信公众号测试账户平台

进行配置

1. 在测试号管理界面,首先扫码登录后,关注该微信公众号

image.png

2. 设置回调地址(这个请设置为直接跟你H5网页的地址一致)

image.png

image.png

开始授权

• 更多细节,请参考官网文档,建议大致读一下____点击进入官方文档

1. 引导用户点击相关授权链接,同意授权，获取code(这个链接的具体配置是根据个人配置组合成的)

   https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd4b3bae38393b376&redirect_uri=http%3A%2F%2F10.85.21.166%2F%23%2Fwelcome&response_type=code&scope=snsapi_base&state=#wechat_redirect

   //这个组合的链接很多都是固定写法,只有下面这个几个参数可以根据情况自己填写
   
   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

2. 让后端根据前端授权后得到的code换取网页授权access_token
3. 通过网页授权access_token和 openid 获取用户基本信息

• (备注:前端基本只需要做第一步就可以了,就是引导用户点击授权链接)