Vue + Java 实现微信扫码登录完整指南

最新推荐文章于 2025-09-16 13:43:16 发布
原创 最新推荐文章于 2025-09-16 13:43:16 发布 · 812 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #java #微信扫码登录

前言

微信扫码登录是目前非常流行的第三方登录方式，本文将详细介绍如何在Vue前端和Java后端中实现微信扫码登录功能。

准备工作

在开始之前，你需要：

  1. 注册微信开放平台账号
  2. 创建网站应用并获取以下信息：
    • AppID
    • AppSecret
  3. 设置授权回调域名

技术栈

  • 前端：Vue 3 + Vite + Axios
  • 后端：Spring Boot 2.7.x + Java 8+
  • 数据库：MySQL

项目结构

├── frontend/                # Vue前端项目
│   ├── src/
│   │   ├── components/     
│   │   │   └── WxLogin.vue # 微信登录组件
│   │   ├── api/
│   │   │   └── auth.js     # API请求
│   │   └── store/
│   │       └── user.js     # 用户状态管理
│   └── package.json
│
└── backend/                 # Spring Boot后端项目
    ├── src/main/java/
    │   └── com/example/demo/
    │       ├── controller/
    │       │   └── WxAuthController.java
    │       ├── service/
    │       │   └── WxAuthService.java
    │       ├── model/
    │       │   └── WxUserInfo.java
    │       └── config/
    │           └── WxConfig.java
    └── pom.xml

前端实现

1. 创建微信登录组件 (WxLogin.vue)

<template>
  <div class="wx-login-container">
    <div class="qrcode-wrapper">
      <div id="wx-qrcode"></div>
      <div v-if="scanStatus === 'waiting'" class="status-text">
        请使用微信扫描二维码登录
      </div>
      <div v-else-if="scanStatus === 'scanned'" class="status-text">
        扫描成功，请在手机上确认
      </div>
      <div v-else-if="scanStatus === 'expired'" class="status-text">
        二维码已过期，点击刷新
        <button @click="refreshQrCode">刷新</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getQrCode, checkLoginStatus } from '@/api/auth'

const scanStatus = ref('waiting')
let checkTimer = null

const initQrCode = async () => {
  try {
    const { data } = await getQrCode()
    // 渲染二维码
    new QRCode(document.getElementById('wx-qrcode'), {
      text: data.qrCodeUrl,
      width: 200,
      height: 200
    })
    
    // 开始轮询检查扫码状态
    startCheckingStatus(data.state)
  } catch (error) {
    console.error('获取二维码失败:', error)
  }
}

const startCheckingStatus = (state) => {
  checkTimer = setInterval(async () => {
    try {
      const { data } = await checkLoginStatus(state)
      scanStatus.value = data.status
      
      if (data.status === 'success') {
        clearInterval(checkTimer)
        // 登录成功，存储token并跳转
        localStorage.setItem('token', data.token)
        router.push('/dashboard')
      } else if (data.status === 'expired') {
        clearInterval(checkTimer)
      }
    } catch (error) {
      console.error('检查状态失败:', error)
    }
  }, 2000)
}

const refreshQrCode = () => {
  document.getElementById('wx-qrcode').innerHTML = ''
  scanStatus.value = 'waiting'
  initQrCode()
}

onMounted(() => {
  initQrCode()
})

onUnmounted(() => {
  if (checkTimer) {
    clearInterval(checkTimer)
  }
})
</script>

<style scoped>
.wx-login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

.qrcode-wrapper {
  text-align: center;
}

.status-text {
  margin-top: 20px;
  color: #666;
}

button {
  margin-left: 10px;
  padding: 4px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
</style>

2. API请求封装 (auth.js)

import axios from 'axios'

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL
})

export const getQrCode = () => {
  return api.get('/api/wx/qrcode')
}

export const checkLoginStatus = (state) => {
  return api.get(`/api/wx/check-status?state=${state}`)
}

后端实现

1. 配置文件 (application.yml)

wx:
  app-id: your_app_id
  app-secret: your_app_secret
  redirect-uri: http://your-domain.com/api/wx/callback

2. 微信配置类 (WxConfig.java)

@Configuration
@ConfigurationProperties(prefix = "wx")
@Data
public class WxConfig {
    private String appId;
    private String appSecret;
    private String redirectUri;
}

3. 控制器 (WxAuthController.java)

@RestController
@RequestMapping("/api/wx")
@RequiredArgsConstructor
public class WxAuthController {

