vue3 + springboot实现微信登录

纪睐讦 发表于 2025-6-17 15:46:33

创建VUE3项目

创建初始文件

进入项目存放位置
右键用命令行打开（终端打开）
npm create vite@latest wechat-report --template vuenpm：包管理需要安装node.js
Vite：用于热部署和生成、打包项目
--template vue：模板指定为vue

可能报错：因为在此系统上禁止运行脚本。有关详细信息

会提示是否继续：

Ok to proceed? (y)
输入y回车
会让选择版本和类型：

如：◆ Select a framework:
│ ○ Vanilla
│ ● Vue
│ ○ React
用方向键移动到VUE，回车
用方向键移动到JavaScript ，回车
移动到创建好的项目中初始化

cd wechat-report
npm install安装Element Plus

# 安装Element Plus
npm install element-plus @element-plus/icons-vue

# 安装自动导入插件（可选但推荐）
npm install -D unplugin-vue-components unplugin-auto-import第一行安装elementPlus 和图标库
第二行是自动导入插件：自动按需导入 Vue 组件（如 Element Plus 的），无需手动 import

[*]unplugin-auto-import：自动导入 Vue 相关的 API（如 ref、reactive、onMounted 等），减少手动导入的代码。

[*]减少代码量：不用手动写 import { ElButton } from 'element-plus'。
[*]优化打包体积：只打包实际用到的组件，避免全量引入。

配置项目

进入项目，找到
修改vite.config.js：
设置elementui,@/路径功能，后台地址映射
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
<template>
<router-view />
</template>plugins: [
<template>
<router-view />
</template><template>
<router-view />
</template>vue(),
<template>
<router-view />
</template><template>
<router-view />
</template>AutoImport({
<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>resolvers: ,
<template>
<router-view />
</template><template>
<router-view />
</template>}),
<template>
<router-view />
</template><template>
<router-view />
</template>Components({
<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>resolvers: ,
<template>
<router-view />
</template><template>
<router-view />
</template>}),
<template>
<router-view />
</template>],
<template>
<router-view />
</template>resolve: {
<template>
<router-view />
</template><template>
<router-view />
</template>alias: {
<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>'@': fileURLToPath(new URL('./src', import.meta.url)) // 使用现代ESM方式
<template>
<router-view />
</template><template>
<router-view />
</template>}
<template>
<router-view />
</template>},
<template>
<router-view />
</template>server: {
<template>
<router-view />
</template><template>
<router-view />
</template>proxy: {
<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>'/api': {
<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>target: 'http://your-backend-api.com', // 替换为实际后端地址
<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>changeOrigin: true,
<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>rewrite: path => path.replace(/^\/api/, '')
<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>}
<template>
<router-view />
</template><template>
<router-view />
</template>}
<template>
<router-view />
</template>}
})安装微信JSSDK

npm install weixin-js-sdk创建API服务

在src/api目录下创建wechat.js：
import axios from 'axios'

const service = axios.create({
<template>
<router-view />
</template>baseURL: '/api', // 根据实际后端API地址配置
<template>
<router-view />
</template>timeout: 5000
})

// 获取校验url,用于登录
export function getAuthorizationUrl(url) {
<template>
<router-view />
</template><template>
<router-view />
</template>return service({
<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>method: 'post',
<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>url: '/api/emergency/wxLoginReport/getAuthorizationUrl',
<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>data: { url }
<template>
<router-view />
</template><template>
<router-view />
</template>})
}

// 其他API...修改App.vue

清空内容
<template>
<router-view />
</template>配置路由

安装Vue Router：
npm install vue-router@4创建src/router/index.js：
创建登录页面和结果页面
import { createRouter, createWebHashHistory } from 'vue-router'const routes = [<template>
<router-view />
</template><template>
<router-view />
</template>//登录页面<template>
<router-view />
</template><template>
<router-view />
</template>{<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>path: '/',<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>name: 'Home',<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>component: () => import('@/views/Home.vue')<template>
<router-view />
</template><template>
<router-view />
</template>},<template>
<router-view />
</template><template>
<router-view />
</template>//登录结果<template>
<router-view />
</template><template>
<router-view />
</template>{<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>path: '/Home2',<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>name: 'Home2',<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>component: () => import('@/views/Home2.vue')<template>
<router-view />
</template><template>
<router-view />
</template>},<template>
<router-view />
</template><template>
<router-view />
</template>// 其他路由...]const router = createRouter({<template>
<router-view />
</template><template>
<router-view />
</template>history: createWebHashHistory(), // 使用hash模式，兼容微信公众号<template>
<router-view />
</template><template>
<router-view />
</template>routes})export default router创建示例页面

