reactjs – 在React-Redux应用程序中使用OpenID Connect SSO

我正在尝试使用OpenID-Connect提供程序在我的React-Redux应用程序上实现SSO.目的是保护所有组件,并在会话结束时将用户重定向到身份提供商的登录页面.
这就是我无法在应用程序中拥有专用登录页面(组件)的原因.
我已经读过在localStorage中保存JWT可能是一个好主意,所以我想在Redux商店中使用标志isAuthenticated并将JWT保留在localStorage中.然后,我可以从localStorage中获取JWT,以便在我的应用程序中验证我要调用的其他API.这种方法是否合适？

此外,任何人都可以指向我可以用来为此目的获取(和刷新)JWT的库/包吗？我经历了很多文档并尝试了以下但无法使这些工作：

> redux-oidc：我的应用程序中没有任何特定的Callback组件,所以我不太清楚如何将这种方法应用到我的应用程序中.
> 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 – 集中管理所有外部供应商 – 到目前为止它一直很好用.

我建议首先看一下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 sample(非常容易理解).

玩得开心