实现微信小程序扫码登录

先上效果

实现流程图

流程图解释

1. 用户访问网页打开扫码登录
2. 加载携带唯一登录标识小程序码
3. 用户扫码打开，同步状态为已扫码
4. 网页端轮询请求状态是否为已授权登录
5. 登录成功，获取Token跳转系统
6. 登录失败，可刷新码重新扫码

小程序码选择

小程序文档
这里我们选择 获取不限制的小程序码 来生成登录码，其余两个有数量限制。小程序链接有企业限制，所以用这个最优，都可以用。

实操

1、生成登录二维码

获取不限制的小程序码可以传递一个scene参数，这个参数我们可以用来放我们自定义的内容，比如这里我们生成的时候可以存放本次生成的登录唯一标识。
根据这个唯一标识为key，设置一个临时存储，值目前可以设置一个登录状态来标识此码的状态，用来做后续的登录逻辑支撑。这个推荐放入缓存，设置几分钟过期时间。
这个缓存很重要，会贯穿我们整个登录的上下文

• 注意scene最大字符为32个，具体限制见下图或小程序文档
• 获取小程序接口请求token就略过了，能做这个需求就默认已经用过小程序的Api了
• 若系统有高并发登录量，可提前预生成这个不限制的码（微信限制该接口5000次/分钟）
  

2、微信扫码打开

微信扫码上一步中生成的码会跳到生成时指定的page页面，可以在onload周期方法中获取到scene参数的值。
根据scene参数为key查找此次登录的缓存是否存在，状态是否为未扫码，小程序是否可以展示登录按钮等
逻辑都无误后可以调用后端接口，将接口状态改为已扫码，网页登录界面可以展示码的状态为已扫码，防止一个码被多人使用

3、小程序执行登录逻辑

可以在小程序页面中自定义登录样式，引导用户执行登录流程。
这里需要注意登录的两个要素：

1. 该用户扫的哪个码，就是我们在进入登录页面时解析拿到的scene参数的值
2. 需要告诉后端服务当前是哪个小程序用户在登录
   • 这里我是将scene和小程序登录code一并传入后端，后端通过小程序登录接口拿code就可以换到小程序用户的openid，确定是哪个用户登录了
   • 如果小程序用户在应用中已登录，也可以通过小程序在应用中登录的token，来确定用户
   • 不做扩展了，只要能确定是哪个用户登录，各个方式都可以。

4、后端服务判断登录逻辑

后端收到小程序登录执行动作，根据接收的登录唯一标识值，也就是解析的scene参数值，来判断登录状态是否正常
根据收到的小程序唯一用户标识，来判断用户是否正常
确定逻辑都正确后，将该用户信息写入缓存的值中，并将登录状态设置为已成功。

5、登录成功

网页在展示了登录码之后，应该一直处于轮询状态，这个轮询的时间间隔可以由开发者自定。
一旦发现获取到的登录状态为成功，则应立即后端调用登录成功接口，获取token，跳转完成此次登录。

6、登录失败

登录状态为失败时，网页端应给予刷新登录码操作，让用户可以重新执行该流程。

重点概括

登录唯一标识：自生成的参数值，我这里采用guid除去-刚好32位。

登录状态：可以自定义标识整个登录周期中的状态。例：

• 0：未扫码
• 1：已扫码
• 2：登录成功
• -1：登录失败

登录缓存：这个数据只在当前用户的登录流程中使用，使用缓存可提高性能。且可设置过期时间，用完即弃。

至此就完成小程序扫码登录了