java

关注公众号 jb51net

关闭
首页 > 软件编程 > java > springboot微信扫码登录

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

作者：IT界Tony哥

这篇文章主要为大家详细介绍了springboot结合vue2实现微信扫码登录的完整方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

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

一、准备工作

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

2.创建网站应用​

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），并将用户信息返回给前端。若前端需要直接接收用户信息（而非后端重定向），可调整流程：

四、关键注意事项

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

跨域问题：若前后端分离部署，需在后端配置 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);
    }
}

安全性：

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

五、完整流程总结

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

到此这篇关于springboot结合vue2实现微信扫码登录的完整指南的文章就介绍到这了,更多相关springboot微信扫码登录内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文