在 React-Redux 应用上实现 SSO

Question

我正在尝试在使用 Keycloak 作为外部身份提供者的 React-Redux 应用程序上实现 SSO。目的是在用户未通过身份验证时重定向到 IdP 的登录页面，并且在成功身份验证后使用 access_token 访问另一个 REST API 微服务上的受保护资源。

我尝试使用 Keycloak 的 NodeJS 适配器 (https://keycloak.gitbooks.io/documentation/securing_apps/topics/oidc/nodejs-adapter.html)，它能够将我重定向到 IdP 进行登录，我可以获得 access_token，但这一切都发生在 express-session 中并使用 MemoryStore。我想知道这样可以吗？在快速存储中保存 JWT 并在进行 API 调用时从存储中检索它们？

或者我应该尝试在 Redux 的商店中保存身份验证状态（JWT 令牌）吗？与会话 cookie 相比会更好吗？会话 cookie 可能更安全，但每次都需要访问商店，对吧？

最重要的是，我怎样才能实现 Redux 商店有 JWT 的方法？

任何帮助将不胜感激。

提前致谢。

Answer 1

对于所有感兴趣的人，我设法通过以下方式实现它：

• 从 keycloak 服务器加载 Keycloak.js（Keycloak 的 JS 适配器）
• 使用客户端的配置参数初始化 Keycloak 脚本。
• 当主 React 组件即将呈现时，通过调用 Keycloak 脚本创建一个 Reducer 以获取 JWT 令牌。
• 将令牌添加到状态。

无论如何，我们现在认为从服务器动态加载 Keycloak.js 并不是一个好主意，最重要的是，这会使我们的应用程序与 Keycloak 紧密耦合。我们现在正在寻找更通用的 OIDC 实现。

至于存储令牌，我们认为 Redux 存储可能不是 JWT 的最佳位置。我们正在考虑将令牌保存在 localStorage 中。

希望这对某人有所帮助！

Answer 2

这是一个react app，它演示了我们如何将 SSO 与 React 应用程序集成。

• 使用 Keycloak 作为 IDP
• SSO 的 OAuth 2
• JWT 作为 Auth Token（可以存储在 Redux 中，而不是 Authprovider 状态）
• 反应用户界面
• Node Js (Express) 后端

免责声明：我是回购的所有者