1.資質申請

1. 主體為企業的域名和備案的服務器
2. 主體為企業的微信開放平臺的開發者資質認證
3. 微信開放平臺創建應用獲取AppID和AppSecret

2.combinations-wx-login-starter

1.目錄結構

2.pom.xml 引入okhttp依賴

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>cn.sunxiansheng</groupId><artifactId>sunrays-combinations</artifactId><version>1.0.0</version></parent><artifactId>combinations-wx-login-starter</artifactId><!-- 項目名 --><name>${project.groupId}:${project.artifactId}</name><!-- 簡單描述 --><description>微信登錄模塊封裝</description><dependencies><!-- okhttp --><dependency><groupId>com.squareup.okhttp3</groupId><artifactId>okhttp</artifactId></dependency></dependencies>
</project>

3.WxLoginProperties.java 屬性配置

package cn.sunxiansheng.wx.login.config.properties;import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;/*** Description: 微信登錄的屬性配置** @Author sun* @Create 2025/1/23 18:49* @Version 1.0*/
@ConfigurationProperties(prefix = "sun-rays.wx.login")
@Data
public class WxLoginProperties {/*** 微信開放平臺應用的AppID*/private String appId;/*** 微信開放平臺應用的AppSecret*/private String appSecret;/*** 微信開放平臺的access_token_url前綴，有默認值，可以不填，為了防止變化！*/private String accessTokenUrlPrefix = "https://api.weixin.qq.com/sns/oauth2/access_token";
}

4.WxLoginUtil.java 后端通過 code 獲取 access_token的工具類

