探索扫描二维码登录的奥秘：从前端到后端的无缝连接

🎉 博客主页：【剑九六千里-CSDN博客】

🎨 上一篇文章：【React中的无状态组件：简约之美】

🎠 系列专栏：【面试题-八股系列】

💖 感谢大家点赞👍收藏⭐评论✍

文章目录

1、二维码登录的基本流程
2、二维码登录的基本原理
3、前端视角：生成与检测
4、后端视角：验证与响应
5、用户设备的角色
6、前后端的无缝连接
7、生成二维码的代码示例

引言
在数字化时代，我们几乎每天都会接触到各种各样的二维码，尤其是在登录网站或应用程序时。扫描二维码登录不仅提升了用户体验，还极大地简化了登录流程，增强了安全性。本文将深入探讨这一技术背后的原理，以及前后端如何协同工作，实现这一看似简单的功能。

1、二维码登录的基本流程

验证失败验证成功未登录已登录用户访问网页生成会话标识生成二维码用户扫描二维码解析URL, 发送请求服务器验证用户显示错误更新登录状态前端检测登录继续轮询显示登录成功

2、二维码登录的基本原理

二维码登录的核心在于利用二维码作为媒介，传递必要的登录信息，从而在不同的设备之间建立连接。这一过程涉及前端（网页端）、后端（服务器端）以及用户设备（如手机）之间的交互。

3、前端视角：生成与检测

在前端，当用户打开需要登录的网页时，系统会首先向服务器请求一个临时的会话标识（例如，sessionID）。随后，前端会基于此会话标识生成一个二维码，该二维码内嵌有指向服务器登录接口的URL，以及必要的安全参数。

为了检测登录状态的变化，前端会定期向服务器发送请求，询问是否已有用户通过扫描二维码完成登录。这一过程通常采用轮询机制，即每隔一段时间（如5秒）就发起一次查询，直到接收到登录成功的信号为止。

4、后端视角：验证与响应

当用户使用移动设备扫描二维码时，设备上的应用会解析二维码中的URL，并向服务器发送包含用户登录凭证（如OAuth token）的请求。服务器接收到请求后，会验证用户的身份，确认其是否已在移动应用中登录，并检查二维码中的会话标识是否有效。

一旦验证成功，服务器会将相应的会话标识标记为已登录状态，并可能返回一些用户信息给前端，以便更新用户界面。

5、用户设备的角色

用户设备（如智能手机）在这一过程中扮演着关键角色。它负责扫描二维码，解析其中的URL，并向服务器发起登录请求。一旦服务器验证通过，用户即可在网页端享受无缝登录的体验。

6、前后端的无缝连接

前后端的紧密合作是实现二维码登录的关键。前端负责生成二维码并持续检测登录状态；后端则负责处理登录请求，验证用户身份，并更新登录状态。两者之间的通信确保了用户在不同设备间的登录信息同步，提供了流畅而安全的用户体验。

7、生成二维码的代码示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Code Login Demo</title>
    <script src="./js/qrcode.js"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        #qrcode {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div id="qrcode"></div>
    <script>
        console.log(QRCode, 'QRCode')
        var qrcode = new QRCode('qrcode', {
            text: 'http://www.baidu.com', // 根据自己的需要替换地址
            width: 256,
            height: 256,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        });
        console.log(qrcode, 'qrcode')
    </script>
</body>
</html>

测试：

扫描后如下：

以上就是一个基本的使用JavaScript生成并显示二维码的示例，你可以根据自己的需求调整登录URL和页面样式。