SpringBoot框架+Sa-Tonken+QRcode.js+实现二维码登录
'# SpringBoot框架+Sa-Tonken+QRcode.js+实现二维码登录
一、背景与问题
在现代Web应用中，二维码登录已成为一种常见的无密码认证方式。其核心原理是通过生成动态二维码，将用户身份信息进行加密后展示给用户，用户扫码后通过移动端与服务器进行双向验证。这种模式在扫码支付、企业内部系统、扫码签到等场景中被广泛应用。
传统密码登录存在诸多痛点：用户记忆负担重、密码泄露风险高、多设备登录同步困难。而二维码登录通过以下优势解决这些问题：
- 免密登录：用户无需输入密码
- 双重验证：二维码本身携带加密信息
- 短时有效：二维码具有时效性限制
- 设备绑定：可关联用户设备信息
但在实际开发中，开发者常遇到以下问题：
- 二维码生成与验证的耦合度高
- Token安全机制不完善
- 前后端数据交互不规范
- 多设备同步机制缺失
- 安全性漏洞（如二维码泄露）
二、基本原理
二维码登录的完整流程可分为以下阶段：
身份认证阶段：
- 用户发起登录请求
- 服务端生成包含用户身份信息的JWT Token
- 使用QRcode.js生成二维码图像
- 返回二维码给前端展示
扫码验证阶段：
- 用户使用移动设备扫描二维码
- 移动端解析二维码内容，提取Token
- 通过API与服务端进行双向验证
- 验证通过后建立会话
会话管理阶段：
- 使用Sa-Token进行用户状态管理
- 通过Redis缓存二维码信息
- 设置Token的有效期和刷新机制
- 记录设备指纹信息
核心安全机制包括：
- JWT Token的加密签名
- 二维码的时效性控制（通常为5-10分钟）
- 二维码内容的加密处理
- 设备指纹识别（通过浏览器指纹技术）
- 双重验证机制（二维码+设备认证）
三、环境准备
项目依赖：
<!-- SpringBoot基础依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Sa-Token鉴权 -->
<dependency>
<groupId>cn.sa-token</groupId>
<artifactId>sa-token-spring-boot-starter</artifactId>
<version>1.28.0</version>
</dependency>
<!-- QRcode.js支持 -->
<dependency>
<groupId>com.google.zxing</groupId>
<artifactId>core</artifactId>
<version>3.4.1</version>
</dependency>
<dependency>
<groupId>com.google.zxing</groupId>
<artifactId>javase</artifactId>
<version>3.4.1</version>
</dependency>
<!-- Redis支持 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>开发工具：
- IDEA或VSCode
- Postman（接口测试）
- Chrome开发者工具（调试）
- Redis客户端（监控缓存）
四、核心实现
1. 二维码生成器
import com.google.zxing.BarcodeFormat;
import com.google.zxing.WriterException;
import com.google.zxing.client.j2se.MatrixToImageWriter;
import com.google.zxing.client.j2se.MultiFormatWriter;
import com.google.zxing.common.BitMatrix;
import org.springframework.stereotype.Component;
import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.geom.AffineTransform;
import java.awt.geom.RoundRectangle2D;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.UUID;
@Component
public class QrCodeGenerator {
private static final int WIDTH = 300;
private static final int HEIGHT = 300;
private static final int MARGIN = 10;
public byte[] generateQrCode(String content) throws WriterException, IOException {
// 生成二维码矩阵
BitMatrix matrix = new MultiFormatWriter().encode(
content,
BarcodeFormat.QR_CODE,
WIDTH,
HEIGHT
);
// 转换为图像
BufferedImage image = MatrixToImageWriter.toBufferedImage(matrix);
// 添加水印
addWatermark(image);
// 转换为字节数组
ByteArrayOutputStream os = new ByteArrayOutputStream();
ImageIO.write(image, "png", os);
return os.toByteArray();
}
private void addWatermark(BufferedImage image) {
Graphics2D g = image.createGraphics();
g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.3f));
// 添加圆形水印
g.setColor(Color.WHITE);
g.fillOval(MARGIN, MARGIN, WIDTH - 2*MARGIN, HEIGHT - 2*MARGIN);
// 添加文字水印
Font font = new Font("Arial", Font.BOLD, 36);
g.setFont(font);
g.setColor(Color.BLACK);
g.drawString("扫码登录", (WIDTH - 150)/2, (HEIGHT - 36)/2);
g.dispose();
}
}关键点解释：
- 使用ZXing库生成二维码
- 添加水印防止二维码被截取
- 设置固定尺寸和边距
- 支持多种编码格式（UTF-8/ISO-8859-1）
2. 登录接口实现
import cn.sa-token.annotation.SaCheckLogin;
import cn.sa-token.starter.SaToken;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.view.RedirectView;
import org.springframework.http.HttpEntity;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.client.RestTemplate;
import javax.servlet.http.HttpServletResponse;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
@RestController
@RequestMapping("/api")
public class AuthController {
@Autowired
private QrCodeGenerator qrCodeGenerator;
@Autowired
private RedisTemplate<String, String> redisTemplate;
@GetMapping("/login")
public ResponseEntity<byte[]> getQrCode(HttpServletResponse response) {
// 生成唯一标识
String uuid = UUID.randomUUID().toString();
// 生成二维码内容（JWT Token）
String token = SaToken.getToken();
String qrContent = "token=" + token + "&uuid=" + uuid;
try {
byte[] qrCode = qrCodeGenerator.generateQrCode(qrContent);
return ResponseEntity.ok()
.header("Content-Type", "image/png")
.header("Cache-Control", "no-cache")
.body(qrCode);
} catch (Exception e) {
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
}
}
@PostMapping("/login/verify")
public ResponseEntity<?> verifyQrCode(@RequestParam String token, @RequestParam String uuid) {
// 验证Token有效性
if (!SaToken.checkToken(token)) {
return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("无效的Token");
}
// 验证二维码有效性
String qrContent = redisTemplate.opsForValue().get(uuid);
if (qrContent == null || !qrContent.equals(token + "&uuid=" + uuid)) {
return ResponseEntity.status(HttpStatus.FORBIDDEN).body("二维码过期或无效");
}
// 生成最终Token
String finalToken = SaToken.createToken();
redisTemplate.opsForValue().set(uuid, finalToken, 10, TimeUnit.MINUTES);
return ResponseEntity.ok().body(Map.of("token", finalToken));
}
}关键点解释：
- 使用Sa-Token管理Token生命周期
- 通过Redis存储二维码信息
- 防止二维码被重复使用
- 设置Token的有效期（10分钟）
- 支持扫码后的二次验证
3. 前端交互实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二维码登录</title>
<script src="https://unpkg.com/qr-code.js"></script>
<style>
#qrCode {
width: 300px;
height: 300px;
border: 2px solid #ccc;
margin: 20px auto;
display: block;
}
</style>
</head>
<body>
<div id="qrCode"></div>
<script>
// 获取二维码
fetch('/api/login')
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const img = document.createElement('img');
img.src = url;
document.getElementById('qrCode').appendChild(img);
});
// 监听扫码事件
document.addEventListener('DOMContentLoaded', () => {
// 模拟扫码动作（实际应由移动端触发）
setTimeout(() => {
fetch('/api/login/verify', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: 'token=xxx&uuid=yyy'
})
.then(response => response.json())
.then(data => {
if (data.token) {
alert('登录成功！Token: ' + data.token);
} else {
alert('登录失败');
}
});
}, 5000);
});
</script>
</body>
</html>关键点解释：
- 使用QRCode.js库生成二维码
- 模拟扫码动作（实际由移动端触发）
- 处理后端返回的Token
- 支持移动端扫码交互
五、完整案例
1. 项目结构
src
├── main
│ ├── java
│ │ └── com.example.qrlogin
│ │ ├── controller
│ │ │ └── AuthController.java
│ │ ├── service
│ │ │ └── QrCodeService.java
│ │ └── config
│ │ └── RedisConfig.java
│ └── resources
│ └── application.yml2. Redis配置
@Configuration
public class RedisConfig {
@Bean
public RedisConnectionFactory redisConnectionFactory() {
RedisConnectionConfiguration config = RedisConnectionConfiguration
.builder()
.host("localhost")
.port(6379)
.build();
return new LettuceConnectionFactory(config);
}
}3. 二维码服务类
import org.springframework.stereotype.Service;
@Service
public class QrCodeService {
public String generateQrCodeContent(String token, String uuid) {
return "token=" + token + "&uuid=" + uuid;
}
}4. 完整流程演示
- 用户访问
/api/login获取二维码 - 系统生成包含Token的二维码
- 用户扫码后，移动端向
/api/login/verify发送请求 - 系统验证Token有效性
- 验证通过后生成最终Token
- 返回最终Token给移动端
- 移动端完成登录流程
六、源码解析
1. 二维码生成机制
在QrCodeGenerator类中，使用ZXing库生成二维码时，关键代码：
BitMatrix matrix = new MultiFormatWriter().encode(
content,
BarcodeFormat.QR_CODE,
WIDTH,
HEIGHT
);MultiFormatWriter支持多种编码格式BarcodeFormat.QR_CODE指定二维码类型WIDTH和HEIGHT控制二维码尺寸MatrixToImageWriter将矩阵转换为图像
2. Sa-Token的Token管理
在AuthController中，Sa-Token的使用：
String token = SaToken.getToken();SaToken.getToken()生成唯一的Token- 使用
SaToken.checkToken()验证Token有效性 - 通过
SaToken.createToken()生成最终Token - 支持多种Token存储方式（内存/Redis）
3. Redis缓存机制
在AuthController中，Redis的使用：
String qrContent = redisTemplate.opsForValue().get(uuid);- 使用
opsForValue().get()获取缓存 - 设置缓存过期时间（10分钟）
- 支持分布式环境下的缓存共享
- 需要配置Redis连接参数
七、进阶使用
1. 多设备支持
public void handleMultiDevice(String uuid, String deviceInfo) {
// 存储设备指纹信息
redisTemplate.opsForHash().put("device:" + uuid, "device", deviceInfo);
// 设置设备限制
if (redisTemplate.opsForHash().get("device:" + uuid, "device").equals(deviceInfo)) {
throw new RuntimeException("设备不匹配");
}
}2. 动态二维码刷新
public void refreshQrCode(String uuid) {
// 生成新Token
String newToken = SaToken.createToken();
// 更新缓存
redisTemplate.opsForValue().set(uuid, "token=" + newToken + "&uuid=" + uuid, 10, TimeUnit.MINUTES);
}3. 安全增强
public void enhanceSecurity(String token) {
// 增加防篡改校验
if (!token.matches("^\\w{32}$")) {
throw new RuntimeException("Token格式错误");
}
// 增加时间戳校验
if (System.currentTimeMillis() - Long.parseLong(token.substring(0, 8)) > 30000) {
throw new RuntimeException("Token过期");
}
}八、性能与工程实践
1. 性能优化方案
| 优化项 | 方案 | 效果 |
|---|---|---|
| 缓存命中率 | 使用Redis缓存二维码信息 | 提升响应速度 |
| 二维码生成 | 使用异步生成 | 避免阻塞主线程 |
| 网络传输 | 使用Gzip压缩 | 减少数据传输量 |
| 并发控制 | 使用Redis分布式锁 | 防止并发冲突 |
| 资源回收 | 设置缓存过期时间 | 避免内存泄漏 |
2. 异常处理机制
public void handleException(Exception e) {
if (e instanceof ExpiredTokenException) {
logger.warn("Token过期");
} else if (e instanceof InvalidQrCodeException) {
logger.error("无效二维码");
} else {
logger.error("未知错误", e);
}
}3. 安全加固措施
- 使用HTTPS协议传输
- 对二维码内容进行加密
- 增加防暴力破解机制
- 设置Token有效期限制
- 使用设备指纹识别技术
九、常见问题与踩坑
1. 常见错误及解决办法
| 错误类型 | 表现 | 解决办法 |
|---|---|---|
| 二维码无法扫描 | 图像质量差 | 优化生成参数 |
| Token验证失败 | 格式错误 | 增加格式校验 |
| 二维码过期 | 缓存未设置 | 设置合理过期时间 |
| 多设备冲突 | 设备指纹不匹配 | 增加设备识别 |
| 接口跨域 | 前端请求失败 | 配置CORS策略 |
2. 常见性能瓶颈
- 高并发时Redis连接池不足
- 二维码生成耗时过长
- 大量缓存占用内存
- 网络传输延迟
3. 安全隐患分析
| 风险点 | 风险描述 | 防范措施 |
|---|---|---|
| 二维码泄露 | 被第三方截取 | 增加加密和时效性 |
| Token重放攻击 | 重复使用Token | 增加时间戳校验 |
| 设备指纹伪造 | 模拟设备信息 | 增加硬件特征识别 |
| 网络中间人攻击 | 数据被窃取 | 使用HTTPS协议 |
| 高并发攻击 | 系统崩溃 | 增加限流机制 |
十、最佳实践
1. 推荐方案
| 场景 | 推荐方案 | 说明 |
|---|---|---|
| 二维码生成 | 使用ZXing库 | 灵活支持多种格式 |
| Token管理 | 使用Sa-Token | 简化鉴权流程 |
| 缓存策略 | Redis缓存 | 支持分布式部署 |
| 安全机制 | 加密+时效性 | 防止信息泄露 |
| 异常处理 | 异常分类 | 提高系统健壮性 |
2. 实施建议
开发阶段：
- 使用单元测试验证各个模块
- 建立完整的日志系统
- 实现完整的异常处理流程
上线阶段：
- 配置Redis集群
- 设置合理的缓存过期时间
- 部署安全防护措施
- 监控系统运行状态
维护阶段：
- 定期审查安全策略
- 跟踪技术更新
- 优化系统性能
- 处理用户反馈
十一、总结
SpringBoot框架结合Sa-Token、QRcode.js实现二维码登录，是一种在现代Web应用中非常实用的解决方案。通过将二维码技术与Token鉴权机制相结合，既能保持无密码登录的便捷性，又能保障系统的安全性。
在实际开发中，需要注意以下几点：
- 二维码生成和验证的耦合度控制
- Token的有效期管理和刷新机制
- 前后端数据交互的安全性
- 多设备同步的可靠性
- 安全漏洞的防范措施
这种方案特别适合以下场景：
- 需要无密码登录的系统（如扫码签到、支付系统）
- 需要设备绑定的场景（如企业内部系统）
- 需要快速登录的场景（如移动应用）
但需要注意，这种方案不适合以下场景：
- 对安全性要求极高的系统（如金融系统）
- 需要长期有效的Token（如API密钥）
- 需要复杂的权限管理系统
在实施过程中，需要特别注意二维码生成的质量、Token的加密机制、缓存策略的设置，以及安全防护措施的完善。通过合理的设计和实现，可以构建一个既安全又高效的二维码登录系统。
评论已关闭