Spring Boot + Vue 实现微信扫码登录的详细攻略

一、准备工作

1. 注册微信开放平台账号

访问微信开放平台，注册开发者账号并完成实名认证。
登录后进入「管理中心」→「网站应用」→「创建网站应用」，填写应用基本信息（如应用名称、图标、简介等）。
配置授权回调域（redirect_uri 的域名，例如 yourdomain.com，需与前端域名一致）。
提交审核，审核通过后获取 AppID 和 AppSecret（后续接口调用需要）。

2. 前端项目准备

使用 Vue CLI 创建项目（或已有项目），安装依赖：

arduino 复制代码

npm install axios qrcodejs2 --save  # axios用于HTTP请求，qrcodejs2生成二维码

3. 后端项目准备

使用 Spring Initializr 创建 Spring Boot 项目，添加依赖：

xml 复制代码

<dependencies>
    <!-- Spring Web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- Redis 缓存（存储扫码状态） -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-redis</artifactId>
    </dependency>
    <!-- Lombok（简化代码） -->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
    <!-- JSON 工具 -->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
        <version>1.2.83</version>
    </dependency>
</dependencies>

配置 application.yml，设置 Redis 连接和微信 AppID/AppSecret：

yaml 复制代码

spring:
  redis:
    host: localhost
    port: 6379
    database: 0
    timeout: 5000

wechat:
  appid: 你的AppID
  secret: 你的AppSecret
  redirect-uri: http://yourdomain.com/api/wechat/login/callback  # 回调地址（需与微信开放平台配置一致）

二、核心流程概述

微信扫码登录的核心流程如下（前后端协作）：

前端请求生成二维码 ：前端调用后端接口，获取微信扫码的临时 URL 和唯一标识（uuid）。
前端展示二维码 ：前端使用 uuid 对应的 URL 生成二维码（微信官方提供的扫码页面）。
用户扫码并确认：用户使用微信扫描二维码，选择「确认登录」。
微信回调后端 ：微信服务器向配置的 redirect_uri 发送回调请求（携带 code 和 state）。
后端验证并生成登录态 ：后端通过 code 换取 access_token 和 openid，验证用户身份后生成登录态（如 JWT）。
前端轮询状态 ：前端定时调用后端接口查询 uuid 对应的扫码状态，若状态为「已确认」则获取登录态，完成登录。

三、前后端具体实现

（一）后端实现

1. 定义扫码状态枚举

arduino 复制代码

public enum WechatLoginStatus {
    NOT_SCAN,    // 未扫码
    SCANNED,     // 已扫码待确认
    CONFIRMED,   // 已确认登录
    EXPIRED      // 已过期
}

2. 生成二维码接口（/api/wechat/qrcode）

功能 ：生成唯一的 uuid，并将 uuid 与初始状态（NOT_SCAN）存入 Redis（设置过期时间，如 5 分钟）；返回微信扫码的临时 URL。

kotlin 复制代码

@RestController
@RequestMapping("/api/wechat")
@Slf4j
public class WechatLoginController {

    @Value("${wechat.appid}")
    private String appid;
    @Value("${wechat.secret}")
    private String secret;
    @Value("${wechat.redirect-uri}")
    private String redirectUri;

    @Autowired
    private RedisTemplate<String, Object> redisTemplate;

    // 生成二维码接口
    @GetMapping("/qrcode")
    public Result getQrCode() {
        // 生成唯一 uuid（作为 state 参数）
        String uuid = UUID.randomUUID().toString();
        // 微信扫码临时 URL（用户扫码后会跳转到该 URL，携带 state=uuid）
        String qrcodeUrl = "https://open.weixin.qq.com/connect/qrconnect?" +
                "appid=" + appid +
                "&redirect_uri=" + URLEncoder.encode(redirectUri, StandardCharsets.UTF_8) +
                "&response_type=code" +
                "&scope=snsapi_login" +
                "&state=" + uuid +
                "#wechat_redirect";
        // 将 uuid 存入 Redis（状态为 NOT_SCAN，过期时间 5 分钟）
        redisTemplate.opsForValue().set("wechat_login:" + uuid, WechatLoginStatus.NOT_SCAN, 5, TimeUnit.MINUTES);
        return Result.success(qrcodeUrl);
    }
}

功能 ：微信服务器回调此接口，携带 code 和 state（即之前的 uuid）；后端通过 code 换取 access_token 和 openid，验证用户身份后生成登录态，并更新 Redis 中 uuid 的状态为 CONFIRMED。

typescript 复制代码

// 回调接口（需在微信开放平台配置此 URL）
@GetMapping("/login/callback")
public Result handleCallback(String code, String state) {
    log.info("微信回调：code={}, state={}", code, state);
    // 校验 state 是否存在（防止伪造）
    String key = "wechat_login:" + state;
    WechatLoginStatus status = (WechatLoginStatus) redisTemplate.opsForValue().get(key);
    if (status == null || status != WechatLoginStatus.SCANNED) {
        return Result.error("无效的扫码状态");
    }

    // 通过 code 换取 access_token（微信接口）
    String tokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?" +
            "appid=" + appid +
            "&secret=" + secret +
            "&code=" + code +
            "&grant_type=authorization_code";
    ResponseEntity<String> response = new RestTemplate().getForEntity(tokenUrl, String.class);
    JSONObject tokenResult = JSON.parseObject(response.getBody());
    if (tokenResult.containsKey("errcode")) {
        return Result.error("获取 access_token 失败：" + tokenResult.getString("errmsg"));
    }
    String accessToken = tokenResult.getString("access_token");
    String openid = tokenResult.getString("openid");

    // 校验 openid 是否绑定过本系统用户（根据业务需求，可跳过直接注册新用户）
    // 示例：假设 openid 对应系统用户 ID 为 123
    Long userId = userService.getUserIdByOpenid(openid);
    if (userId == null) {
        return Result.error("用户未绑定");
    }

    // 生成登录态（如 JWT）
    String token = JwtUtil.generateToken(userId);

    // 更新 Redis 状态为 CONFIRMED，并存储 token（或其他用户信息）
    redisTemplate.opsForValue().set(key, WechatLoginStatus.CONFIRMED, 30, TimeUnit.MINUTES); // 延长过期时间
    redisTemplate.opsForValue().set("user_token:" + userId, token, 30, TimeUnit.MINUTES);

    return Result.success(token);
}

4. 查询扫码状态接口（/api/wechat/check-status）

功能 ：前端定时调用此接口，传入 uuid，查询扫码状态（NOT_SCAN/SCANNED/CONFIRMED/EXPIRED）。

less 复制代码

@GetMapping("/check-status/{uuid}")
public Result checkStatus(@PathVariable String uuid) {
    String key = "wechat_login:" + uuid;
    WechatLoginStatus status = (WechatLoginStatus) redisTemplate.opsForValue().get(key);
    if (status == null) {
        return Result.error("二维码已过期");
    }
    return Result.success(status);
}

（二）前端实现

1. 生成并展示二维码（Vue 组件）

使用 qrcodejs2 生成二维码，调用后端 /api/wechat/qrcode 获取临时 URL。