OpenID Connect SSO in React-Redux-App

Question

Ich versuche, SSO auf meiner React-Redux-App mit einem OpenID-Connect-Provider zu implementieren. Es ist beabsichtigt, alle Komponenten zu schützen und den Benutzer auf die Anmeldeseite des Identitätsanbieters umzuleiten, wenn die Sitzung beendet wird. Aus diesem Grund kann ich keine dedizierte Anmeldeseite (Komponente) in der Anwendung haben. Ich habe gelesen, dass das Speichern von JWTs in der localStorage-Datei eine gute Idee ist. Daher habe ich daran gedacht, ein Flag isAuthenticated im Redux-Store zu verwenden und JWTs in localStorage zu speichern. Ich kann dann die JWTs aus dem localStorage abrufen, um andere APIs zu authentifizieren, die ich von meiner App aus aufrufen würde. Ist diese Vorgehensweise angemessen?

Darüber hinaus kann mich jemand auf eine Bibliothek/Paket verweisen, die ich verwenden kann, um JWTs für diesen Zweck zu holen (und zu aktualisieren)? Ich ging durch eine Menge von Dokumentation und folgendes versucht, aber konnte nicht diese an der Arbeit:

• redux-oidc: Ich habe keine spezifische Rückruf-Komponente in meiner Anwendung habe, damit ich nicht so recht, wie diesen Ansatz auf meine App anwenden.

• passport-openid-connect: Passport basiert auf Speichern von Sitzungen in Cookies, aber ich möchte stattdessen den LocalSorage verwenden.

• redux-auth-wrapper: Eine Komponente höherer Ordnung hört sich großartig an, aber ich kann immer noch nicht herausfinden, wie ich sie integrieren kann, ohne eine dedizierte Login-Komponente.

Könnte jemand bitte mich durch führen? Ich bin ein Neuling im React-Ökosystem, bitte entschuldige mein Unverständnis.

Jede Hilfe wäre sehr willkommen!

Dank

Answer 1

Sie sind auf der richtigen Weg - Redux-OIDC verwaltet Ihren Redux Zustand mit den Login-Daten - die Client-Bibliothek, die das JWT tatsächlich verwaltet (implizite Flow), zu der IdentityServer Umleitung (je nachdem, was) Login-Seite und zurück zu Ihrer App (der "Rückruf") ist Oidc-Client.

redux-auth-wrapper ist nur eine HOC (High Order Component) - im Grunde ein Wrapper, um zu überprüfen, ob der Benutzer authentifiziert (entweder im Redux-Speicher oder mit einer benutzerdefinierten Funktion) und auf eine Login-Seite weitergeleitet wird Meinung, dass Sie es nicht wirklich brauchen, da redux-oidc Ihnen bereits alles gibt, was Sie brauchen.

Ich persönlich implementiert auch eine IdentityServer4 - um alle externen Anbieter zentral zu verwalten - und es funktioniert bisher großartig.

Ich würde vorschlagen, zuerst Blick auf https://blogs.msdn.microsoft.com/webdev/2017/04/26/the-mvp-show-learns-about-asp-net-identity-server-and-heidelberg/, wo der Schöpfer von IdentityServer4 sehr gut erklärt, wie die Identifizierung funktioniert und die Flüsse (implizit vs Hybrid). Sobald Sie die Identität Grundlagen kennen und wie alles zusammen hängt, schauen Sie sich die redux-oidc sample (sehr einfach zu folgen).

Viel Spaß;)