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

Question

我試圖在使用OpenID-Connect提供程序的React-Redux應用程序上實施SSO。目的是保護所有組件，並在會話結束時將用戶重定向到身份提供商的登錄頁面。 這就是爲什麼我不能在應用程序中有專門的登錄頁面（組件）。 我讀過在localStorage中保存JWT可能是一個好主意，所以我想在Redux商店中使用isAuthenticated標誌並將JWT保留在localStorage中。然後，我可以從localStorage中獲取JWT來驗證我在應用程序中調用的其他API。這種方法是否合適？

此外，任何人都可以指向一個庫/包，我可以使用它來獲取（並刷新）JWT爲此目的？我經歷了很多的文檔就去嘗試了以下，但不能讓這些工作：

• redux-oidc：我沒有在我的應用程序的任何特定回調組件，因此我不太知道如何將此方法應用於我的應用程序。

• passport-openid-connect：護照依賴於在cookie中存儲會話，但我想使用localSorage來代替。

• redux-auth-wrapper：高階組件聽起來不錯，但我仍然無法弄清楚如何在沒有任何專用登錄組件的情況下將其集成。

有人能指導我嗎？我是React生態系統的新手，請原諒我的不理解。

任何幫助將不勝感激！

感謝

Answer 1

你是在正確的軌道上 - 終極版 - OIDC管理您的終極版狀態的登錄信息 - 實際管理智威湯遜（隱式流），重定向到IdentityServer（取）登錄頁面的客戶端庫並返回到您的應用程序（「回調」）是oidc客戶端。

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的創建者正在很好地解釋識別是如何工作的以及流程（隱式與混合）。 一旦你知道身份基礎知識以及它如何掛在一起，看看redux-oidc sample（很容易遵循）。

玩得開心;）