Ein Web-SDK für Logto in Minuten erstellen

Logto, eine Open-Source-Auth-Plattform, bietet eine Vielzahl von offiziellen SDKs, die dazu dienen, die Integration für verschiedene Frameworks und Plattformen zu vereinfachen. Es gibt jedoch immer noch viele Plattformen, für die es keine offiziellen SDKs gibt.

Um diese Lücke zu schließen, bietet Logto das grundlegende Paket @logto/browser, das darauf ausgelegt ist, Entwickler bei der Erstellung von benutzerdefinierten SDKs zu unterstützen, die auf spezifische Anforderungen zugeschnitten sind. Dieses Paket implementiert die Kerneigenschaften von Logto, unabhängig von einem spezifischen Framework oder einer Plattform, solange es JavaScript unterstützt und in einer Browserumgebung läuft.

In diesem Leitfaden führen wir Sie durch die Schritte zur Erstellung eines React SDK mit @logto/browser. Dieses SDK implementiert den Anmeldeprozess. Sie können diesen Leitfaden verfolgen, um ein SDK für jede andere JavaScript-basierte Plattform zu erstellen, die im Browser läuft.

Der Anmeldevorgang#

Bevor wir anfangen, lassen Sie uns den Anmeldevorgang in Logto verstehen. Der Anmeldevorgang besteht aus den folgenden Schritten:

1. Weiterleitung zu Logto: Der Benutzer wird zur Anmeldeseite von Logto weitergeleitet.
2. Authentifizierung: Der Benutzer gibt seine Anmeldeinformationen ein und authentifiziert sich mit Logto.
3. Weiterleitung zurück zu Ihrer App: Nach erfolgreicher Authentifizierung wird der Benutzer mit einem Auth-Code zurück zu Ihrer App weitergeleitet.
4. Code-Austausch: Ihre App tauscht den Auth-Code gegen Tokens aus.

Kurze Einführung in @logto/browser#

Das @logto/browser Paket bietet eine LogtoClient Klasse, die die Kerneigenschaften von Logto bereitstellt, einschließlich Methoden für den Anmeldevorgang:

1. signIn(): Generiert die OIDC-Auth-URL und leitet zu ihr weiter.
2. handleSignInCallback(): Überprüft und analysiert die Callback-URL und extrahiert den Auth-Code, dann tauscht es den Code gegen Tokens aus, indem es den Token-Endpunkt aufruft.
3. isAuthenticated(): Überprüft, ob der Benutzer authentifiziert ist.

Erstellen des React SDKs#

Im SDK werden wir 2 Hooks zur Verfügung stellen: useLogto und useHandleSignInCallback, zusammen mit einer LogtoProvider Komponente:

1. useLogto: Ein Hook, der die signIn Methode zur Verfügung stellt, um den Anmeldevorgang auszulösen, und den isAuthenticated Zustand, um zu überprüfen, ob der Benutzer authentifiziert ist.
2. useHandleSignInCallback: Ein Hook, der die Callback-URL verarbeitet und den Auth-Code gegen Tokens tauscht, um den Anmeldevorgang abzuschließen.

Um das SDK zu verwenden, können Sie Ihre App einfach mit der LogtoProvider Komponente einhüllen und die Hooks verwenden, um den Auth-Zustand, die Anmeldung und die Callback-Funktion zu überprüfen.

Schritt 1: Installieren Sie das Paket#

Installieren Sie zuerst das @logto/browser Paket mit npm oder anderen Paketmanagern:

Schritt 2: Definieren Sie den Kontext von React#

Definieren Sie den Kontext des Anbieters, der 3 Teile enthält:

1. Die zugrunde liegende LogtoClient Instanz, die im Anbieter initialisiert wird und in den Hooks verwendet wird.
2. Der Authentifizierungsstatus.
3. Die Methode zur Festlegung des Authentifizierungsstatus.

Erstellen Sie eine neue Datei context.tsx und schreiben Sie den folgenden Code:

Schritt 3: Implementieren Sie den Provider#

Mit dem bereiten Kontext implementieren wir nun den Provider. Der Provider wird die LogtoClient Instanz initialisieren, überprüfen, ob der Benutzer authentifiziert ist und seinen Kindern den Kontext zur Verfügung stellen.

Erstellen Sie eine neue Datei provider.tsx:

Schritt 4: Implementieren Sie die Hooks#

Jetzt implementieren wir die Hooks.

• useLogto: In diesem Hook verwenden wir den Kontext, um die LogtoClient Instanz zu erhalten, und stellen die signIn Methode und den isAuthenticated Zustand zur Verfügung. Sie können diesem Hook weitere Methoden hinzufügen.
• useHandleSignInCallback: Dieser Hook liest die Callback-URL aus dem Browser, extrahiert den Auth-Code und tauscht ihn gegen Tokens. Er setzt auch den Authentifizierungszustand auf true, nachdem der Benutzer authentifiziert ist.

Erstellen Sie eine neue Datei hooks.ts und schreiben Sie den folgenden Code:

Checkpoint: Nutzung des SDK#

Jetzt haben Sie das React SDK für Logto erstellt. Sie können es in Ihrer App verwenden, indem Sie die App mit der LogtoProvider Komponente umhüllen und die Hooks verwenden, um den Auth-Zustand, die Anmeldung und die Callback-Funktion zu überprüfen. Sie können das offizielle React-Beispielprojekt hier überprüfen.

Fazit#

In diesem Leitfaden haben wir Ihnen die Schritte zur Erstellung eines React SDK für Logto gezeigt, das den grundlegenden Auth-Flow implementiert. Das hier bereitgestellte SDK ist ein Grundbeispiel. Sie können es erweitern, indem Sie weitere Methoden und Funktionen hinzufügen, um den Bedürfnissen Ihrer App gerecht zu werden.

Sie können diesen Leitfaden verfolgen, um ein SDK für jede andere JavaScript-basierte Plattform zu erstellen, die im Browser läuft.

Ressourcen:

1. Logto Browser SDK
2. Logto React SDK