Lernen Sie, wie man ein individuelles SDK für Logto mit `@logto/browser` erstellt.
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.
Bevor wir anfangen, lassen Sie uns den Anmeldevorgang in Logto verstehen. Der Anmeldevorgang besteht aus den folgenden Schritten:
@logto/browserDas @logto/browser Paket bietet eine LogtoClient Klasse, die die Kerneigenschaften von Logto bereitstellt, einschließlich Methoden für den Anmeldevorgang:
signIn(): Generiert die OIDC-Auth-URL und leitet zu ihr weiter.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.isAuthenticated(): Überprüft, ob der Benutzer authentifiziert ist.Im SDK werden wir 2 Hooks zur Verfügung stellen: useLogto und useHandleSignInCallback, zusammen mit einer LogtoProvider Komponente:
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.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.
Installieren Sie zuerst das @logto/browser Paket mit npm oder anderen Paketmanagern:
Definieren Sie den Kontext des Anbieters, der 3 Teile enthält:
LogtoClient Instanz, die im Anbieter initialisiert wird und in den Hooks verwendet wird.Erstellen Sie eine neue Datei context.tsx und schreiben Sie den folgenden Code:
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:
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:
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.
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: