扫码登录分析与实现

最新推荐文章于 2025-03-26 10:47:30 发布

IT枫斗者

最新推荐文章于 2025-03-26 10:47:30 发布

阅读量1.3k

点赞数 16

分类专栏： JAVA基础工作中实际总结编程学习文章标签： java-rocketmq rocketmq java 人工智能服务器

本文链接：https://blog.csdn.net/Andrew_Chenwq/article/details/144949909

版权

编程学习同时被 2 个专栏收录

719 篇文章

订阅专栏

JAVA基础工作中实际总结

638 篇文章

订阅专栏

扫码登录分析与实现

背景与概述

什么是扫码登录？

扫码登录是一种利用二维码技术进行用户身份验证的登录方式。它通过在客户端生成一个唯一标识的二维码（通常包含登录相关信息，如会话ID、加密的认证信息等），用户使用支持扫码的设备（如手机上的App）扫描二维码并完成授权。后台验证通过后，客户端即完成登录。
扫码登录的核心特征在于免去手动输入账号密码的步骤，借助移动设备的便捷性实现快速认证。

以下是淘宝网页版的扫码登录图示：

在这里插入图片描述

扫码登录的应用场景和优势

应用场景
- Web端登录
  用户通过PC浏览器访问一个网站，使用手机扫描二维码进行快速登录。例如微信网页版、淘宝Web端等。
- App间互联
  利用一个App扫码登录另一个App或平台。例如支付宝扫码登录其他应用服务。
- 设备绑定
  在IoT设备（如智能电视、智能音箱）上扫码登录，通过手机验证绑定账号信息。
- 共享设备
  在共享场景（如网吧、自助终端等）中，扫码登录可以减少物理输入的麻烦，保护隐私。
优势
- 高效便捷
  通过扫描二维码，用户免去输入账号密码的麻烦，登录时间大幅缩短。
- 跨设备登录
  用户可以轻松在不同设备间切换登录状态，例如从手机登录Web端。
- 安全性提高
  用户无需在不受信任的设备上输入密码，有效降低密码被劫持或泄露的风险。
- 提升用户体验
  适配移动端普及的趋势，为用户提供更现代化、友好的交互方式。

扫码登录的原理

前端生成二维码
- 初始化请求
  前端向后端发送请求，获取一个唯一标识符（如UUID）或加密的会话信息。
  后端记录该标识符和二维码的初始状态（如“未扫码”），并存储在Redis等高效存储工具中。
- 生成二维码
  前端使用二维码生成库（如qrcode）将唯一标识符编码成二维码，展示在页面上供用户扫码。
用户扫码并授权
- 用户使用移动设备的App（如微信、支付宝或特定的业务App）扫描二维码。
- 移动端通过二维码中的唯一标识符与后端交互，发送用户的登录授权请求。
- 后端校验用户身份（如检查是否已登录App、确认授权操作），更新二维码状态为“已授权”，并记录用户信息。
后端通知登录状态更新
- 后端根据前端的查询（轮询或WebSocket推送）返回二维码状态的实时更新：
  - 如果状态为“已授权”，前端完成用户登录操作（如跳转到主页面）。
  - 如果二维码过期，前端更新页面提示用户刷新二维码。

流程图解如下：

在这里插入图片描述

前后端交互的关键点

1. 二维码生成与信息绑定

二维码内容设计
- 通常二维码包含一个唯一标识符（如UUID）或加密的信息，用于标识当前会话。
- 可使用Base64进行编码或使用AES加密，防止二维码被伪造。
后端存储二维码状态
- 初始状态：未扫码。
- 已扫码：用户已扫描但未确认授权。
- 已授权：用户已确认授权，登录成功。
- 已过期：二维码有效期已过。
- 使用Redis等存储状态，利用其高效的键值对操作支持实时更新。
二维码有效期管理
- 后端为二维码设置一个有效期（如1-5分钟），过期后需重新生成，防止二维码被长期滥用。

2. WebSocket或轮询实现实时更新

轮询
- 前端定时（如每1-5秒）请求后端接口，检查二维码状态：
  - API 示例：GET /qr-status?uuid=xxxx。
  - 响应示例：{ "status": "authorized", "user": { "id": 123, "name": "John" } }。
- 简单易实现，但对后端压力较大，不适合高并发场景。
WebSocket
- 前端与后端建立长连接，后端通过WebSocket实时推送二维码状态更新。
- 优势：实时性强，减少无效请求，提升性能。
- 示例流程：
  1. 前端通过Socket.IO与后端建立连接：
```
const socket = io('https://example.com');
socket.emit('subscribe', { uuid: 'xxxx' });
```
  2. 后端监听并推送状态变化：
```
io.to('xxxx').emit('qrStatus', { status: 'authorized' });
```
  3. 前端接收更新并处理：
```
socket.on('qrStatus', (data) => {
    if (data.status === 'authorized') {
        window.location.href = '/dashboard';
    }
});
```

流程状态显示

初始状态：未扫码（new）

在这里插入图片描述

已扫码,但未确认(scaned)：

在这里插入图片描述

扫码后点击确认登录(authorized)

二维码过期(expired)：

在这里插入图片描述

选型建议
- 小型应用或低频访问场景可用轮询。
- 高并发或需要实时响应的场景建议使用WebSocket。

demo 代码示例

<template>
    <div class="app-container">
        <div class="register">
            <!-- 登录输入部分 -->
            <div class="register-content">
                    <!-- 扫码登录部分 -->
                    <div class="qr-login">
                        <canvas ref="qrCanvas" class="qr-code"></canvas>
                        <p v-if="qrStatus === 'waiting'">请使用移动设备扫码登录</p>
                        <p v-if="qrStatus === 'scanned'">二维码已扫描，请确认登录</p>
                        <p v-if="qrStatus === 'expired'">二维码已过期，请刷新页面</p>
                        <el-button v-if="qrStatus === 'expired'" @click="generateQRCode">重新生成二维码</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import QRCode from 'qrcode';
import axios from 'axios';

const qrCanvas = ref(null);
const qrStatus = ref('waiting'); // 状态：waiting, scanned, expired
const qrUUID = ref('');
let pollInterval = null;

// 生成二维码
const generateQRCode = async () => {
    try {
        // 请求后端生成UUID
        const response = await axios.get('/api/qr-code'); // 替换为真实后端接口
        qrUUID.value = response.data.uuid;

        // 使用二维码库生成二维码
        QRCode.toCanvas(qrCanvas.value, response.data.url, { width: 200 });

        // 启动状态轮询
        qrStatus.value = 'waiting';
        startPolling();
    } catch (error) {
        console.error('生成二维码失败', error);
    }
};

// 启动轮询
const startPolling = () => {
    pollInterval = setInterval(async () => {
        try {
            const response = await axios.get(`/api/qr-status/${qrUUID.value}`);
            qrStatus.value = response.data.status;

            if (response.data.status === 'authorized') {
                clearInterval(pollInterval);
                window.location.href = '/dashboard'; // 登录成功跳转
            }

            if (response.data.status === 'expired') {
                clearInterval(pollInterval);
            }
        } catch (error) {
            console.error('轮询失败', error);
        }
    }, 3000); // 每3秒请求一次
};

// 页面加载时生成二维码
onMounted(() => {
    generateQRCode();
});
</script>

<style scoped>
.qr-login {
    text-align: center;
    margin-top: 20px;
}
.qr-code {
    margin: 10px auto;
    display: block;
}
</style>