如何使用ReactJS自定义spring security生成的默认oauth2.0登录页面

Question

我是 Spring Boot 和 Spring Security 的新手。对于我的网络应用程序，我想创建自己的登录页面，该页面将使用 OAuth2.0 通过 Google 进行身份验证。默认情况下，使用 Spring Security，我们会得到一个登录页面，但我想使用 ReactJS 创建自己的登录页面。我已经阅读了自定义登录页面的文档，但是我在网上找不到足够的资源来完全解释如何使用 ReactJS 自定义登录页面。另外，我无法理解持有登录页面的 React 组件和执行 OAuth2.0 身份验证的 Spring Security 之间的连接是如何发生的。

下面的代码是链接中给出的内容，提示如下： 您需要提供一个带有 @RequestMapping("/login/oauth2") 的 @Controller，该 @Controller 能够呈现自定义登录页面。 如果有人可以向我指出适当的资源来阅读如何使用 ReactJS 自定义默认登录页面，或者可以给出示例并进行解释，我将不胜感激。谢谢你。

@Configuration
@EnableWebSecurity
public class OAuth2LoginSecurityConfig {

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
            .oauth2Login(oauth2 -> oauth2
                .loginPage("/login/oauth2")
                ...
                .authorizationEndpoint(authorization -> authorization
                    .baseUri("/login/oauth2/authorization")
                    ...
                )
            );
        return http.build();
    }
}

Answer 1

您很可能无法使用 React（需要知道您的授权服务器是什么才能给出明确的答案）。

authorization_code

流程中涉及的登录表单不是您的主前端的一部分。它甚至不是您的 Spring OAuth2 客户端的一部分 

oauth2Login

。 

它由您的授权服务器提供服务。

从您链接的文档中：

默认登录页面显示每个配置的 OAuth 客户端及其 ClientRegistration.clientName 作为链接

很明显：您可以在客户端上配置的不是登录表单，而是要求用户选择“客户端注册”的页面（例如，当您希望为用户提供在“使用 Google 登录”之间进行选择的可能性时）和“使用 Github 登录”）。它发生在启动登录之前，并且仅当您配置了多个

registration

（其中 

authorization_code

 为 

authorization-grant-type

）时才有用。

您应该做的是参考授权服务器文档，了解它如何允许您自定义登录表单显示。通常，您可以提供一些 CSS 来匹配您的组织视觉识别标准（在谈论 OAuth2 时，我们更频繁地谈论 SSO，而不是单个应用程序标识）。