In wenigen Minuten ein auf Node.js basierendes Framework-SDK für Logto erstellen

In diesem Artikel haben wir in wenigen Minuten ein Web-SDK für Logto erstellt. Jetzt konzentrieren wir uns auf Node.js, eine weitere beliebte Plattform für JavaScript-Entwickler.

In diesem Leitfaden führen wir dich durch die Schritte zur Erstellung eines einfachen Express-SDKs für Logto unter Verwendung von @logto/node. Dieses SDK implementiert den Anmeldevorgang, und du kannst denselben Prozess befolgen, um ein SDK für jede andere auf Node.js-basierte Plattform wie Koa, Next.js, NestJS usw. zu erstellen.

Der Anmeldevorgang#

Bevor wir beginnen, lass uns den Anmeldevorgang bei Logto überprüfen. 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 Anmeldedaten ein und authentifiziert sich bei Logto.
3. Weiterleitung zurück zu deiner App: Nach erfolgreicher Authentifizierung wird der Benutzer mit einem Auth-Code zurück zu deiner App weitergeleitet.
4. Code-Austausch: Deine App tauscht den Auth-Code gegen Tokens ein und speichert die Tokens als Authentifizierungsstatus.

Kurze Einführung in @logto/node#

Ähnlich wie bei @logto/browser bietet das Paket @logto/node eine LogtoClient-Klasse, die die Kernfunktionen von Logto bereitstellt, einschließlich Methoden für den Anmeldevorgang:

1. signIn(): Generiert die OIDC-Auth-URL und leitet zu dieser weiter.
2. handleSignInCallback(): Überprüft und analysiert die Callback-URL und extrahiert den Auth-Code, der dann durch Aufruf des Token-Endpunkts gegen Tokens ausgetauscht wird.
3. getContext(): Holt den Kontext der aktuellen Anfrage basierend auf dem Sitzungscookie, einschließlich des Authentifizierungsstatus und der Benutzerinformationen.

Erstellung des Express-SDKs#

Im SDK werden wir zwei Routen-Handler (/sign-in und /sign-in-callback) sowie eine withLogto-Middleware bereitstellen:

1. /sign-in: Ein Routen-Handler, der den Anmeldevorgang mit einer Antwort startet, die zur OIDC-Auth-URL weiterleitet.
2. /sign-in-callback: Ein Routen-Handler, der die Callback-URL verarbeitet, den Auth-Code gegen Tokens austauscht, diese speichert und den Anmeldevorgang abschließt.
3. withLogto-Middleware: Eine Middleware, die getContext() aufruft, um den Kontext der aktuellen Anfrage abzurufen, einschließlich des Authentifizierungsstatus und der Benutzerinformationen.

Um das SDK zu verwenden, kannst du die Middleware einfach zu deiner Express-App hinzufügen, um Routen zu schützen, und die Routen-Handler verwenden, um den Anmeldevorgang auszulösen und den Callback zu verarbeiten.

Schritt 1: Installiere das Paket#

Zuerst installiere das Paket @logto/node mit npm oder einem anderen Paketmanager:

Schritt 2: Bereite den Speicheradapter vor#

Ein Speicheradapter ist erforderlich, um die LogtoClient-Instanz zu initialisieren.

Angenommen, der SDK-Benutzer hat bereits die Express-Sitzung eingerichtet, können wir die Storage-Klasse einfach implementieren, indem wir eine neue Datei storage.ts erstellen:

Schritt 3: Implementiere die Routen-Handler#

Die HTTP-Anfrage ist zustandslos, daher müssen wir die Client-Instanz für jede Anfrage initialisieren. Lass uns einen Funktionshelfer vorbereiten, um die Client-Instanz zu erstellen:

In dieser Funktion implementieren wir den navigate-Adapter zusammen mit dem ExpressStorage-Adapter. Der navigate-Adapter wird verwendet, um den Benutzer zur Anmelde-URL weiterzuleiten.

Als Nächstes implementieren wir die Routen-Handler, die in einer Funktion handleAuthRoutes verpackt sind:

1. Der Routen-Handler /auth/sign-in startet den Anmeldevorgang durch Aufruf von signIn(), ein Anmeldestatus wird in der Sitzung gespeichert und vom Routen-Handler /auth/sign-in-callback verwendet.
2. Der Routen-Handler /auth/sign-in-callback verarbeitet die Callback-URL und tauscht den Auth-Code durch den Aufruf von handleSignInCallback() gegen Tokens ein. Die Tokens werden in der Sitzung durch den ExpressStorage-Adapter gespeichert. Nach dem erfolgreichen Austausch wird der Benutzer zurück zur Startseite weitergeleitet.

Schritt 4: Middleware implementieren#

Die withLogto-Middleware wird verwendet, um Routen zu schützen. Sie ruft getContext() auf, um den Kontext der aktuellen Anfrage abzurufen, einschließlich des Authentifizierungsstatus und der Benutzerinformationen.

Die Funktion getContext verwendet den Speicheradapter, um die Tokens aus der Sitzung abzurufen.

Checkpoint: Verwendung des SDKs#

Nun, da du das Express-SDK für Logto erstellt hast, kannst du es in deiner App verwenden, indem du die Middleware hinzufügst, um Routen zu schützen, und die Routen-Handler verwendest, um den Anmeldevorgang auszulösen und den Callback zu verarbeiten.

Hier ist ein einfaches Beispiel, wie du das SDK in deiner Express-App verwenden kannst:

In diesem Beispiel verwenden wir die withLogto-Middleware, um den Authentifizierungsstatus zu überprüfen, und leiten den Benutzer zur Anmeldeseite weiter, wenn er nicht authentifiziert ist. Andernfalls zeigen wir eine Willkommensnachricht an.

Du kannst das offizielle Express-Beispielprojekt hier einsehen.

Fazit#

In diesem Leitfaden haben wir dich durch die Schritte zur Erstellung eines Express-SDKs für Logto geführt, das den grundlegenden Authentifizierungsprozess implementiert. Das hier bereitgestellte SDK ist ein einfaches Beispiel. Du kannst es erweitern, indem du weitere Methoden und Funktionen hinzufügst, um die Anforderungen deiner App zu erfüllen.

Du kannst denselben Prozess befolgen, um ein SDK für jede andere JavaScript-basierte Plattform zu erstellen, die auf Node.js läuft.

Ressourcen:

1. Logto Node SDK
2. Logto Express SDK