OpenID Connect SSO in React-Redux app



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

此外,任何人都可以指出我可以用来为此目的获取(和刷新(JWT 的库/包吗?我浏览了很多文档并尝试了以下内容,但无法让这些文档正常工作:

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

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

  • redux-auth-wrapper:一个更高阶的组件听起来很棒,但我仍然无法弄清楚如何在没有任何专用登录组件的情况下集成它。

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

任何帮助将不胜感激!

谢谢

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

redux-auth-wrapper 只是一个 HOC(高阶组件( - 基本上是一个包装器,用于检查用户是否经过身份验证(在 Redux 存储中或使用自定义函数(并转发到登录页面 - 在我看来你并不真正需要它,因为 redux-oidc 已经为您提供了所需的一切。

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

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

玩得开心;)

最新更新