如何用ReactJS自定义Spring Security生成的默认OAuth2.0登录页

核心关联逻辑 #

Spring Security 负责OAuth2认证的全流程（跳转Google授权页、接收回调、验证令牌、生成用户会话），React只需要提供一个可视化的登录页面，通过触发Spring Security的授权端点来启动认证流程，不需要React处理OAuth2的复杂逻辑。

步骤1：完善Spring Boot后端配置 #

1.1 完整SecurityFilterChain配置 #

补全你提供的配置，添加静态资源放行、CORS支持（前后端分离场景），并指定Google作为授权提供商：

@Configuration
@EnableWebSecurity
public class OAuth2LoginSecurityConfig {

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
            // 允许静态资源（单体应用下，React打包后放在static目录）
            .authorizeHttpRequests(auth -> auth
                .requestMatchers("/", "/login/oauth2", "/static/**").permitAll()
                .anyRequest().authenticated()
            )
            // 配置OAuth2登录
            .oauth2Login(oauth2 -> oauth2
                // 指向自定义登录页的路径
                .loginPage("/login/oauth2")
                // 认证成功后的跳转地址（按需调整）
                .defaultSuccessUrl("/dashboard", true)
                // 授权端点配置，Spring默认Google授权路径为/login/oauth2/authorization/google
                .authorizationEndpoint(authorization -> authorization
                    .baseUri("/login/oauth2/authorization")
                )
            )
            // 前后端分离场景需配置CORS
            .cors(cors -> cors.configurationSource(corsConfigurationSource()));
        
        return http.build();
    }

    // 前后端分离场景的CORS配置
    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(List.of("http://localhost:3000")); // React开发服务器地址
        configuration.setAllowedMethods(List.of("GET", "POST", "OPTIONS"));
        configuration.setAllowedHeaders(List.of("*"));
        configuration.setAllowCredentials(true);
        
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
}

1.2 添加Controller返回登录页 #

根据部署方式选择：

单体应用（React打包到Spring Boot）

Controller返回React的入口页面（index.html）：

@Controller
public class LoginPageController {

    @GetMapping("/login/oauth2")
    public String loginPage() {
        // React打包后index.html放在src/main/resources/static目录下
        return "index.html";
    }
}

前后端分离场景

Controller重定向到React的登录路由：

@Controller
public class LoginPageController {

    @GetMapping("/login/oauth2")
    public String redirectToReactLogin() {
        return "redirect:http://localhost:3000/login";
    }
}

1.3 配置Google OAuth2客户端信息 #

在application.properties中添加：

# Google OAuth2配置
spring.security.oauth2.client.registration.google.client-id=你的Google客户端ID
spring.security.oauth2.client.registration.google.client-secret=你的Google客户端密钥
spring.security.oauth2.client.registration.google.redirect-uri={baseUrl}/login/oauth2/code/google
spring.security.oauth2.client.registration.google.scopes=openid,profile,email

步骤2：React前端登录页实现 #

2.1 基础登录组件（函数式组件） #

创建Login.jsx组件，添加Google登录按钮，点击后跳转到Spring Security的授权端点：

import React from 'react';

const Login = () => {
    // 前后端分离场景，此处地址为Spring Boot的授权端点
    const googleAuthUrl = process.env.REACT_APP_SPRING_BASE_URL + "/login/oauth2/authorization/google";

    return (
        <div className="login-container">
            <h2>欢迎登录</h2>
            <button 
                onClick={() => window.location.href = googleAuthUrl}
                className="google-login-btn"
            >
                用Google账号登录
            </button>
        </div>
    );
};

export default Login;

2.2 路由配置（React Router） #

在App.jsx中配置登录路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Login from './Login';
import Dashboard from './Dashboard'; // 认证成功后的页面

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/login" element={<Login />} />
                <Route path="/dashboard" element={<Dashboard />} />
                <Route path="/" element={<Login />} />
            </Routes>
        </Router>
    );
}

export default App;

关键机制解释 #

1. 登录页触发流程：React页面的按钮点击后，跳转到/login/oauth2/authorization/google，这是Spring Security的授权端点，由Spring负责重定向到Google的授权页面。
2. Google回调处理：用户在Google登录授权后，Google会回调Spring的/login/oauth2/code/google端点，Spring自动验证令牌、获取用户信息、生成会话。
3. 认证成功跳转：Spring认证完成后，会跳转到你配置的defaultSuccessUrl，如果是前后端分离，需确保该地址指向React页面，且Spring的会话Cookie能被React应用访问。

学习资源推荐 #

• Spring Security官方文档：重点看「OAuth2登录进阶」章节，理解授权端点、回调端点的作用。
• React官方文档：学习组件开发和路由配置，掌握页面跳转逻辑。
• Spring Boot + React整合系列教程：关注前后端分离场景下的会话共享、CORS配置细节。

内容的提问来源于stack exchange，提问作者Rigved Telang