springboot+vue2 实现微信扫码登录的步骤

IT界Tony哥
4 阅读5分钟

要实现 Spring Boot + Vue2 的微信扫码登录功能，需遵循微信开放平台的 OAuth2.0 授权流程。以下是详细步骤：

一、准备工作

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

    访问 微信开放平台，注册并认证企业账号（个人账号不支持网站应用）。

  2. 创建网站应用​

    • 进入「管理中心」→「创建网站应用」，填写应用名称、域名等信息。
    • 审核通过后，获取 AppID​ 和 AppSecret（后续接口调用需使用）。

  3. 配置授权回调域​

    在应用详情页设置「授权回调域」（如 example.com，无需加 http://或路径），确保前端页面与回调域名一致。

二、后端（Spring Boot）实现

1. 添加依赖

<!-- 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>

2. 配置文件（application.yml）

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

3. 核心代码实现

(1) 配置类读取参数
@Component
@ConfigurationProperties(prefix = "wechat.login")
public class WeChatConfig {
    private String appid;
    private String secret;
    private String redirectUri;
    private String scope;

    // getter/setter
}
(2) 生成微信登录二维码 URL

微信扫码登录需引导用户跳转至微信授权页，生成带参数的 URL：

@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 结尾
    }
}
(3) 回调接口处理授权码（Code）

用户扫码确认登录后，微信会重定向到 redirect_uri并携带 code和 state，后端需通过 code换取 access_token和用户信息：

@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());
        }
    }
}
(4) 提供生成登录 URL 的接口（供前端调用）
@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);
    }
}

三、前端（Vue2）实现

1. 安装依赖（可选）

如需展示二维码，可使用 qrcode库将微信登录 URL 转换为二维码图片：

npm install qrcode --save

2. 核心代码实现

(1) 获取微信登录 URL 并生成二维码
<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>
(2) 处理登录成功后的回调

微信授权成功后，后端会重定向到 redirect_uri（即后端的 /api/wechat/callback），并将用户信息返回给前端。若前端需要直接接收用户信息（而非后端重定向），可调整流程：

  • 后端回调接口验证 code后，将用户信息存储到 Session 或 Redis，然后重定向到前端页面（如 http://localhost:8081/login-success?token=xxx）。
  • 前端监听路由变化，在 login-success页面获取 Token 并完成本地登录状态保存。

四、关键注意事项

  1. HTTPS 要求：生产环境必须使用 HTTPS，否则微信授权可能失败（开发环境可暂时使用 HTTP，但需确保回调域名与开放平台配置一致）。

  2. 跨域问题：若前后端分离部署，需在后端配置 CORS 允许前端域名访问：

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

  3. 安全性：

    • state参数需随机生成并校验，防止 CSRF 攻击。
    • access_token和 openid需妥善保管，避免泄露。

  4. 错误处理：需处理微信 API 返回的错误码（如 40029表示 code无效，40163表示 code已被使用）。

五、完整流程总结

  1. 前端请求后端获取微信登录 URL。
  2. 后端生成带参数的微信授权 URL 并返回给前端。
  3. 前端将 URL 转换为二维码展示给用户。
  4. 用户扫码并在微信客户端确认登录。
  5. 微信重定向到后端回调接口，携带 code。
  6. 后端通过 code换取 access_token和用户信息。
  7. 后端处理用户信息（如生成 Token），并返回结果给前端。
  8. 前端根据返回结果完成本地登录状态保存（如存储 Token 到 localStorage）。

通过以上步骤，即可实现基于 Spring Boot + Vue2 的微信扫码登录功能。

avatar
文章
阅读
粉丝