package cn.sunxiansheng.wx.login.utils;import cn.sunxiansheng.wx.login.config.properties.WxLoginProperties;
import com.google.gson.Gson;
import com.google.gson.annotations.SerializedName;
import lombok.Data;
import lombok.extern.slf4j.Slf4j;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;import javax.annotation.Resource;/*** Description: 微信登錄工具類** @Author sun* @Create 2025/1/23 19:01* @Version 1.0*/
@Slf4j
public class WxLoginUtil {/*** 獲取微信登錄的配置*/@Resourceprivate WxLoginProperties wxLoginProperties;/*** 微信登錄的響應類*/@Datapublic static class AccessTokenResponse {@SerializedName("access_token")private String accessToken;@SerializedName("expires_in")private Integer expiresIn;@SerializedName("refresh_token")private String refreshToken;@SerializedName("openid")private String openId;@SerializedName("scope")private String scope;@SerializedName("unionid")private String unionId;}/*** 根據code來完成微信登錄** @param code 微信開放平臺返回的code* @return 返回AccessTokenResponse*/public AccessTokenResponse wxLogin(String code) {return getAccessToken(wxLoginProperties.getAppId(), wxLoginProperties.getAppSecret(), code);}/*** 后端通過 code 獲取 access_token** @param appid  微信應用的 appid* @param secret 微信應用的 secret* @param code   后端已經獲得的 code 參數* @return 返回封裝的 AccessTokenResponse 對象*/private AccessTokenResponse getAccessToken(String appid, String secret, String code) {// 構造請求 URLString url = String.format("%s?appid=%s&secret=%s&code=%s&grant_type=authorization_code",wxLoginProperties.getAccessTokenUrlPrefix(), appid, secret, code);// 創建 OkHttpClient 實例OkHttpClient client = new OkHttpClient();// 創建 Request 對象Request request = new Request.Builder().url(url).build();// 執行請求并處理響應try (Response response = client.newCall(request).execute()) {// 檢查請求是否成功if (!response.isSuccessful()) {String responseBody = response.body() != null ? response.body().string() : "響應體為空";log.error("后端通過 code 獲取 access_token 的請求失敗，響應碼：{}, 響應體：{}", response.code(), responseBody);return null;}// 打印成功的響應String jsonResponse = response.body() != null ? response.body().string() : "響應體為空";log.info("成功獲取 access_token，響應：{}", jsonResponse);// 使用 Gson 解析 JSON 數據并封裝成 AccessTokenResponse 對象Gson gson = new Gson();// 返回封裝的對象return gson.fromJson(jsonResponse, AccessTokenResponse.class);} catch (Exception e) {log.error(e.getMessage(), e);// 返回 null 或者其他錯誤處理return null;}}
}

5.WxLoginAutoConfiguration.java 自動配置類

package cn.sunxiansheng.wx.login.config;import cn.sunxiansheng.wx.login.config.properties.WxLoginProperties;
import cn.sunxiansheng.wx.login.utils.WxLoginUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.boot.autoconfigure.condition.ConditionalOnMissingBean;
import org.springframework.boot.context.properties.EnableConfigurationProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;import javax.annotation.PostConstruct;/*** Description: 微信登錄自動配置類** @Author sun* @Create 2025/1/13 16:11* @Version 1.0*/
@Configuration
@EnableConfigurationProperties({WxLoginProperties.class})
@Slf4j
public class WxLoginAutoConfiguration {/*** 自動配置成功日志*/@PostConstructpublic void logConfigSuccess() {log.info("WxLoginAutoConfiguration has been loaded successfully!");}/*** 注入WxLoginUtil** @return*/@Bean@ConditionalOnMissingBeanWxLoginUtil wxLoginUtil() {return new WxLoginUtil();}
}

6.spring.factories 激活自動配置類

org.springframework.boot.autoconfigure.EnableAutoConfiguration=\
cn.sunxiansheng.wx.login.config.WxLoginAutoConfiguration

3.combinations-wx-starter-demo

1.目錄結構

2.pom.xml 引入依賴

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>cn.sunxiansheng</groupId><artifactId>sunrays-combinations-demo</artifactId><version>1.0.0</version></parent><artifactId>combinations-wx-starter-demo</artifactId><dependencies><!-- combinations-wx-login-starter --><dependency><groupId>cn.sunxiansheng</groupId><artifactId>combinations-wx-login-starter</artifactId><version>1.0.0</version></dependency><!-- common-web-starter --><dependency><groupId>cn.sunxiansheng</groupId><artifactId>common-web-starter</artifactId><version>1.0.0</version></dependency></dependencies><!-- maven 打包常規配置 --><build><!-- 打包成 jar 包時的名字為項目的artifactId + version --><finalName>${project.artifactId}-${project.version}</finalName><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><!-- 引用父模塊中統一管理的插件版本（與SpringBoot的版本一致！ --><executions><execution><goals><!-- 將所有的依賴包都打到這個模塊中 --><goal>repackage</goal></goals></execution></executions></plugin></plugins></build>
</project>

3.application.yml 配置AppID和AppSecret

sun-rays:log4j2:home: /Users/sunxiansheng/IdeaProjects/sunrays-framework/sunrays-combinations-demo/combinations-wx-starter-demo/logs # 日志存儲根目錄env:path: /Users/sunxiansheng/IdeaProjects/sunrays-framework/sunrays-combinations-demo/combinations-wx-starter-demo # .env文件的絕對路徑wx:login:app-id: ${WX_LOGIN_APP_ID} # 微信開放平臺應用的AppIDapp-secret: ${WX_LOGIN_APP_SECRET} # 微信開放平臺應用的AppSecret
spring:profiles:active: prod # 激活的環境

4.application-prod.yml 配置生產環境的日志和.env文件路徑

sun-rays:log4j2:home: /www/wwwroot/sunrays-framework/logs # 日志存儲根目錄env:path: /www/wwwroot/sunrays-framework # .env文件的絕對路徑

5.CodeAndState.java 接受code和state的bean

package cn.sunxiansheng.wx.entity;import lombok.Data;/*** Description: 接受code和state的bean** @Author sun* @Create 2025/1/16 19:15* @Version 1.0*/@Data
public class CodeAndState {/*** 微信的code*/private String code;/*** 微信的state*/private String state;
}

6.WxLoginController.java 微信登錄Controller

package cn.sunxiansheng.wx.controller;import cn.sunxiansheng.wx.entity.CodeAndState;
import cn.sunxiansheng.wx.login.utils.WxLoginUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.annotation.Resource;/*** Description: 微信登錄Controller** @Author sun* @Create 2025/1/13 16:26* @Version 1.0*/
@Slf4j
@RestController
@RequestMapping("/wx")
public class WxLoginController {@Resourceprivate WxLoginUtil wxLoginUtil;@RequestMapping("/test")public String test() {return "test";}/*** 微信登錄** @param codeAndState 前端傳過來的code和state* @return 返回unionId*/@RequestMapping("/login")public String login(@RequestBody CodeAndState codeAndState) {// 使用code來完成微信登錄WxLoginUtil.AccessTokenResponse accessTokenResponse = wxLoginUtil.wxLogin(codeAndState.getCode());if (accessTokenResponse == null) {log.error("accessToken is null");return "null";}// 獲取unionIdString unionId = accessTokenResponse.getUnionId();if (unionId == null) {log.error("unionId is null");return "null";}// 獲取unionIdreturn accessTokenResponse.getUnionId();}
}

7.WxApplication.java 啟動類

package cn.sunxiansheng.wx;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;/*** Description: 微信啟動類** @Author sun* @Create 2025/1/13 17:54* @Version 1.0*/
@SpringBootApplication
public class WxApplication {public static void main(String[] args) {SpringApplication.run(WxApplication.class, args);}
}

4.微信登錄流程梳理

1.用戶點擊微信登錄按鈕

2.前端向開放平臺發送請求主要攜帶appId和redirectUri

<template><button @click="handleLogin" class="wechat-login-button">微信登錄</button>
</template><script>
export default {methods: {handleLogin() {// 從環境變量中獲取參數const appId = import.meta.env.VITE_APP_ID; // 從環境變量中讀取 appIdconst redirectUri = encodeURIComponent(import.meta.env.VITE_REDIRECT_URI); // 從環境變量中讀取 redirectUriconst responseType = 'code';const scope = 'snsapi_login'; // 網頁應用固定填寫 snsapi_login// 生成一個隨機的 state 參數，用于防止 CSRF 攻擊const state = Math.random().toString(36).substring(2); // 或者使用更安全的方式生成一個隨機字符串// 拼接請求URL，并加入 state 參數const wechatLoginUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=${appId}&redirect_uri=${redirectUri}&response_type=${responseType}&scope=${scope}&state=${state}#wechat_redirect`;// 跳轉到微信登錄頁面window.location.href = wechatLoginUrl;},},
};
</script><style scoped>
.wechat-login-button {background-color: #1aad19;color: white;border: none;border-radius: 5px;padding: 10px 20px;cursor: pointer;transition: background-color 0.3s ease;
}.wechat-login-button:hover {background-color: #128c13;
}
</style>

3.此時開放平臺會彈出一個掃碼的頁面，用戶掃碼確認

4.用戶確認成功后，開放平臺會將code和state作為參數去請求redirectUri（前端頁面）

5.前端頁面獲取code和state，再向后端發送請求

<template><div class="login-container"><div class="loading-spinner"></div><p class="loading-text">微信登錄中，請稍候...</p></div>
</template><script>
export default {async mounted() {const urlParams = new URLSearchParams(window.location.search);const code = urlParams.get("code");const state = urlParams.get("state");if (!code) {console.error("未獲取到微信返回的 code");alert("登錄失敗，請重試");return;}try {const response = await fetch("/wx/login", {method: "POST",headers: {"Content-Type": "application/json",},body: JSON.stringify({ code, state }),});const result = await response.json();if (result.success) {const unionid = result.data;alert(`登錄成功，您的unionid是：${unionid}`);this.$router.push({ path: "/products" });} else {alert("登錄失敗，請重試");}} catch (error) {console.error("請求失敗", error);alert("網絡錯誤，請稍后重試");}},
};
</script><style scoped>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");:root {--primary-color: #4facfe;--secondary-color: #00f2fe;--text-color: #333;
}.login-container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;background: linear-gradient(120deg, #ffffff, #f0f0f0);font-family: "Poppins", sans-serif;
}.loading-spinner {width: 60px;height: 60px;border: 6px solid #e0e0e0;border-top: 6px solid var(--primary-color);border-radius: 50%;animation: spin 1s linear infinite;
}@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}.loading-text {margin-top: 20px;font-size: 18px;font-weight: 500;color: var(--text-color);animation: fadeIn 2s ease-in-out infinite alternate;
}@keyframes fadeIn {0% {opacity: 0.6;}100% {opacity: 1;}
}
</style>

6.后端使用code進行微信登錄，可以獲取到AccessTokenResponse

/*** 微信登錄的響應類*/
@Data
public static class AccessTokenResponse {@SerializedName("access_token")private String accessToken;@SerializedName("expires_in")private Integer expiresIn;@SerializedName("refresh_token")private String refreshToken;@SerializedName("openid")private String openId;@SerializedName("scope")private String scope;@SerializedName("unionid")private String unionId;
}