在React-Redux应用中实现OpenID Connect单点登录

9
我正在尝试使用 OpenID-Connect 提供者在我的 React-Redux 应用程序上实现单点登录。目的是保护所有组件并在会话结束时将用户重定向到身份提供者的登录页面。这就是为什么我不能在应用程序中有专门的登录页面(组件)。
我读到在 localStorage 中保存 JWT 可能是一个不错的主意,所以我考虑在 Redux 存储中使用 isAuthenticated 标志,并在 localStorage 中保留 JWT。然后,我可以从 localStorage 中获取 JWT 来验证我从应用程序内部调用的其他 API。这种方法适合吗?
此外,有没有人可以指向一个库/包,我可以用它来获取(和刷新)JWT?我浏览了很多文档并尝试了以下内容,但无法使它们正常工作:
  • redux-oidc:我的应用程序中没有特定的回调组件,因此我不太知道如何将这种方法应用到我的应用程序中。

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

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

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

非常感谢任何帮助!

谢谢

1个回答

15

您正在正确的路上 - redux-oidc使用登录详细信息管理您的Redux状态 - 实际管理JWT(隐式流)并将其重定向到IdentityServer(任何一个)登录页面并返回到您的应用程序的客户端库是oidc-client。

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的创建者极其详细地解释了身份验证的工作方式和流程( 隐式 vs混合)。 一旦您了解了Identity的基础知识以及它如何整合在一起,请查看redux-oidc示例(非常易于跟随)。

玩得开心 ;)


Leon,非常感谢你的帮助,让我能够快速搭建React工作流程,将我的React客户端连接到我的ASP.NET Core API和Identity Server 4 IDP...感谢提供这些有用的链接! - cmann83

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接