为前端开发人员使用 Spring Cloud Gateway 和 Keycloak 进行本地开发

Question

我对前端开发人员在安全方面的本地开发有疑问。

先决条件：

在下面的方案中，我画出了正在发生的情况的大概情况

我正在努力做什么

将 kubernetes 中的 spring-cloud-api-gateway 端口转发到 8110 端口
在 ReactJS 上的 http://localhost:3002 端口上启动本地 Web 应用程序，并在 http://localhost:8110/oauth2/authorization/client-id 上初始化身份验证流程
然后我重定向到keycloak以输入登录名/密码（在URL中有一个redirect_url参数导致http://localhost:8110或spring-cloud-api-gateway）
之后，我重定向到redirect_url参数中的URL，以将ID令牌交换为访问/刷新令牌，并且在该会话被认为已创建之后。
我没有返回到 http://localhost:3002 并在 cookie 中使用会话，而是留在 http://localhost:8110 上，我不知道下一步该做什么以及它应该如何工作...

问题是

如何为前端开发人员设置本地开发，让他们在测试环境中通过keycloak和api-gateway登录？也许有关于如何做到这一点的行之有效的方案？

我尝试通过一些重定向来使用本地 nginx，但没有结果。

Answer 1

我在类似的设置中做了什么（开发与否）：

通过网关提供 UI（在我的例子中最常见的是 Angular，但也恰好是 React）和 REST API。这消除了对 CORS 配置的需要，因为从浏览器的角度来看，所有请求都具有相同的来源：网关
使用
```
spring-cloud-gateway
```
、
```
spring-boot-starter-oauth2-client
```
和
```
oauth2Login
```
过滤器配置
```
TokenRelay=
```
。这是获取 OAuth2 BFF 在会话中存储令牌并在会话授权（前端和网关之间）和承载令牌授权（网关和资源服务器之间）之间进行转换的相当简单的方法
授权服务器 (Keycloak) 不通过网关提供服务，因为我将其用于跨多个应用程序的 SSO，并为每个应用程序使用一个网关实例

身份验证序列（同样，无论环境如何，不仅仅是在开发环境中）如下：

网关公开一个端点，其中包含启动
```
authorization_code
```
流的可能选项（如果有多个授权服务器，则每个授权服务器一个）
前端（此示例中的 Angular，此其他中的 React）通过将窗口位置设置为网关提供的 URI 来“退出”以启动
```
authorization_code
```
流
网关重定向到授权服务器（Keycloak 或其他）
用户通过身份验证后，授权服务器将使用授权代码重定向到网关
网关将授权代码交换为令牌并将该令牌存储在会话中
网关重定向回前端

最后一步（绘图中的步骤 6）是通过配置了

http.oauth2Login(oauth2 -> oauth2.authenticationSuccessHandler(new RedirectServerAuthenticationSuccessHandler("/ui")))

的身份验证成功处理程序完成的。您可以在那里放置一个绝对 URI（如果您不想通过网关提供 UI，您甚至必须这样做）。

请注意，您可能也想配置一个指向您的 React 前端的

AuthenticationFailureHandler

。