    private final WxAuthService wxAuthService;

    @GetMapping("/qrcode")
    public ResponseEntity<?> getQrCode() {
        try {
            Map<String, String> qrCodeInfo = wxAuthService.generateQrCode();
            return ResponseEntity.ok(qrCodeInfo);
        } catch (Exception e) {
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
                .body("获取二维码失败");
        }
    }

    @GetMapping("/check-status")
    public ResponseEntity<?> checkStatus(@RequestParam String state) {
        try {
            Map<String, Object> status = wxAuthService.checkLoginStatus(state);
            return ResponseEntity.ok(status);
        } catch (Exception e) {
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
                .body("检查状态失败");
        }
    }

    @GetMapping("/callback")
    public void callback(@RequestParam String code, @RequestParam String state) {
        wxAuthService.handleCallback(code, state);
    }
}

4. 服务层 (WxAuthService.java)

@Service
@RequiredArgsConstructor
public class WxAuthService {

    private final WxConfig wxConfig;
    private final RedisTemplate<String, String> redisTemplate;

    public Map<String, String> generateQrCode() {
        String state = UUID.randomUUID().toString();
        String qrCodeUrl = String.format(
            "https://open.weixin.qq.com/connect/qrconnect?" +
            "appid=%s&redirect_uri=%s&response_type=code&" +
            "scope=snsapi_login&state=%s#wechat_redirect",
            wxConfig.getAppId(),
            URLEncoder.encode(wxConfig.getRedirectUri(), StandardCharsets.UTF_8),
            state
        );

        // 存储state到Redis，设置过期时间
        redisTemplate.opsForValue().set(
            "wx:qrcode:" + state,
            "WAITING",
            5,
            TimeUnit.MINUTES
        );

        Map<String, String> result = new HashMap<>();
        result.put("qrCodeUrl", qrCodeUrl);
        result.put("state", state);
        return result;
    }

    public Map<String, Object> checkLoginStatus(String state) {
        String key = "wx:qrcode:" + state;
        String status = redisTemplate.opsForValue().get(key);
        
        Map<String, Object> result = new HashMap<>();
        if (status == null) {
            result.put("status", "expired");
        } else if (status.equals("WAITING")) {
            result.put("status", "waiting");
        } else if (status.equals("SCANNED")) {
            result.put("status", "scanned");
        } else if (status.startsWith("SUCCESS:")) {
            String token = status.substring(8);
            result.put("status", "success");
            result.put("token", token);
            // 清除Redis中的状态
            redisTemplate.delete(key);
        }
        return result;
    }

    public void handleCallback(String code, String state) {
        // 1. 通过code获取access_token
        String accessTokenUrl = String.format(
            "https://api.weixin.qq.com/sns/oauth2/access_token?" +
            "appid=%s&secret=%s&code=%s&grant_type=authorization_code",
            wxConfig.getAppId(),
            wxConfig.getAppSecret(),
            code
        );
        
        // 发起HTTP请求获取access_token
        // 使用access_token获取用户信息
        // 生成JWT token
        String token = generateToken(userInfo);
        
        // 更新Redis中的状态
        redisTemplate.opsForValue().set(
            "wx:qrcode:" + state,
            "SUCCESS:" + token,
            5,
            TimeUnit.MINUTES
        );
    }

    private String generateToken(WxUserInfo userInfo) {
        // 实现JWT token生成逻辑
        return "jwt_token";
    }
}

数据库设计

CREATE TABLE `wx_user` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `openid` varchar(64) NOT NULL COMMENT '微信openid',
  `unionid` varchar(64) DEFAULT NULL COMMENT '微信unionid',
  `nickname` varchar(64) DEFAULT NULL COMMENT '微信昵称',
  `avatar` varchar(255) DEFAULT NULL COMMENT '头像URL',
  `created_at` datetime DEFAULT CURRENT_TIMESTAMP,
  `updated_at` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_openid` (`openid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

实现流程

  1. 用户访问登录页面，前端向后端请求获取二维码
  2. 后端生成state并返回微信授权URL
  3. 前端使用URL生成二维码，并开始轮询检查登录状态
  4. 用户扫描二维码并在手机上确认登录
  5. 微信服务器回调后端接口，带上code和state
  6. 后端通过code获取用户信息，生成token
  7. 前端轮询检测到登录成功，获取token并完成登录

