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

Posted 2023-03-27

【中文标题】React-Redux 应用程序中的 OpenID Connect SSO

【英文标题】：OpenID Connect SSO in React-Redux app

【发布时间】：2017-12-11 00:08:06

【问题描述】：

我正在尝试使用 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-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 的创建者在其中非常好地解释了识别的工作原理和流程（隐式与混合）。 一旦您了解了 Identity 基础知识以及它们是如何结合在一起的，请查看 redux-oidc sample（非常容易理解）。

玩得开心;)

【讨论】：

Leon，这对我启动我的 react 工作流程以将我的 react 客户端连接到我的 asp.net 核心 api 和身份服务器 4 idp 非常有帮助...感谢有用的链接！跨度>