记录---扫码登录分析与实现

天天向上冯

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣

前言

随着移动设备的普及，扫码登录成为一种便捷且安全的用户身份验证方式。它不仅免去了用户输入账号密码的繁琐步骤，还能减少密码泄露的风险。在当今的前端开发中，扫码登录已经成为许多应用的标配功能。那么，作为一名前端开发者，该如何实现这一功能呢？本文将从技术原理、前端实现细节以及实际案例 demo 出发，带领大家完成扫码登录功能的实现。

背景与概述

什么是扫码登录？

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

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

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

• 应用场景

  • Web端登录
    用户通过PC浏览器访问一个网站，使用手机扫描二维码进行快速登录。例如微信网页版、淘宝Web端等。
  • App间互联
    利用一个App扫码登录另一个App或平台。例如支付宝扫码登录其他应用服务。
  • 设备绑定
    在IoT设备（如智能电视、智能音箱）上扫码登录，通过手机验证绑定账号信息。
  • 共享设备
    在共享场景（如网吧、自助终端等）中，扫码登录可以减少物理输入的麻烦，保护隐私。

• 优势

  • 高效便捷
    通过扫描二维码，用户免去输入账号密码的麻烦，登录时间大幅缩短。
  • 跨设备登录
    用户可以轻松在不同设备间切换登录状态，例如从手机登录Web端。
  • 安全性提高
    用户无需在不受信任的设备上输入密码，有效降低密码被劫持或泄露的风险。
  • 提升用户体验
    适配移动端普及的趋势，为用户提供更现代化、友好的交互方式。

相关技术栈与基础知识

• 前端技术栈

  • 二维码生成
    使用库如qrcode（JavaScript）、qrcode.react（React专用）生成二维码。

  • 前端通信

    • 轮询：定时请求后端接口，查询登录状态。
    • WebSocket：实时通信，前端实时获取二维码状态更新。

  • UI组件库
    使用组件库（如Ant Design、Element-UI）优化交互和页面设计。

  • 状态管理
    使用Pinia、Vuex或Redux管理扫码登录状态，简化页面间的状态流转。

• 后端支持

  • 二维码内容生成
    后端生成二维码中包含的唯一标识（如UUID或会话ID）。

  • 登录状态存储
    使用Redis等高效存储方式记录二维码状态（未扫描、已扫描、已确认登录）。

  • API设计

    • 二维码状态接口：前端轮询或通过WebSocket获取状态更新。
    • 授权接口：处理用户扫码后的授权请求并返回结果。

• 安全性与加密技术

  • 使用HTTPS加密通信，确保二维码数据在传输中的安全性。
  • 在二维码中加入加密信息，防止二维码被伪造或劫持。
  • 设置二维码的有效期，减少被重复使用的风险。

扫码登录的原理

• 前端生成二维码

  • 初始化请求
    前端向后端发送请求，获取一个唯一标识符（如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' });

　　后端监听并推送状态变化：

io.to('xxxx').emit('qrStatus', { status: 'authorized' });

　　前端接收更新并处理：

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>

结语

扫码登录作为一种便捷又安全的登录方式，已经成为许多应用和服务的首选解决方案。在实际开发中，我们不仅要关注功能实现，更要注重用户体验和安全性。希望通过本文的解析和示例代码，您能够轻松上手，实现属于您项目的扫码登录功能。

本文转载于：https://juejin.cn/post/7447065417322201128

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

来源：https://www.cnblogs.com/smileZAZ/p/18846842