创建src/views/Home.vue：
用于测试微信功能登录
<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>微信公众号示例<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>登录<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>创建src/views/Home2.vue：
登录结果页面
<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>加载中...<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>微信登录成功

<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>{{ userInfo.message }}
<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>https://www.33rz.com/userInfo.headimgurl<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>{{ userInfo.nickname }}

<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>登录失败

<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>{{ error }}
<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>重新登录<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>修改main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// 引入Element Plus样式
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(router)
app.mount('#app')package.json

加上--host，用与显示内容
"scripts": {<template>
<router-view />
</template>"dev": "vite --host"}npm run dev 启动

springboot后台

controller层

用于拼接微信调用地址与处理回调信息
package yunline.controller;import yunline.entity.TdSspUserEntity;import io.swagger.annotations.Api;import io.swagger.annotations.ApiOperation;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.*;import yunline.base.ActionResult;import yunline.service.TdSspUserService;import yunline.utils.WxReportUtils;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.net.URLDecoder;import java.net.URLEncoder;import java.nio.charset.StandardCharsets;import java.util.*;@Api(tags = "应急排班系统", value = "emergency")@RestController@RequestMapping("/api/emergency/wxLoginReport")public class WxReportController {<template>
<router-view />
</template><template>
<router-view />
</template>@Autowired<template>
<router-view />
</template><template>
<router-view />
</template>private TdSspUserService tdSspUserService;<template>
<router-view />
</template><template>
<router-view />
</template>@ApiOperation("获取微信授权地址")<template>
<router-view />
</template><template>
<router-view />
</template>@PostMapping("/getAuthorizationUrl")<template>
<router-view />
</template><template>
<router-view />
</template>public ActionResult getAuthorizationUrl(@RequestBody Map params) throws Exception {<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>System.out.println("进入");<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>String url = params.get("url");<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>url = URLEncoder.encode(url, StandardCharsets.UTF_8.toString());<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>return ActionResult.success(WxReportUtils.getAuthorizationUrl(url));<template>
<router-view />
</template><template>
<router-view />
</template>}<template>
<router-view />
</template><template>
<router-view />
</template>/**<template>
<router-view />
</template><template>
<router-view />
</template> * 当用户授权后，微信会重定向到你指定的URI，并携带一个code参数。你需要捕获这个请求并提取code。<template>
<router-view />
</template><template>
<router-view />
</template> */<template>
<router-view />
</template><template>
<router-view />
</template>@ApiOperation("捕获微信授权回执")<template>
<router-view />
</template><template>
<router-view />
</template>@GetMapping("/handleAuthorizationCallback")<template>
<router-view />
</template><template>
<router-view />
</template>public void handleAuthorizationCallback(HttpServletRequest request, HttpServletResponse response) throws Exception {<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>String code = request.getParameter("code");<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>String state = request.getParameter("state");<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>Map c = request.getParameterMap();<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>if (code == null) {<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>// 处理错误情况//<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>response.getWriter().println("授权失败，请重试！");//<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>return ActionResult.fail("授权失败，请重试！");<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>String frontendUrl = URLDecoder.decode(state, "UTF-8")<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+"?openid="<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+"&msg=授权失败！";<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>response.sendRedirect(frontendUrl);<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>return ;<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>}<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>// 获取access_token和openid<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>Map tokenInfo = WxReportUtils.getTokenInfo(code);<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>if (tokenInfo == null || !tokenInfo.containsKey("access_token") || !tokenInfo.containsKey("openid")) {//<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>response.getWriter().println("获取access_token失败，请重试！");//<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>return ActionResult.fail("获取access_token失败，请重试！");<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>String frontendUrl = URLDecoder.decode(state, "UTF-8")<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+"?openid="<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+"&msg=获取access_token失败！";<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>response.sendRedirect(frontendUrl);<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>return ;<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>}<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>String accessToken = tokenInfo.get("access_token");<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>String openid = tokenInfo.get("openid");<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>// 获取用户信息<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>Map userInfo = WxReportUtils.getUserInfo(accessToken, openid);<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>if (userInfo == null || !userInfo.containsKey("nickname") || !userInfo.containsKey("headimgurl")) {//<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>response.getWriter().println("获取用户信息失败，请重试！");//<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>return ActionResult.fail("获取用户信息失败，请重试！");<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>String frontendUrl = URLDecoder.decode(state, "UTF-8")<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+"?openid="<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+"&msg=获取用户信息失败！";<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>response.sendRedirect(frontendUrl);<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>return ;<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>}<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>// 完成本地用户认证<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>String nickname = (String) userInfo.get("nickname");<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>String headimgurl = (String) userInfo.get("headimgurl");//<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>String sex = (String) userInfo.get("sex");<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>Map map = new HashMap();<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>int has = tdSspUserService.lambdaQuery().eq(TdSspUserEntity::getRemark, openid).count();<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>if (has > 0) {<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>//修改<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>tdSspUserService.lambdaUpdate().eq(TdSspUserEntity::getRemark, openid)<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>.set(TdSspUserEntity::getPhotopath,headimgurl)<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>.set(TdSspUserEntity::getUserId,nickname).update();<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>}else{<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>//创建<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>TdSspUserEntity entity = new TdSspUserEntity();<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>entity.setUserId(nickname);<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>entity.setPhotopath(headimgurl);<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>entity.setRemark(openid);<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>entity.setNickName(nickname);<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>entity.setUserRegdate(new Date());<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>tdSspUserService.create(entity);<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>}<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>map.put("userInfo", userInfo);<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>map.put("openid", openid);//<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>return ActionResult.success(map);<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>//重定向<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>String frontendUrl = URLDecoder.decode(state, "UTF-8")<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+"?openid=" + openid<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+"&msg=登录成功"<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+"&nickname="+nickname<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+"&headimgurl="+headimgurl<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>;<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>response.sendRedirect(frontendUrl);//<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>return null;<template>
<router-view />
</template><template>
<router-view />
</template>}}创建WxReportUtils，用于对接微信
package yunline.utils;import cn.hutool.json.JSONUtil;import java.io.BufferedReader;import java.io.InputStreamReader;import java.net.*;import java.nio.charset.StandardCharsets;import java.util.Map;public class WxReportUtils {<template>
<router-view />
</template><template>
<router-view />
</template>private static final String IP = getIP();<template>
<router-view />
</template><template>
<router-view />
</template>private static final String APPID = "你的appid";<template>
<router-view />
</template><template>
<router-view />
</template>private static final String APPSECRET = "你的APPSECRET";//<template>
<router-view />
</template><template>
<router-view />
</template>private static final String SCOPE = "snsapi_base";//<template>
<router-view />
</template><template>
<router-view />
</template>private static final String SCOPE = "snsapi_login";<template>
<router-view />
</template><template>
<router-view />
</template>private static final String SCOPE = "snsapi_userinfo";<template>
<router-view />
</template><template>
<router-view />
</template>private static final String PORT = "28888";<template>
<router-view />
</template><template>
<router-view />
</template>private static final String STATE = "STATE";<template>
<router-view />
</template><template>
<router-view />
</template>private static final String REDIRECT_URI = "后台调用地址,就是controller层的callback";<template>
<router-view />
</template><template>
<router-view />
</template>private static String getIP() {<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>try {<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>InetAddress localhost = InetAddress.getLocalHost();//<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>IP=localhost.getHostAddress();<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>return localhost.getHostAddress();<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>} catch (UnknownHostException e) {<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>e.printStackTrace();<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>}<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>return "";<template>
<router-view />
</template><template>
<router-view />
</template>}<template>
<router-view />
</template><template>
<router-view />
</template>public static String getAuthorizationUrl() throws Exception {<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>return getAuthorizationUrl(STATE);<template>
<router-view />
</template><template>
<router-view />
</template>}<template>
<router-view />
</template><template>
<router-view />
</template>public static String getAuthorizationUrl(String url) throws Exception {<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>return "https://open.weixin.qq.com/connect/oauth2/authorize?"<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+ "appid=" + APPID<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+ "&redirect_uri=" + URLEncoder.encode(REDIRECT_URI, StandardCharsets.UTF_8.toString())<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+ "&response_type=code"<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+ "&scope=" + SCOPE//<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+ "&state=" + STATE<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+ "&state=" + url<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+ "#wechat_redirect";<template>
<router-view />
</template><template>
<router-view />
</template>}<template>
<router-view />
</template><template>
<router-view />
</template>/**<template>
<router-view />
</template><template>
<router-view />
</template> * 获取token和openid<template>
<router-view />
</template><template>
<router-view />
</template> *<template>
<router-view />
</template><template>
<router-view />
</template> * @param code<template>
<router-view />
</template><template>
<router-view />
</template> * @return<template>
<router-view />
</template><template>
<router-view />
</template> * @throws Exception<template>
<router-view />
</template><template>
<router-view />
</template> */<template>
<router-view />
</template><template>
<router-view />
</template>public static Map getTokenInfo(String code) throws Exception {<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>String url = "https://api.weixin.qq.com/sns/oauth2/access_token?"<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+ "appid=" + APPID<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+ "&secret=" + APPSECRET<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+ "&code=" + code<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+ "&grant_type=authorization_code";<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>HttpURLConnection connection = (HttpURLConnection) new URL(url).openConnection();<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>connection.setRequestMethod("GET");<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>int responseCode = connection.getResponseCode();<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>if (responseCode == 200) {<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>BufferedReader in = new BufferedReader(new InputStreamReader(connection.getInputStream()));<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>String inputLine;<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>StringBuilder content = new StringBuilder();<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>while ((inputLine = in.readLine()) != null) {<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>content.append(inputLine);<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>}<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>in.close();<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>connection.disconnect();<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>return JSONUtil.toBean(content.toString(), Map.class, false);<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>} else {<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>throw new RuntimeException("请求失败：" + responseCode);<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>}<template>
<router-view />
</template><template>
<router-view />
</template>}<template>
<router-view />
</template><template>
<router-view />
</template>/**<template>
<router-view />
</template><template>
<router-view />
</template> * 获取用户信息<template>
<router-view />
</template><template>
<router-view />
</template> *<template>
<router-view />
</template><template>
<router-view />
</template> * @param accessToken<template>
<router-view />
</template><template>
<router-view />
</template> * @param openId<template>
<router-view />
</template><template>
<router-view />
</template> * @return<template>
<router-view />
</template><template>
<router-view />
</template> * @throws Exception<template>
<router-view />
</template><template>
<router-view />
</template> */<template>
<router-view />
</template><template>
<router-view />
</template>public static Map getUserInfo(String accessToken, String openId) throws Exception {<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>String url = "https://api.weixin.qq.com/sns/userinfo?"<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+ "access_token=" + accessToken<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+ "&openid=" + openId<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>+ "&lang=zh_CN";<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>HttpURLConnection connection = (HttpURLConnection) new URL(url).openConnection();<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>connection.setRequestMethod("GET");<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>int responseCode = connection.getResponseCode();<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>if (responseCode == 200) {<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>BufferedReader in = new BufferedReader(new InputStreamReader(connection.getInputStream()));<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>String inputLine;<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>StringBuilder content = new StringBuilder();<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>while ((inputLine = in.readLine()) != null) {<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>content.append(inputLine);<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>}<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>in.close();<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>connection.disconnect();<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>return JSONUtil.toBean(content.toString(), Map.class, false);<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>} else {<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>throw new RuntimeException("请求失败：" + responseCode);<template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template><template>
<router-view />
</template>}<template>
<router-view />
</template><template>
<router-view />
</template>}}
微信配置

进入微信测试地址：

https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo
注册后进行配置

配置获取用户信息的权限，配置一下域名

内网穿透（可选

这里我使用的是花生壳网穿透获得的外网地址，用了10块钱巨款

结果演示

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

晌集涟 发表于 4 天前

不错，里面软件多更新就更好了

页: [1]

程序园's Archiver

vue3 + springboot实现微信登录