前端微信公众号H5页面授权

准备阶段

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

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

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

进行配置

  1. 在测试号管理界面,首先扫码登录后,关注该微信公众号
image.png
  1. 设置回调地址(这个请设置为直接跟你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
  1. 让后端根据前端授权后得到的code换取网页授权access_token
  2. 通过网页授权access_tokenopenid 获取用户基本信息
  • (备注:前端基本只需要做第一步就可以了,就是引导用户点击授权链接)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容