React-Redux 应用程序中的 OpenID Connect SSO

IT技术 reactjs redux single-sign-on openid-connect
2021-05-17 23:15:07

我正在尝试使用 OpenID-Connect 提供程序在我的 React-Redux 应用程序上实现 SSO。目的是保护所有组件并在会话结束时将用户重定向到身份提供者的登录页面。这就是为什么我不能在应用程序中使用专用登录页面（组件）的原因。我读过将 JWT 保存在 localStorage 中可能是个好主意，所以我想在 Redux 存储中使用标志 isAuthenticated 并将 JWT 保留在 localStorage 中。然后，我可以从 localStorage 获取 JWT 以验证我将从我的应用程序中调用的其他 API。这种方法合适吗？

此外，任何人都可以指出我可以用于为此目的获取（和刷新）JWT 的库/包吗？我浏览了大量文档并尝试了以下内容，但无法使这些工作：

  • redux-oidc：我的应用程序中没有任何特定的回调组件，所以我不太知道如何将这种方法应用于我的应用程序。

  • passport-openid-connect：Passport 依赖于在 cookie 中存储会话，但我想改用 localSorage。

  • redux-auth-wrapper：高阶组件听起来不错，但我仍然无法弄清楚如何在没有任何专用登录组件的情况下集成它。

有人可以指导我吗？我是 React 生态系统的新手，所以请原谅我的不理解。

任何帮助将非常感激！

谢谢

1个回答

您在正确的轨道上 - redux-oidc 使用登录详细信息管理您的 Redux 状态 - 实际管理 JWT（隐式流）的客户端库，重定向到 IdentityServer（无论哪个）登录页面并返回到您的应用程序（“回调") 是 oidc 客户端。

redux-auth-wrapper 只是一个 HOC（高阶组件）——基本上是一个包装器，用于检查用户是否通过身份验证（在 Redux 商店中或使用自定义函数）并转发到登录页面——在我看来你没有真的需要它，因为 redux-oidc 已经为你提供了你需要的一切。

我个人还实现了IdentityServer4 - 集中管理所有外部提供者 - 到目前为止它运行良好。

我建议首先查看https://blogs.msdn.microsoft.com/webdev/2017/04/26/the-mvp-show-learns-about-asp-net-identity-server-and-heidelberg/其中IdentityServer4 的创建者非常好地解释了识别的工作原理和流程（隐式与混合）。一旦您了解了 Identity 基础知识以及它们如何结合在一起，请查看redux-oidc 示例（非常容易理解）。

玩得开心 ;）

其它你可能感兴趣的问题
上一篇如何在 React 和 Typescript 中使用 Material UI 自定义主题 下一篇将注塑成型的 STL 转换为可打印的 STL