React-Redux应用程序中的OpenID Connect SSO [英] OpenID Connect SSO in React-Redux app

问题描述

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

I'm trying to implement SSO on my React-Redux app using an OpenID-Connect provider. The intent is to protect all components and redirect the user to the Identity Provider's login page if the session ends. This is why I cannot have a dedicated Login page (component) in the application. I've read that saving JWTs in the localStorage could be a good idea so I was thinking of using a flag isAuthenticated in the Redux store and keep JWTs in the localStorage. I can then fetch the JWTs from the localStorage to authenticate other APIs I'd be calling from within my app. Is this approach appropriate?

此外，有人可以将我指向可以用来为此目的获取(和刷新)JWT的库/程序包吗?我浏览了许多文档，并尝试了以下方法，但无法使它们起作用:

Moreover can anyone point me to a library/package that I can use to fetch (and refresh) JWTs for this purpose? I went through a lot of documentation and tried out the following but couldn't get these to work:

• redux-oidc :我没有任何特定的回调组件应用程序，所以我不太了解如何将这种方法应用于我的应用程序.

• redux-oidc: I don't have any specific Callback component in my application so I don't quite know how to apply this approach to my app.

passport-openid-connect :Passport依赖于存储会话在Cookie中，但我想改用localSorage.

passport-openid-connect: Passport relies on storing sessions in cookies but I'd like to use the localSorage instead.

redux-auth-wrapper :高阶组件听起来不错，但如果没有任何专用的Login组件，我仍然无法弄清楚如何集成它.

redux-auth-wrapper: A higher order component sounds great but I still cannot figure out how to integrate it without any dedicated Login component.

有人可以引导我通过吗?我是React生态系统的新手，所以请原谅.

Could someone please guide me through? I'm a newbie to the React ecosystem so please excuse my incomprehension.

任何帮助将不胜感激！

谢谢

推荐答案

您处于正确的轨道-redux-oidc使用登录详细信息管理Redux状态-实际管理JWT(隐式流)的客户端库，重定向oidc-client到IdentityServer(以任何一个登录名)登录页面并返回到您的应用程序(回调").

You are on the right track - redux-oidc manages your Redux state with the login details - the client library that actually manages the JWT (implicit flow), redirecting to the IdentityServer (whichever) login page and returning to your app (the "callback") is oidc-client.

redux-auth-wrapper只是一个HOC(高阶组件)-基本上是一个包装器，用于检查用户是否已通过身份验证(在Redux存储中还是使用自定义功能)并转发到登录页面-我认为您实际上并不需要它，因为redux-oidc已经为您提供了所需的一切.

redux-auth-wrapper is just a HOC (High Order Component) - basically a wrapper to check if the user is authenticated (either in the Redux store or with a custom function) and forward to a login page - in my opinion you do not really need it as redux-oidc already gives you everything you need.

我个人还实现了 IdentityServer4 -集中管理所有外部提供程序-并一直在努力工作，因此远.

I personally also implemented an IdentityServer4 - to centrally manage all external providers - and it's been working great so far.

我建议先查看 redux-oidc示例(非常容易理解).

I would suggest first looking at https://blogs.msdn.microsoft.com/webdev/2017/04/26/the-mvp-show-learns-about-asp-net-identity-server-and-heidelberg/ where the creator of IdentityServer4 is explaining extremely well how the identification works and the flows (implicit vs hybrid). Once you know the Identity basics and how it all hangs together, have a look at the redux-oidc sample (very easy to follow).

玩得开心；)

这篇关于React-Redux应用程序中的OpenID Connect SSO的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！