# wxlogin

**Repository Path**: linzfgit/wxlogin

## Basic Information

- **Project Name**: wxlogin
- **Description**: 微信扫码登录，Springboot + Vue 前后端分离实现 二维码生成，回调，跳转主页。
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 17
- **Forks**: 12
- **Created**: 2021-08-01
- **Last Updated**: 2025-06-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 一、wxlogin：微信扫码登录

## 介绍

​		这是一个微信扫码登录的功能的前后端实现代码，微信二维码生成，用户扫描确认跳专主页，并模拟使用token获取数据，可供个人学习或用于毕业设计，简单易上手进行二次开发。

​		前端：使用 Vue.js 开发所有前端应用的框架

​		后端：采用 SpringBoot 2 构建后端服务

​		觉得还不错的话，帮忙点个` star` 鼓励一下吧，如有问题请进 兰州-JAVA讨论群（QQ:471082046）、西安-JAVA讨论群（QQ:477822689）

## 安装教程：提供两种解决方案

- 方案一：后端生成二维码（ wxlogin-vue +wxlogin-boot）
- 方案二：前端生成二维码（ wxlogin-vue2 +wxlogin-boot）

![](img/README/微信扫码登录时序图-微信扫码登录.png)

## 方案一: 使用方法

步骤1 ：需要准备一个认证的微信服务号

步骤2.：进入微信公众后台，“设置”->“公众号设置”->“网页授权域名”，填写自己的域名

步骤3 ：更改 wxlogin-boot 项目下，WxAppConfig 中的 WX_APP_ID，WX_APP_SECRET，WX_BCALLBACK_URL 并启动后端服务。

```java
public class WxAppConfig {
	/**
	 * 微信 appid
	 */
	public static String WX_APP_ID = "xxx";

	/**
	 * 微信 secret
	 */
	public static String WX_APP_SECRET = "xxx";

	/**
	 * PC 授权回调地址
	 */
	public static final String WX_BCALLBACK_URL = URLEncoder.encode("http://www.abc.cn/wxCallback");
}
```

步骤4 ：修改本地 hosts 文件  

```java
127.0.0.1     www.abc.cn
```

步骤5 ：启动 wxlogin-vue 前端项目

```java
1. cd  wxlogin-vue
2. npm i
3. npm run dev
    
```

步骤6 ：访问 ：http://127.0.0.1:8080/#/

## 方案二: 使用方法

步骤1 ：需要准备一个认证的微信服务号

步骤2.：进入微信公众后台，“设置”->“公众号设置”->“网页授权域名”，填写自己的域名

步骤3 ：更改 wxlogin-boot 后端项目下，WxAppConfig 中的 WX_APP_ID，WX_APP_SECRET，WX_BCALLBACK_URL 并启动后端服务。

```java
public class WxAppConfig {
	/**
	 * 微信 appid
	 */
	public static String WX_APP_ID = "xxx";

	/**
	 * 微信 secret
	 */
	public static String WX_APP_SECRET = "xxx";

	/**
	 * PC 授权回调地址
	 */
	public static final String WX_BCALLBACK_URL = URLEncoder.encode("http://www.abc.cn/wxCallback");
}
```

步骤4 ：修改本地 hosts 文件  

```java
127.0.0.1     www.abc.cn
```

步骤5 ：修改 wxlogin-vue2 前端项目下，src/components/Login.vue中的 appid，redirect_uri

```java
// 生成微信二维码，工具类，不是我提供，从腾讯下载的
var obj = new WxLogin({
    id: "weixin",
    appid: "xxx",
    scope: "snsapi_login",
    redirect_uri: "http://www.abc.cn/wxCallback",
});
```

步骤6 ：启动 wxlogin-vue2 前端项目

```java
1. cd  wxlogin-vue
2. npm i
3. npm run dev
    
```

步骤7 ：访问 ：http://127.0.0.1:8080/#/

![image-20210802065036471](img/README/image-20210802065036471.png)

![image-20210802064453732](img/README/image-20210802064453732.png)

## 有收获可以请作者喝咖啡哟 ☕

|                            支付宝                            |                             微信                             |
| :----------------------------------------------------------: | :----------------------------------------------------------: |
| ![image-20210802071935253](img/README/image-20210802071935253.png) | ![image-20210802071850386](img/README/image-20210802071850386.png) |