Keycloak-Remix 集成：我应该在哪里放置支票？

Question

我正在研究 Remix，我想使用 Keycloak（一个 oauth 身份验证服务器）进行身份验证。我在网上找到的大多数示例都不使用带有 Remix 的外部身份验证服务器，并且提到这样做的少数人没有提供示例。

我只有 create-remix 命令默认附带的初始笔记应用程序。我希望如果可能的话用我的外部身份验证服务器替换默认身份验证，作为概念证明。在我的理想场景中，后端将用户重定向到 Keycloak 身份验证页面，一旦我们收到令牌，后端就会在加载应用程序的第一部分时与前端共享返回的令牌。这会保存在浏览器中，以便对用户进行身份验证。然后我对刷新令牌周期和注销如何工作表示怀疑，但这不是我现在主要关心的问题。

因此，即使理论上 Remix 看起来可以完美地实现 BFF 代理模式（https://datatracker.ietf.org/doc/html/draft-ietf-oauth-browser-based-apps#name-backend- for-frontend-bff-pr）我仍然不明白后端和前端关注哪些文件，并且我不相信我可以在不了解每一位代码所在位置的情况下安全地实现此架构运行。

我希望最好能看到一个有效的示例，如果没有，任何可能最接近的解释

如果对上下文有帮助，keycloack 提供了一个 js 包来方便执行所需的调用，我只是不知道将它们放在 remix 中的哪里

Answer 1

你见过 remix-auth 更具体地说是 keycloak 策略吗？

我最近扩展了 remix-auth-oauth2 策略以与 Kinde 配合使用。看起来效果真的很好。

Answer 2

最后我使用

openid-client

创建了自己的实现。

在

/routes

中，我创建了登录、注销和回调的路由。

• 登录：将用户重定向到 Keycloak 身份验证 URL。 Keycloak 将显示登录页面，用户需要在其中输入用户名和密码，然后 Keycloak 将重定向到 /callback 路由以及代码和其他参数。
• 回调：这会交换令牌集的身份验证代码，保存应用程序后端需要保存的任何数据，然后创建浏览器 cookie，并且用户将被重定向到他们最初尝试使用会话 cookie 访问的任何 URL请求的标头。
• 注销：删除本地用户会话cookie并调用Keycloak的结束会话端点。

在这些页面中访问的大多数功能都位于文件夹

src/utils

中，位于处理与

openid-client

交互的 Keycloak Auth 类中。它设置客户端，访问众所周知的端点，并具有访问我需要的所有端点的方法。

还有刷新令牌以及在不同 Keycloak 客户端之间交换令牌的方法