扫描二维码登录的流程

1. 用户打开网站的扫码登录页面的时候，向浏览器的服务器发送获取登录二维码的请求。

二维码生成的方式很多，可以前端生成，也可以后台生成返回图片地址的形式。 通常情况下前端来完成二维码的生成展示。

浏览器发送请求后，后端接口返回uuId,与扫码跳转的地址。如下：

{
    scanUUId: '$uuu#-123456-asdf88dxx5555599995',
    scanUrl: "https://xxx.com/appAuth?scanUUId=%2uuu%23-123456-asdf88dxx5555599995&appId=c_MjMwMzEwMDAzYw",
}

另外，redis服务器中存下上述uuId对应的用户信息（通常存的是userId）与过期时间（扫码前用户信息为空，uuId键值对应的value为空）。

2. 前端生成二维码（vue项目为例）

<script setup>
import QRCode from "qrcodejs2-fix";
import { ref, onMounted } from "vue";

let qrCode = ref();
let content = `https://xxx.com/appAuth?scanUUId=%2uuu%23-123456-asdf88dxx5555599995&appId=c_MjMwMzEwMDAzYw`;
onMounted(() => {
  const qrCodeS = new QRCode(qrCode.value, {
    text: content,
    width: 180,
    height: 180,
    colorDark: "#333333",
    colorLight: "#ffffff",
    // correctLevel: QRCode.correctLevel.H,
    render: "canvas",
  });
  qrCode.value.title = "";
});
</script>

<template>
  <div ref="qrCode" id="qrCode"></div>
</template>

3. 网页端通过长轮询，带上返回的uuId不断去请求后端接口，后端接口向redis服务器请求查看用户信息。

此时的用户authStatus为0，表示未扫码

4. 访问二维码，确定还是取消授权

手机端扫码后跳到初次访问生成二维码的接口返回的url地址xxx.com/appAuth?sca…

手机服务器收到访问请求后，首先对比参数中的验证信息，确定是否为用户登录请求接口。如果是，返回一个确认信息给手机端。 如下图，此时的authStatus表示已扫码

手机端收到返回后，登录确认框显示给用户。用户确认是进行的登录操作后，手机再次发送请求。手机端服务器拿到userId后，将用户的userid作为value值存入redis中以uuid作为key的键值对中。 网页端轮询接口服务可以通过userId取到数据库中的用户信息，取到用户信息后，停止轮询接口。

当然如果二维码超时了，也会停止轮询请求接口。

5. 浏览器端利用userId，调用登录的方法login服务，生成一个token，登录成功。然后跳到相关界面。