注意事项

  1. 安全性考虑

    • 使用HTTPS
    • state参数防止CSRF攻击
    • 及时清理过期的二维码状态
    • 敏感信息加密存储

  2. 性能优化

    • Redis缓存减少数据库压力
    • 合理设置轮询间隔
    • 二维码状态及时过期

  3. 用户体验

    • 清晰的状态提示
    • 二维码过期自动刷新
    • 登录成功后的平滑跳转

依赖配置

前端 (package.json)

{
  "dependencies": {
    "vue": "^3.3.0",
    "axios": "^1.6.0",
    "qrcode.vue": "^3.4.0",
    "vue-router": "^4.2.0",
    "pinia": "^2.1.0"
  }
}

后端 (pom.xml)

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-redis</artifactId>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>io.jsonwebtoken</groupId>
        <artifactId>jjwt</artifactId>
        <version>0.9.1</version>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
    </dependency>
</dependencies>

总结

本文详细介绍了如何使用Vue和Java实现微信扫码登录功能。主要包括：

  1. 前端二维码展示和状态管理
  2. 后端接口实现和数据处理
  3. 完整的登录流程和状态处理
  4. 安全性和性能考虑

通过这个实现，用户可以方便地使用微信扫码完成网站登录，提供了良好的用户体验。在实际项目中，还需要根据具体需求进行适当的调整和优化。

