React 应用程序如何连接到 OAuth 2 Spring 授权服务器/资源服务器/oauth 客户端后端

Question

我已经实现了一个生成令牌的 OAuth 2 spring 授权服务器。端口 4002

用于 API 调用的 Spring 资源服务器。端口 4003

一个处理与授权服务器通信的 spring oauth 客户端。端口 4004

一切正常。 1 输入 http://127.0.0.1:4004（客户端）将您重定向到 http://127.0.0.1:4002/login（授权服务器） 输入正确的电子邮件和密码后，授权服务器将您重定向到 http://127.0.0.1:4004（客户端），在成功验证后显示一个简单的静态 html 文件。这是整个过程的视频 https://imgur.com/a/8uaTcZk

现在一切都很好，OAuth 2 的后端已完全实现。现在我想编写一个使用这个后端的 React 应用程序。我该怎么做？

研究后，人们说使用后端作为前端 BFF。但我找不到任何解释如何连接到 spring oauth 客户端的教程或文章。

在反应应用程序发送电子邮件/密码并取回我保存在 localStorage 中的令牌之前。我对 axios 进行了编程以使用它，因此对后端的每次调用都附加了令牌。

现在我想转向 OAuth 2。但即使我根据规范在 Spring 中实现了所有部分。我不知道该怎么做才能将 React 应用程序连接到 OAuth 进程。

目前授权服务器设置为重定向到http://localhost:4004/login/oauth2/code/token-generator，即成功登录后的oauth客户端。那不是我想要的。我希望它重定向到反应应用程序。但 spring 文档说重定向路径应该是 /login/oauth2/code/{authorization-server} 我对显示 .html 的 oauth 客户端不感兴趣。我希望它重定向到前端。但我不知道前端应该如何获取令牌，或者令牌是否不应离开 oauth 客户端！！？？？

有人可以帮忙吗？

这是代码的一些部分： 授权服务器 RegisteredClientRepository (4002)

@Bean
    public RegisteredClientRepository registeredClientRepository() {
        RegisteredClient registeredClient = RegisteredClient.withId(UUID.randomUUID().toString())
                .clientId("client")
                .clientSecret("{bcrypt}$2a$10$.ld6BfZescPDfVVduvu.6O9.7FLMI64l4PfvnBZJQEBhTLFFbeKei") //secret
                .clientAuthenticationMethod(ClientAuthenticationMethod.CLIENT_SECRET_BASIC)
                .authorizationGrantType(AuthorizationGrantType.AUTHORIZATION_CODE)
                .redirectUri("http://localhost:4004/login/oauth2/code/token-generator")
                .scope(OidcScopes.OPENID)       .tokenSettings(TokenSettings.builder().accessTokenTimeToLive(Duration.ofHours(12)).build())
                .build();
        return new InMemoryRegisteredClientRepository(registeredClient);
    }

客户端配置（4004）

@Configuration
public class SecurityConfig {

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {

        http.oauth2Login(Customizer.withDefaults());
        http.authorizeHttpRequests(
                c -> c.anyRequest().authenticated());

        return http.build();
    }
}

客户端“/”路径，在视频末尾显示主页

@Controller
public class HomeController {

    @GetMapping("/")
    public String home(OAuth2AuthenticationToken authentication) {
        return "index.html";
    }
}

Answer 1

您所犯的错误是您所做的一些糟糕的假设是大多数没有阅读过规范的人都会做的。

您所实现的称为

private client

，这意味着您的 sprihng 安全服务器是唯一与发行人通信的服务器。

在 oauth2 流程中，如果 JWT 格式的令牌永远不会离开您的后端，因为一个简单的事实是，无法在浏览器中安全地存储 JWT。

因此，在实现您完成的流程时，JWT 始终“仅”存储在服务器端，并且您的 oauth2 客户端服务器将向调用客户端返回一个 cookie。 您的网页是针对服务器的客户端，服务器是针对颁发者的oauth2客户端。

您尚未透露您正在使用的发行人以及您的意图。您需要意识到 oauth2 规范是一个相当大的规范，有几个不同的流程、几个不同的实现等，并且您对想要实现的目标的陈述非常模糊。

BFF 模式基本上意味着您已实现的内容，只是您认为应该将令牌分发给 Web 客户端，但事实并非如此。

规范非常大，这意味着我无法在堆栈溢出的简单答案中为您解释规范，所以我实际正确的建议是

如果您认真了解这一点，您绝对应该阅读规范

。 此外，并非所有发行者都支持完整规范，例如，如果您再次集成 google、github、facebook，他们将不支持规范的

资源服务器

部分。 除非您阅读规范，否则我们无法进行适当的讨论，这就是为什么我无法给您比这更深入的答案。

https://datatracker.ietf.org/doc/html/rfc6749