微信公众号扫码登录（SpringBoot+Vue）

IT_WEH_coder

已于 2024-09-04 10:29:58 修改

阅读量2.3k

点赞数 24

分类专栏： SpringBoot 文章标签： java spring boot

于 2024-07-20 18:09:58 首次发布

本文链接：https://blog.csdn.net/IT_WEH_coder/article/details/140574664

版权

SpringBoot 专栏收录该内容

7 篇文章

订阅专栏

微信公众号登录是现代应用程序中常见的功能之一，它允许用户使用微信账号进行登录，方便快捷。本文将介绍如何使用Spring Boot和Vue.js来实现微信公众号登录项目，并提供详细的代码和测试结果展示。【滑到底部获取源代码】

一、设计简要思路

微信公众号登录一般分为两个步骤：授权登录和个人信息获取。

授权登录：
- 用户打开微信公众号，点击登录按钮。
- 公众号引导用户进入微信授权页面，提示用户需要获取其微信账号的基本信息。
- 用户点击同意授权按钮。
- 微信授权页面将用户的身份信息、头像等基本信息返回给公众号。
个人信息获取：
- 公众号通过微信授权的返回信息，获取到用户的微信唯一标识（OpenID）。
- 公众号根据OpenID查询用户在公众号平台的账号信息。若用户已存在，则直接登录；若用户不存在，则需要继续后续步骤。
- 公众号根据OpenID在数据库中创建一个用户账号，并将此账号与用户的微信账号进行绑定。
- 公众号引导用户填写其他个人信息，如昵称、手机号码等。
- 用户提交个人信息后，公众号将用户的个人信息保存到数据库中，完成登录流程。
微信公众号扫码登录实现原理

二、技术选型

为了实现这个项目，我们选择了以下技术：

后端：Spring Boot作为后端框架，使用Java语言进行开发。
前端：Vue.js作为前端框架，使用JavaScript进行开发。

三、后端开发

创建Spring Boot项目

首先，我们需要创建一个Spring Boot项目。可以使用Spring Initializr进行创建，选择所需的依赖库，如Web、Security、OAuth2等。

配置OAuth2

接下来，我们需要配置OAuth2来实现微信公众号登录。在application.properties文件中添加以下配置：

spring.security.oauth2.client.registration.weixin.client-id=your-weixin-app-id
spring.security.oauth2.client.registration.weixin.client-secret=your-weixin-app-secret
spring.security.oauth2.client.registration.weixin.scope=snsapi_userinfo
spring.security.oauth2.client.registration.weixin.redirect-uri=http://localhost:8080/login/oauth2/code/weixin
spring.security.oauth2.client.provider.weixin.authorization-uri=https://open.weixin.qq.com/connect/qrconnect
spring.security.oauth2.client.provider.weixin.token-uri=https://api.weixin.qq.com/sns/oauth2/access_token
spring.security.oauth2.client.provider.weixin.user-info-uri=https://api.weixin.qq.com/sns/userinfo

其中，your-weixin-app-id和your-weixin-app-secret是在微信开发者平台上注册应用后获取的。

实现登录接口

创建一个Controller类，实现登录接口。代码如下：

@RestController
public class LoginController {

    @GetMapping("/login")
    public String login() {
        return "login";
    }
}

获取用户信息

在上一步中，我们已经实现了登录功能。接下来，我们需要获取用户的基本信息。创建一个UserService类，代码如下：

@Service
public class UserService {

    public User getUserInfo(String code) {
        // 使用code调用微信API获取用户信息
        // ...
        return user;
    }
}

四、前端开发

创建Vue.js项目

使用Vue CLI创建一个Vue.js项目。在命令行中执行以下命令：

vue create weixin-login

根据提示选择需要的配置即可。

实现登录界面

在src/views目录下创建一个Login.vue文件，实现登录界面。代码如下：

<template>
  <div>
    <h2>微信登录</h2>
    <img :src="qrCode" alt="二维码">
    <div v-if="userInfo">
      <img :src="userInfo.avatar" alt="头像">
      <p>{{ userInfo.nickname }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      qrCode: '',
      userInfo: null
    }
  },
  mounted() {
    // 调用后端接口获取二维码
    // ...
  }
}
</script>

调用后端接口

在mounted生命周期钩子中，调用后端接口获取二维码。使用axios库发送HTTP请求，代码如下：

mounted() {
  axios.get('/login')
    .then(response => {
      this.qrCode = response.data;
    })
    .catch(error => {
      console.error(error);
    });
}

获取用户信息

在上一步中，我们已经实现了登录界面，并获取了二维码。接下来，我们需要获取用户的基本信息。在mounted生命周期钩子中，使用axios库发送HTTP请求，获取用户信息。代码如下：

mounted() {
  // 获取二维码
  axios.get('/login')
    .then(response => {
      this.qrCode = response.data;
    })
    .catch(error => {
      console.error(error);
    });
  
  // 轮询获取用户信息
  setInterval(() => {
    axios.get('/user-info')
      .then(response => {
        this.userInfo = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }, 5000);
}