扫码登录示例

在移动互联网时代，扫码登录已成为Web应用不可或缺的登录方式。本文基于SpringBoot框架实现了一个完整的扫码登录系统DEMO。 ## 一、扫码登录原理扫码登录的基本流程如下： 1. Web端向服务器请求生成唯一二维码 1. 服务器生成二维码图片并返回 1. 用户通过手机App扫描该二维码 1. 手机App发送确认请求到服务器 1. 服务器通知Web端登录成功 1. Web端完成登录流程 ## 二、项目结构 ``` qrcode-login/ ├── src/main/java/com/example/qrcodelogin/ │ ├── QrcodeLoginApplication.java │ ├── config/ │ │ ├── RedisConfig.java │ │ └── WebSocketConfig.java │ ├── controller/ │ │ ├── LoginController.java │ │ └── QRCodeController.java │ ├── model/ │ │ ├── QRCodeStatus.java │ │ └── UserInfo.java │ ├── service/ │ │ ├── QRCodeService.java │ │ └── UserService.java │ └── util/ │ └── JsonUtil.java ├── src/main/resources/ │ ├── application.properties │ └── static/ │ ├── css/ │ │ ├── login.css │ │ └── mobile.css │ ├── index.html │ └── mobile.html └── pom.xml ``` ## 三、后端实现 ### 3.1 Maven依赖首先，创建一个SpringBoot项目，并添加必要的依赖： ``` 4.0.0 org.springframework.boot spring-boot-starter-parent 2.7.0 com.example qrcode-login 0.0.1-SNAPSHOT qrcode-login SpringBoot QR Code Login Demo 11 org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-websocket org.springframework.boot spring-boot-starter-data-redis com.fasterxml.jackson.core jackson-databind com.google.zxing core 3.5.1 com.google.zxing javase 3.5.1 org.projectlombok lombok true org.springframework.boot spring-boot-maven-plugin org.projectlombok lombok ``` ### 3.2 配置文件在`application.yaml`中添加配置： ``` spring: redis: host: localhost port: 6379 password: database: 0 timeout: 5000ms lettuce: pool: max-active: 20 max-idle: 10 min-idle: 5 # 二维码配置 qrcode: # 二维码有效期（秒） expire: seconds: 300 width: 100 height: 100 ``` ### 3.3 主应用类 ``` package com.example.qrcodelogin; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.scheduling.annotation.EnableScheduling; @SpringBootApplication @EnableScheduling public class QrcodeLoginApplication { public static void main(String[] args) { SpringApplication.run(QrcodeLoginApplication.class, args); } } ``` ### 3.4 Redis配置 ``` import com.fasterxml.jackson.annotation.JsonTypeInfo; import com.fasterxml.jackson.databind.ObjectMapper; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.data.redis.connection.RedisConnectionFactory; import org.springframework.data.redis.core.RedisTemplate; import org.springframework.data.redis.serializer.Jackson2JsonRedisSerializer; import org.springframework.data.redis.serializer.StringRedisSerializer; @Configuration public class RedisConfig { @Bean public RedisTemplate redisTemplate(RedisConnectionFactory connectionFactory) { RedisTemplate template = new RedisTemplate<>(); template.setConnectionFactory(connectionFactory); // 配置ObjectMapper，添加类型信息 ObjectMapper objectMapper = new ObjectMapper(); objectMapper.activateDefaultTyping( objectMapper.getPolymorphicTypeValidator(), ObjectMapper.DefaultTyping.NON_FINAL, JsonTypeInfo.As.PROPERTY ); // 使用Jackson2JsonRedisSerializer作为值的序列化器 Jackson2JsonRedisSerializer

移动端扫码登录

已扫描到二维码

扫码登录

欢迎回来

扫码登录演示系统

移动端扫码登录

已扫描到二维码

登录成功