web-dev-qa-db-ja.com

ReactのOpenIDConnectSSO-Reduxアプリ

OpenID-Connectプロバイダーを使用してReact-ReduxアプリにSSOを実装しようとしています。目的は、すべてのコンポーネントを保護し、セッションが終了した場合にユーザーをIDプロバイダーのログインページにリダイレクトすることです。これが、アプリケーションに専用のログインページ(コンポーネント)を設定できない理由です。 JWTをlocalStorageに保存するのは良い考えだと読んだので、ReduxストアでisAuthenticatedフラグを使用して、JWTをlocalStorageに保持することを考えていました。次に、localStorageからJWTをフェッチして、アプリ内から呼び出す他のAPIを認証できます。このアプローチは適切ですか?

さらに、この目的でJWTをフェッチ(および更新)するために使用できるライブラリ/パッケージを誰かに教えてもらえますか?私は多くのドキュメントを調べて次のことを試しましたが、これらを機能させることができませんでした。

  • redux-oidc :アプリケーションに特定のコールバックコンポーネントがないため、このアプローチをアプリに適用する方法がよくわかりません。

  • passport-openid-connect :PassportはセッションをCookieに保存することに依存していますが、代わりにlocalSorageを使用したいと思います。

  • redux-auth-wrapper :高次のコンポーネントは素晴らしいように聞こえますが、専用のログインコンポーネントがないと統合する方法がわかりません。

誰かが私を案内してくれませんか?私はReactエコシステムの初心者なので、理解できないことをお許しください。

どんな助けでも大歓迎です!

ありがとう

9
Hawkes

あなたは正しい方向に進んでいます-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サンプル (非常に簡単に理解できます)を見てください。

楽しんで ;)

13
Leon