OpenIDをReact-Reduxアプリケーションに接続する

Question

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

また、私はこの目的のためにJWTをフェッチ（およびリフレッシュ）するために使用できるライブラリ/パッケージを教えていただけますか？私は、ドキュメントの多くを経て、次のことを試してみたが、仕事にこれらを取得できませんでした：

• redux-oidc：私は自分のアプリケーション内の任意の特定のコールバックのコンポーネントを持っていないので、私はかなり方法がわかりません私のアプリにこのアプローチを適用する。

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

• ：高次のコンポーネントは素晴らしいとは言えますが、専用のログインコンポーネントなしで統合する方法はまだ分かりません。

誰かが私を案内してくれますか？私はリアクトエコシステムの初心者ですので、私の不本意を許してください。

ご協力いただければ幸いです。

おかげ

Answer 1

あなたは正しい軌道に乗っている - 実際にIdentityServer（方）ログインページにリダイレクトする、JWT（暗黙の流れ）を管理クライアントライブラリ - Reduxの-oidcは、ログイン情報を使用してReduxの状態を管理しますアプリに戻る（「コールバック」）はoidc-clientです。

redux-auth-wrapperは基本的にHOC（高次コンポーネント）です。ユーザーが（Reduxストアまたはカスタム関数で）認証され、ログインページに転送されているかどうかを確認するためのラッパーです。 redux-oidcはすでに必要なものすべてを提供しているので、あなたは本当にそれを必要としません。

個人的には、IdentityServer4も実装しています。これは、すべての外部プロバイダを一元的に管理するためのものです。

私はIdentityServer4の作成者が識別の仕組みとフロー（暗黙的対ハイブリッド）の仕組みを非常によく説明しているhttps://blogs.msdn.microsoft.com/webdev/2017/04/26/the-mvp-show-learns-about-asp-net-identity-server-and-heidelberg/を最初に見てみることをお勧めします。 アイデンティティの基本とそれがどのように一緒にハングアップするかを知ったら、redux-oidc sample（非常に簡単に）を見てください。

楽しもう;）