怎样实现微信公众号扫码关注完成登录(超详细流程)

一步一个脚印一个坑 11天前 ⋅ 100 阅读
ad

 

Hello,大家好,欢迎使用Webfunny前端监控和埋点平台。

今天,我们来详细介绍一下关注微信公众号后,并完成登录的详细流程。微信登录广为人知了,涉及到订阅号,公众号,小程序等,他们各自登录流程有和区别,很多同学可能不甚清楚。我也是经过一番调研和倒腾才搞明白了是怎么回事,特此记录,以供大家了解和学习。

可以完成微信登录主要涉及两个平台,一个微信公众平台,一个是微信开放平台,他们俩服务的对象是不同的。

微信开放平台主要面对移动应用/网站应用开发者,为其提供微信登录、分享、支付等相关权限和服务。

微信公众平台用于管理、开放微信公众号(包括订阅号、服务号、企业号),简单的说就是微信公众号的后台运营、管理系统。

一、调研的目的

使用微信扫码登录,非常方便,除了可以快捷登录,我们也希望用户能够关注我们的公众号,可以达到运营的目的。所以需要先关注公众号,然后实现登录目的。微信开放平台提供了扫码登录能力,然而微信公众号并没有提供可以登录的权限,所以就不得不换一种思路来实现了。

二、注册服务号

如果想要实现关注公众号完成登录,就必须先要注册一个服务号。 值得注意的是:订阅号是无法做到扫码登录的,因为它没有对应的API调用权限。

三、完成微信认证

注册服务号需要有企业信息,进行微信认证,上传相关材料,支付一定的费用,每年的年审费用是300元,这里就不再赘述了。

四、生成开发者密码,设置白名单

开发者密码,默认是没有的,需要重置一下,重置好了以后,请妥善保存,后边需要使用。

IP白名单需要配置,也就是你部署后端服务器的机器IP地址。

五、配置服务器地址

配置服务器地址,这一步很重要,是完成关注登录的重要流程。首先你要启动一个后端服务,添加对应的响应接口。注意:这里的配置会有一些困惑的地方,需要用同一个接口分别配置 GET、POST两个方法。

/** 微信回调服务 */
router.get('/callback', Wechat.callback)
router.post('/callback', Wechat.callbackPost)

GET请求的接口用于配置服务器的时候做token验证,这个接口需要在配置服务器的时候做验证,需要提前部署好,否则可能无法配置成功。

  static async callback(ctx) {
    const param = Utils.parseQs(ctx.request.url)
    const { signature, echostr, timestamp, nonce } = param
    const token = "token string"  // 这里就是上一步配置的token
  
    // 将 token、timestamp、nonce三个参数按字典序排序
    const str = [token, timestamp, nonce].sort().join('');
  
    // 加密字符串, 建议使用 sha1加密
    const sha1 = crypto.createHash('sha1');
    sha1.update(str);
    const sha1Str = sha1.digest('hex');
  
    if (sha1Str === signature) {
      console.log("验证成功")
      ctx.response.status = 200
      ctx.body = echostr
    } else {
      ctx.response.status = 200
      ctx.body = "error"
    }
  }

六、处理关注接口的回调方法

POST请求的接口用于接收关注、取消关注、用户回信等事件的回调信息。

const {signature, timestamp, nonce} = Utils.parseQs(ctx.request.url)
const { xml } = ctx.request.body
const {ToUserName, FromUserName, CreateTime, MsgType, Event, EventKey} = xml

参数说明请查看文档

七、打通关注公众号和自己业务之间的关系

这是很重要的一步,用户关注你了,怎么才能让公众号里的openid跟自己的业务id关联上呢,因为只有实现关联后,才能算真正完成登录了,下边是整个流程的时序图:

八、接口配置公众号菜单

如果咱们配置服务器回调地址,那么自动回复,和手动配置的菜单将无法再使用了,也就是说关注登录和手动配置菜单不可兼得,提示如下:

用户关注了,这么光秃秃的也不行啊,所以需要配置菜单:

PS:如果需要更新菜单,则需要先删除,然后再创建。

各种参数的介绍我就不在这里赘述了,大家可以参考文档:文档地址

1. 创建菜单的接口:

https://api.weixin.qq.com/cgi-bin/menu/create?access_token=token

2. 删除菜单的接口:

https://api.weixin.qq.com/cgi-bin/menu/delete?access_token=token

3. 获取素材接口:

https://api.weixin.qq.com/cgi-bin/material/batchget_material?access_token=token

总结:虽然微信公众号是一个非常成熟的平台了,但是要把这套流程理清楚搞下来,还是要退层皮啊 !!!o(╥﹏╥)o  微信公众号文档比较齐全,但是有很多容易误解的地方,需要先理解一部分,在结合网络上前辈的经验才能顺利搞定。

最后、公众号关注并登录的流程就完成了,有什么问题的话,请联系我们吧 ^ _ ^

关于Webfunny

Webfunny专注于前端监控系统,前端埋点系统的研发。 致力于帮助开发者快速定位问题,帮助企业用数据驱动业务,实现业务数据的快速增长。支持H5/Web/PC前端、微信小程序、支付宝小程序、UniApp和Taro等跨平台框架。实时监控前端网页、前端数据分析、错误统计分析监控和BUG预警,第一时间报警,快速修复BUG!支持私有化部署,Docker容器化部署,可支持千万级PV的日活量!

  点赞 0   收藏 0
  • 一步一个脚印一个坑
    共发布114篇文章 获得4个收藏
全部评论: 0