如何快速实现微信公众号扫码关注完成登录（附：超详细操作流程）

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<微信公众号扫码登录>功能操作介绍, ps： 如果你是前端工程师的相关技术同学，欢迎试用体验**【webfunny前端监控和埋点系统】**