Vue+SpringBoot，微信授权扫码轻松获取用户信息

后端

2023-04-16 01:41:43

创建基于 Vue + SpringBoot 的微信公众号授权系统

在互联网飞速发展的今天，微信已成为我们生活中必不可少的工具，集聊天、社交、支付、购物、游戏等功能于一体。随着微信的普及，企业和个人纷纷开发微信公众号，以推广产品和服务。

如果你也有开发微信公众号的计划，获取用户个人信息至关重要。这里推荐一个基于 Vue + SpringBoot 的微信公众号授权系统，简单易用，功能强大。

准备工作

开发前，你需要准备好以下内容：

微信公众号
SpringBoot 项目
Vue 项目

开发步骤

1. 创建 SpringBoot 项目

使用 Spring Boot CLI 创建项目：

spring boot init wechat-auth

2. 添加依赖

在项目中添加必要依赖：

<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.9.0</version>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

3. 创建 Controller

处理微信授权请求：

@RestController
public class WechatAuthController {

    // 微信授权回调地址
    private final String redirectUrl = "http://localhost:8080/wechat/auth/callback";

    // 获取 access_token 和 openid
    @GetMapping("/wechat/auth")
    public String auth() {
        // 拼接授权链接
        String url = "https://open.weixin.qq.com/connect/oauth2/authorize?" +
                "appid=" + appId +
                "&redirect_uri=" + redirectUrl +
                "&response_type=code" +
                "&scope=snsapi_userinfo" +
                "&state=STATE#wechat_redirect";
        return "redirect:" + url;
    }

    // 使用 code 获取用户信息
    @GetMapping("/wechat/auth/callback")
    public String callback(@RequestParam String code) {
        // 获取 access_token
        String accessTokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?" +
                "appid=" + appId +
                "&secret=" + appSecret +
                "&code=" + code +
                "&grant_type=authorization_code";
        String accessTokenResponse = HttpUtil.get(accessTokenUrl);
        AccessToken accessToken = gson.fromJson(accessTokenResponse, AccessToken.class);

        // 获取用户信息
        String userInfoUrl = "https://api.weixin.qq.com/sns/userinfo?" +
                "access_token=" + accessToken.getAccessToken() +
                "&openid=" + accessToken.getOpenid();
        String userInfoResponse = HttpUtil.get(userInfoUrl);
        UserInfo userInfo = gson.fromJson(userInfoResponse, UserInfo.class);

        // 打印用户信息
        System.out.println(userInfo);
        return "success";
    }
}

4. 创建 Vue 项目

使用 Vue CLI 创建项目：

vue create wechat-auth

5. 添加路由

在 Vue 项目中添加路由：

// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Auth from '@/views/Auth'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'auth',
      component: Auth
    }
  ]
})

6. 创建组件

在 Vue 项目中创建组件：

// src/views/Auth.vue
<template>
  <div>
    <a href="/wechat/auth">微信授权</a>
  </div>
</template>

<script>
export default {
  name: 'Auth'
}
</script>