springboot整合微信(公众号)实现扫码登录(两种方式，两种实现)
todoitbo的博客
05-09 9万+
springboot整合微信实现扫码登录，公众号推送，网站跳转
Java实现微信扫码登入的实例代码
08-19
主要介绍了java实现微信扫码登入功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
JAVA微信扫码登录
萝卜&青菜的博客
05-15 2047
JAVA微信登录 在进行JAVA微信登录之前，先认真看一下官方文档 准备工作 网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。 在进行微信OAuth2.在进行微信OAuth2.0授权登录接入之前，在微信开放平台注册开发者帐号，并拥有一个已审核通过的网站应用，并获得相应的AppID和AppSecret，申请微信登录且通过审核后，可开始接入流程。具体流程看...
Java实现微信扫码支付完整解决方案
最新发布
weixin_30765637的博客
09-16 893
微信扫码支付作为移动支付生态中的关键环节，广泛应用于线上商城、线下门店、自助设备等场景。其核心流程包括用户扫码、商户服务请求统一下单、微信支付系统处理交易、最终返回支付结果并触发回调通知。整个流程涉及商户服务器、微信支付网关以及用户终端的三方交互。从开发视角来看，扫码支付主要分为以下几个步骤：用户扫码：用户通过微信客户端扫描商户生成的支付二维码；商户服务请求下单：商户后端调用微信统一下单接口，提交订单信息，如金额、商品描述、订单号等；微信处理支付。
java实现微信扫码登录功能
fsadkljhfweidfne的博客
11-18 5828
java实现微信扫码登录功能java部分 此功能基于微信开放平台，实现此功能的前提是需要有微信开放平台帐号，并认证成功，需要300￥。 需要有公网可以访问的域名和IP。 认证流程: 百度百科. java部分 授权流程图 大家都知道，编程web应用，第一部导入相关的依赖。。。pom.xml 首先引入thymeleaf依赖 <dependency> <groupId>org.springframework.boot</groupId> <artif
在Vue3中实现微信登录，详细实现步骤、常见场景、问题解决方案及完整代码示例
繁若华尘的博客
02-27 2443
在Vue3中实现微信登录涉及前端生成二维码、处理回调、与后端交互等多个环节。
Java 实现微信扫码登录方法（提供前端及后端核心代码）
gdgztt的专栏
12-26 3939
Java 实现微信扫码登录方法（提供前端及后端核心代码）
Java实现微信扫码登录
热门推荐
Cike___的博客
02-06 1万+
微信扫码授权登录
vue 实现微信扫码登录的方法
花生日记
06-04 7070
已登录
【SpringBoot】5分钟接入微信扫码登录！无需企业认证！无需企业资质！一行依赖实现 个人网站快速集成微信登录指南 微信二维码登录/微信扫码登录/微信登陆/SpringBoot/Maven
That_Day_的博客
01-11 1354
快速接入微信扫码登录！无需企业资质，个人开发者可用。通过SpringBoot和Maven依赖，一行代码实现微信二维码登录。支持WebSocket实时推送，提供自定义回调，适合个人网站、开发测试等场景。详细配置和示例项目助力快速集成。一行依赖实现微信二维码登陆｜个人网站快速集成微信登录指南（ 微信二维码登录/微信扫码登录/微信登陆/SpringBoot/Maven依赖）
基于SSM+Vue+Uniapp的微信订餐系统设计与实现
通过调用微信原生API接口，系统实现了扫码登录、地理位置获取、微信支付、消息推送等功能，增强了实用性与便捷性。 数据库层面选用了MySQL关系型数据库管理系统，用于存储用户信息、菜品数据、订单记录、评价内容、...
vue 微信扫码登录(自定义样式)
10-15
主要介绍了vue 微信扫码登录(自定义样式)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Java+Springboot+Vue+elememt社区疫情防控系统设计和实现
10-30
【Java+Springboot+Vue+Element社区疫情防控系统设计与实现】是将现代Web技术与社区防疫需求相结合的一个项目。这个系统充分利用了Java后端的强大处理能力、SpringBoot的轻量级框架优势、Vue.js前端的高效渲染以及...
基于SSM+Vue的微信小程序学生活动管理系统
前端部分由UniApp + Vue.js构建，利用Vue的组件化思想和响应式机制实现动态页面渲染，配合微信小程序原生API调用实现扫码、定位、消息提醒等功能；后端基于SSM框架搭建RESTful风格的API接口服务，Spring负责IOC容器...
java之学习记录 8 - 1 - vue+java 微信扫码登陆
dear_zx的博客
03-07 567
vue前端 解决扫码登录二维码在谷歌浏览器的bug vue项目安装 微信官方提供的生成二维码的js npm install vue-wxlogin 如果不是vue的项目，可以直接引用官方提供的js文件，来生成二维码 vue页面引入 <wxlogin id="wxLoginForm" style="display:none" :appid="appid" :scope="scope" ..
微信扫码登录（java）
zip7986的博客
03-03 5986
操作流程：在微信的登录界面上，用户可以选择“扫码登录”选项。此时，系统会生成一个二维码，并提示用户使用另一台设备（如手机）打开微信扫一扫功能进行扫描。在另一台设备上打开微信扫一扫功能后，将摄像头对准二维码进行扫描，微信会自动识别并验证二维码的有效性。验证成功后，登录设备将显示用户的微信账号信息，用户只需点击确认登录按钮即可完成登录过程。应用场景：微信扫码登录广泛应用于各种场景，如电脑端微信登录、网页版微信登录、小程序登录等。此外，许多第三方应用也支持微信扫码登录功能，方便用户快速登录并授权访问相关信息。
Java 实现微信扫码授权登录
Go_ahead_forever的博客
07-11 1566
背景知识，如果用户没有点击授权信息的话，从微信扫码只能够获得用户的 OpenId，其他信息都获取不到，但是一般我们登录流程的话是需要用户的昵称，头像，通过用户的授权，我们就可以直接获取到了，不用用户再次设置，这里用户的手机号也是不能获取到的。用户扫码（只能或者一个带有参数的url，要转化成二维码，这里没有用前端了直接用草料二维码进行转换），如果用户扫码了以后没有关注公众号，那么当用户点击关注以后才会推送扫码关注事件，如果用户已经关注了那么手机会直接定位到会话页面用测试生成url@Autowired。
java扫一扫登录微信
zhichengcloub的博客
06-14 932
在你的后端服务器上，使用Java编写代码调用微信提供的API生成网页授权的二维码。你需要提供你的公众号的AppID和AppSecret等信息来获取access_token，然后用access_token来请求生成二维码的URL。用户扫描二维码后，微信会将扫描结果（包括用户的openid和授权信息）发送到你指定的回调URL。首先，你需要在微信公众平台注册一个公众号或小程序，以获取必要的API权限和凭证。将生成的二维码图片URL返回给前端，前端在页面上展示二维码给用户扫描。
java实现微信二维码登录（公众号）
weixin_45441597的博客
03-14 3195
要设置推送消息的url接口和token，目的：之前关注过公众号或者扫码后关注公众号，微信会调用我们这里填写的url接口（像回调，但微信文档说的是推送消息，很多事件都会用到这个接口）如果你想要通过openId获取unionId等用户信息，可以调用下面的方法（测试号没办法获取unionId）3.接收推送消息的代码，就是我们配置url和token的内容调用的接口(放入前面的controller中)2.使用微信公众平台的二维码登录（对接公众号）1.使用微信开放平台的二维码登录（对接微信）2.生成二维码的代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值