Spring Security集成表单与OAuth2时如何自定义登录页？

针对你用Spring Boot 3.2.4 + Spring Security 6.2.3同时启用表单登录和OAuth2登录的场景，自定义登录页的核心是统一配置登录页入口、确保表单提交与OAuth2授权路径正确映射，以下是具体实现方案：

1. 修正Security配置 #

你之前的问题大概率是在oauth2Login和formLogin中重复配置了loginPage("/login")，导致Spring Security的路由规则冲突。正确的做法是仅在formLogin中配置自定义登录页，OAuth2登录会自动关联到这个页面：

@Configuration
@EnableWebSecurity
@RequiredArgsConstructor
public class SecurityConfiguration {

    private static final String LOGIN_PAGE = "/login";
    private final MyUserService userService;
    private final PasswordEncoder encoder;


    @Bean
    DaoAuthenticationProvider authProvider() {
        DaoAuthenticationProvider authProvider = new DaoAuthenticationProvider();
        authProvider.setUserDetailsService(userService);
        authProvider.setPasswordEncoder(encoder);
        return authProvider;
    }

    @Bean
    SecurityFilterChain filterChain(HttpSecurity http, MyOAuth2UserService oauth2Service) throws Exception {
        http
            .authorizeHttpRequests(this::configureAuthorization)
            .oauth2Login(c -> configureOAuth2(c, oauth2Service))
            .formLogin(this::configureFormLogin)
            .httpBasic(Customizer.withDefaults())
            .logout(this::configureLogout);

        return http.build();
    }

    private void configureAuthorization(AuthorizeHttpRequestsConfigurer<HttpSecurity>.AuthorizationManagerRequestMatcherRegistry authorize) {
        authorize
            .dispatcherTypeMatchers(DispatcherType.FORWARD, DispatcherType.INCLUDE, DispatcherType.ERROR).permitAll()
            .requestMatchers("/*/*.js", "/*/*/*.js", "/css/**", "/lib/**", "/assets/**", "favicon.ico").permitAll()
            .requestMatchers("/", LOGIN_PAGE, "/logout").permitAll()
            .requestMatchers("/restrictedStuff/**").hasAnyRole("GOOD_GUY")
            .requestMatchers("/admin/**").hasRole("ADMIN")
            .anyRequest().authenticated();
    }

    private void configureOAuth2(OAuth2LoginConfigurer<HttpSecurity> oauthLogin, MyOAuth2UserService userService) {
        oauthLogin
            .userInfoEndpoint(endpoint -> endpoint.oidcUserService(userService));
        // 这里不要配置loginPage，让它复用formLogin的登录页配置
    }

    private void configureFormLogin(FormLoginConfigurer<HttpSecurity> formLogin) {
        formLogin
            .loginPage(LOGIN_PAGE) // 仅在这里配置自定义登录页
            .permitAll();
        // 如果你的表单参数不是默认的username/password，可以用.usernameParameter()/.passwordParameter()修改
    }

    private void configureLogout(LogoutConfigurer<HttpSecurity> logout) {
        logout
            .logoutSuccessUrl(LOGIN_PAGE)
            .permitAll();
    }

}

2. 编写MVC控制器 #

添加一个控制器处理/login的GET请求，返回自定义登录视图：

@Controller
public class LoginController {

    @GetMapping("/login")
    public String loginPage() {
        // 返回你的自定义登录页面视图（比如Thymeleaf的login.html）
        return "login";
    }
}

3. 自定义登录页面示例（以Thymeleaf为例） #

页面需要包含账号密码表单和OAuth2登录链接，注意路径要和Spring Security的默认规则匹配：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>自定义登录页</title>
    <!-- 引入你的静态资源，确保这些资源在Security配置中已被放行 -->
    <link rel="stylesheet" th:href="@{/css/login.css}">
</head>
<body>
    <h1>登录</h1>

    <!-- 账号密码登录表单 -->
    <form th:action="@{/login}" method="post">
        <div>
            <label>用户名：</label>
            <input type="text" name="username" required>
        </div>
        <div>
            <label>密码：</label>
            <input type="password" name="password" required>
        </div>
        <button type="submit">账号密码登录</button>
    </form>

    <!-- OAuth2登录链接（Google作为提供商） -->
    <!-- 路径格式为 /oauth2/authorization/{registrationId}，registrationId对应你application.yml中的OAuth2客户端ID -->
    <a th:href="@{/oauth2/authorization/google}">使用Google登录</a>
</body>
</html>

关键注意事项 #

• 确保你的OAuth2客户端配置（application.yml/application.properties）中的registrationId是google，否则要修改链接中的路径部分。
• 静态资源（CSS、JS等）必须在Security的authorizeHttpRequests中配置permitAll，否则页面样式会加载失败。
• 不要在oauth2Login中重复配置loginPage，否则会导致Spring Security内部路由冲突，引发异常。

内容的提问来源于stack exchange，提问作者E-Riz