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=token2. 删除菜单的接口：
https://api.weixin.qq.com/cgi-bin/menu/delete?access_token=token3. 获取素材接口:
https://api.weixin.qq.com/cgi-bin/material/batchget_material?access_token=token总结：虽然微信公众号是一个非常成熟的平台了，但是要把这套流程理清楚搞下来，还是要退层皮啊 ！！！o(╥﹏╥)o 微信公众号文档比较齐全，但是有很多容易误解的地方，需要先理解一部分，在结合网络上前辈的经验才能顺利搞定。
最后、公众号关注并登录的流程就完成了，有什么问题的话，请联系我们吧 ^ _ ^
