🎉 博客主页：【剑九 六千里-CSDN博客】【剑九 六千里-掘金社区】
🎨 上一篇文章：【React中的无状态组件：简约之美】
🎠 系列专栏：【面试题-八股系列】
💖 感谢大家点赞👍收藏⭐评论✍
引言
在数字化时代，我们几乎每天都会接触到各种各样的二维码，尤其是在登录网站或应用程序时。扫描二维码登录不仅提升了用户体验，还极大地简化了登录流程，增强了安全性。本文将深入探讨这一技术背后的原理，以及前后端如何协同工作，实现这一看似简单的功能。
1、二维码登录的基本流程
graph TD;
A[用户访问网页] --> B{生成会话标识};
B --> C[生成二维码];
C --> D{用户扫描二维码};
D --> E[解析URL, 发送请求];
E --> F{服务器验证用户};
F -->|验证失败| G[显示错误];
F -->|验证成功| H{更新登录状态};
H --> I[前端检测登录];
I -->|未登录| J{继续轮询};
I -->|已登录| K[显示登录成功];
style A fill:#f9d6c1,stroke:#333,stroke-width:4px
style B fill:#f9d6c1,stroke:#333,stroke-width:4px
style C fill:#f9d6c1,stroke:#333,stroke-width:4px
style D fill:#f9d6c1,stroke:#333,stroke-width:4px
style E fill:#f9d6c1,stroke:#333,stroke-width:4px
style F fill:#f9d6c1,stroke:#333,stroke-width:4px
style G fill:#f9d6c1,stroke:#333,stroke-width:4px
style H fill:#f9d6c1,stroke:#333,stroke-width:4px
style I fill:#f9d6c1,stroke:#333,stroke-width:4px
style J fill:#f9d6c1,stroke:#333,stroke-width:4px
style K fill:#f9d6c1,stroke:#333,stroke-width:4px
2、二维码登录的基本原理
二维码登录的核心在于利用二维码作为媒介，传递必要的登录信息，从而在不同的设备之间建立连接。这一过程涉及前端（网页端）、后端（服务器端）以及用户设备（如手机）之间的交互。
3、前端视角：生成与检测
在前端，当用户打开需要登录的网页时，系统会首先向服务器请求一个临时的会话标识（例如，sessionID）。随后，前端会基于此会话标识生成一个二维码，该二维码内嵌有指向服务器登录接口的URL，以及必要的安全参数。
为了检测登录状态的变化，前端会定期向服务器发送请求，询问是否已有用户通过扫描二维码完成登录。这一过程通常采用轮询机制，即每隔一段时间（如5秒）就发起一次查询，直到接收到登录成功的信号为止。
4、后端视角：验证与响应
当用户使用移动设备扫描二维码时，设备上的应用会解析二维码中的URL，并向服务器发送包含用户登录凭证（如OAuth token）的请求。服务器接收到请求后，会验证用户的身份，确认其是否已在移动应用中登录，并检查二维码中的会话标识是否有效。
一旦验证成功，服务器会将相应的会话标识标记为已登录状态，并可能返回一些用户信息给前端，以便更新用户界面。
5、用户设备的角色
用户设备（如智能手机）在这一过程中扮演着关键角色。它负责扫描二维码，解析其中的URL，并向服务器发起登录请求。一旦服务器验证通过，用户即可在网页端享受无缝登录的体验。
6、前后端的无缝连接
前后端的紧密合作是实现二维码登录的关键。前端负责生成二维码并持续检测登录状态；后端则负责处理登录请求，验证用户身份，并更新登录状态。两者之间的通信确保了用户在不同设备间的登录信息同步，提供了流畅而安全的用户体验。
7、生成二维码的代码示例
下面是一个使用qrcode库生成二维码并显示在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>
测试：
扫描后如下：
你可以根据自己的需求调整登录URL和页面样式。
