微信公众号扫码关注登录功能实现

一、简介

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

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

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

回填参数模板如下

名称	例如
登录平台
登录地址
登录账号
登录IP
登录时间

1. 目的

使用微信扫码登录，非常方便，除了可以快捷登录，我们也希望用户能够关注我们的公众号，可以达到运营的目的。

所以需要先关注公众号，然后实现登录目的。微信开放平台提供了扫码登录能力，然而微信公众号并没有提供可以登录的权限，所以就不得不换一种思路来实现了。

二、操作流程

1. 注册服务号

如果想要实现关注公众号完成登录，就必须先要注册一个服务号。

注意：订阅号是无法做到扫码登录的，因为它没有对应的API调用权限。

参考文档：微信公众号申请

2. 生成开发者密码，设置白名单

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

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

3. 配置服务器地址

配置服务器地址，这一步很重要，是完成关注登录的重要流程。

首先你要启动一个后端服务，添加对应的响应接口。注意：这里的配置会有一些困惑的地方，需要用同一个接口分别配置 GET、POST两个方法。

/** 微信回调服务 */

router.get('/callback', Wechat.callback)

router.post('/callback', Wechat.callbackPost)

4. 回调处理

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

参考文档：模板消息 | 微信开放文档

参数	说明
ToUserName	公众号微信号
FromUserName	接收模板消息的用户的openid
CreateTime	创建时间
MsgType	消息类型是事件
Event	事件为模板消息发送结束
MsgID	消息id
Status	发送状态为用户拒绝接收

5. 业务流程图

这是很重要的一步，用户关注你了，怎么才能让公众号里的openid跟自己的业务id关联上呢，因为只有实现关联后，才能算真正完成登录了。

6. 接口配置公众号菜单

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

​
//创建菜单的接口

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

//删除菜单的接口

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

//获取素材接口

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

​

参考文档：微信开放文档