自律带来自由

前言

在很多业务场景中，我们需要实现“微信扫码登录”的需求，比如：

示例：小程序上的用户“收藏了与网站收藏相同的内容”。或者登录网站后“查看您的订单信息”。

本方案将基于“微信小程序”来实现该功能。 （ps：这是实现微信登录的解决方案之一）

❝

前提知识

❞

首先我们要了解微信创建的每一个带有“”的程序。注册后，每个微信用户都会在这个小程序中拥有一个“唯一的用户标识”。在此基础上可以开展用户相关业务。

整体的认证流程以及获取“小程序码（扫码登录的代码）”的过程对于刚接触的人来说有点复杂。如果你不明白，我可以把源码发给你，里面已经封装了这些流程。

❝

源码中提供了两套解决方案

❞

它们都是开箱即用的，只需填写配置信息即可：注册信息后即可直接调用**

1、第一套方案耦合度比较高，需要设置相应的数据库字段。

2、非侵入式解决方案，提供便捷的API，一键直接获取小程序代码。灵活插入个人业务逻辑。

直接获取小程序代码保存到磁盘，简单快捷。

操作流程如下图

该方案是基于小程序来获取用户信息，因此需要先注册一个小程序。

请参考官方文档，这里不再赘述。

这里简单介绍一下“小程序码”和“小程序二维码”的区别。

我之前的小程序

两个代码看起来都差不多像这样。实现后，图标将是自己小程序的图标。

“小程序二维码”就是我们平时扫描进入小程序的二维码。

“小程序码”是通过接口生成的，扫描后可以“进入指定页面”（这里就是我们的“认证接口”），“并且可以携带一个参数（值），在认证接口中接收我们的登录”逻辑也会基于这个值进行扩展。”

可以查看微信开放文档的相关API：

❝

《小程序代码获取流程》

❞

GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

POST https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN

“笔记”

因此，我们使用“”值来区分和标记用户扫描的是哪个代码。

❝

电脑端扫码

❞

此时，就意味着我们已经将刚才请求接口生成的“小程序代码”保存到了服务器上的某个文件夹中。那么我们只需要将这张图片通过某种方式映射到前端进行显示即可。您可以使用“配置静态资源映射”（“映射”）或“映射”。该项目的源代码使用了“映射”。 ps：当然图片都保存了。如何显示它们并进行更改很简单。

❝

手机认证

❞

扫描小程序代码就会进入我们编写的指定页面。只要得到了“值”，我们就可以开始处理业务逻辑了。

“获取价值”

换句话说，“每个生成的小程序代码都是不同的”。除了能够扫码进入指定页面之外，它还携带一个“”参数来让我们执行所需的业务逻辑。同时，该值也保证了小程序代码的“唯一性”。

我们需要在小程序中写一个类似这样的接口。扫描二维码，即可进入此界面。

在页面的js文件中，我们可以这样获取这个“值”

Page({
  onLoad (query) {
    // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
    const scene = decodeURIComponent(query.scene)
  }
})

接下来我们就可以进行我们需要的业务逻辑了。本文主要介绍登录需求。 《文末项目源码中有完整认证逻辑的js文件参考》

序列图理解

为了更好地理解登录逻辑，我们可以先看一下登录的“时序图”。

解决方案实施步骤

“准备工作。”我们需要准备两张表，一张是“用户信息表”，一张是“小程序代码状态表”，也就是存储“值”的表。当然，认证成功后，这张表需要与用户ID关联起来。通知前端已认证的用户信息。

小程序扫码状态表显示扫码状态和场景值。

此时没有任何值，状态为等待扫码。

首先将用户信息插入到用户表中（用户数据是在小程序中获取的，可以通过调用小程序的api来获取）

同样根据该值，修改登录表

可以看到到这一步，扫码状态已经变成了“”，说明认证成功。如果用户取消认证，则为“”

确实有。

然后完成登录相关操作。当然，业务中还需要添加“”相关的内容。本文主要关注如何扫描二维码获取用户“”。

源代码链接地址： 提取码：7nnw。

如果过期了，请加我微信，私发给大家。