springboot结合vue2实现微信扫码登录的完整指南

<!-- Spring Web -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- HTTP 客户端（用于调用微信 API） -->
<dependency>
    <groupId>org.apache.httpcomponents</groupId>
    <artifactId>httpclient</artifactId>
</dependency>
<!-- JSON 解析 -->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.76</version>
</dependency>

wechat:
  login:
    appid: your_appid       # 微信开放平台 AppID
    secret: your_secret     # 微信开放平台 AppSecret
    redirect-uri: http://localhost:8080/api/wechat/callback  # 回调接口地址（需与开放平台配置一致）
    scope: snsapi_login      # 授权作用域（固定为 snsapi_login）

@Component
@ConfigurationProperties(prefix = "wechat.login")
public class WeChatConfig {
    private String appid;
    private String secret;
    private String redirectUri;
    private String scope;

    // getter/setter
}

@Service
public class WeChatAuthService {
    @Autowired
    private WeChatConfig weChatConfig;

    /**
     * 生成微信扫码登录的授权 URL
     */
    public String generateLoginUrl() {
        String baseUrl = "https://open.weixin.qq.com/connect/qrconnect";
        Map<String, String> params = new HashMap<>();
        params.put("appid", weChatConfig.getAppid());
        params.put("redirect_uri", URLEncoder.encode(weChatConfig.getRedirectUri(), StandardCharsets.UTF_8));
        params.put("response_type", "code");
        params.put("scope", weChatConfig.getScope());
        params.put("state", "STATE");  // 可选：随机字符串，防止 CSRF 攻击

        // 拼接 URL
        String url = baseUrl + "?";
        for (Map.Entry<String, String> entry : params.entrySet()) {
            url += entry.getKey() + "=" + entry.getValue() + "&";
        }
        return url.substring(0, url.length() - 1) + "#wechat_redirect";  // 必须以 #wechat_redirect 结尾
    }
}

@RestController
@RequestMapping("/api/wechat")
public class WeChatCallbackController {
    @Autowired
    private WeChatAuthService weChatAuthService;
    @Autowired
    private RestTemplate restTemplate;  // 注入 RestTemplate 用于 HTTP 请求

    /**
     * 微信授权回调接口
     */
    @GetMapping("/callback")
    public ResponseEntity<?> handleCallback(
            @RequestParam String code,
            @RequestParam String state) {
        try {
            // 1. 用 code 换取 access_token
            String tokenUrl = String.format(
                "https://api.weixin.qq.com/sns/oauth2/access_token?appid=%s&secret=%s&code=%s&grant_type=authorization_code",
                weChatConfig.getAppid(), weChatConfig.getSecret(), code
            );
            String tokenResult = restTemplate.getForObject(tokenUrl, String.class);
            JSONObject tokenJson = JSON.parseObject(tokenResult);
            if (tokenJson.containsKey("errcode")) {
                return ResponseEntity.badRequest().body("获取 access_token 失败：" + tokenJson.getString("errmsg"));
            }

            String accessToken = tokenJson.getString("access_token");
            String openId = tokenJson.getString("openid");

            // 2. 用 access_token 和 openid 获取用户信息
            String userInfoUrl = String.format(
                "https://api.weixin.qq.com/sns/userinfo?access_token=%s&openid=%s",
                accessToken, openId
            );
            String userInfoResult = restTemplate.getForObject(userInfoUrl, String.class);
            JSONObject userInfoJson = JSON.parseObject(userInfoResult);
            if (userInfoJson.containsKey("errcode")) {
                return ResponseEntity.badRequest().body("获取用户信息失败：" + userInfoJson.getString("errmsg"));
            }

            // 3. 处理用户信息（如创建/更新本地用户，生成 JWT Token 等）
            String nickname = userInfoJson.getString("nickname");
            String headImgUrl = userInfoJson.getString("headimgurl");
            // ... 其他字段（sex、province、city 等）

            // 示例：返回用户信息给前端（实际需根据业务生成 Token）
            Map<String, Object> result = new HashMap<>();
            result.put("openid", openId);
            result.put("nickname", nickname);
            result.put("headimgurl", headImgUrl);
            return ResponseEntity.ok(result);

        } catch (Exception e) {
            return ResponseEntity.internalServerError().body("登录失败：" + e.getMessage());
        }
    }
}

@RestController
@RequestMapping("/api/auth")
public class AuthController {
    @Autowired
    private WeChatAuthService weChatAuthService;

    @GetMapping("/wechat/login-url")
    public ResponseEntity<String> getWeChatLoginUrl() {
        String loginUrl = weChatAuthService.generateLoginUrl();
        return ResponseEntity.ok(loginUrl);
    }
}

npm install qrcode --save

<template>
  <div class="wechat-login">
    <h3>微信扫码登录</h3>
    <!-- 二维码展示区域 -->
    <canvas id="wechat-qrcode"></canvas>
    <p v-if="errorMsg" class="error">{{ errorMsg }}</p>
  </div>
</template>

<script>
import QRCode from 'qrcode';
import axios from 'axios';

export default {
  data() {
    return {
      wechatLoginUrl: '',
      errorMsg: ''
    };
  },
  mounted() {
    this.getWeChatLoginUrl();
  },
  methods: {
    // 从后端获取微信登录 URL
    async getWeChatLoginUrl() {
      try {
        const res = await axios.get('http://localhost:8080/api/auth/wechat/login-url');
        this.wechatLoginUrl = res.data;
        this.generateQRCode(this.wechatLoginUrl);
      } catch (err) {
        this.errorMsg = '获取登录链接失败，请重试';
        console.error(err);
      }
    },

    // 生成二维码
    generateQRCode(url) {
      const canvas = document.getElementById('wechat-qrcode');
      QRCode.toCanvas(canvas, url, { width: 200 }, (error) => {
        if (error) {
          this.errorMsg = '生成二维码失败';
          console.error(error);
        }
      });
    }
  }
};
</script>

<style scoped>
.wechat-login { text-align: center; margin-top: 50px; }
.error { color: red; margin-top: 10px; }
#wechat-qrcode { margin: 20px auto; }
</style>

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("http://localhost:8081")  // 前端域名
                .allowedMethods("GET", "POST")
                .allowCredentials(true);
    }
}