Schütze deine Express.js API mit JWT und Logto

Einleitung#

Wenn du eine Webanwendung entwickelst, ist es entscheidend, deine API-Endpunkte vor unbefugtem Zugriff zu schützen. Stell dir vor, du baust eine Online-Shopping-Website; du möchtest sicherlich nicht, dass Cyber-Diebe deine API ausnutzen.

Angenommen, du hast bereits eine Express.js-Anwendung mit Benutzer-Authentifizierung entwickelt, bei der sich Benutzer anmelden müssen, bevor sie bestimmte Aktionen ausführen können. Falls nicht, kannst du mit Logto durchstarten. Es erfordert nur ein paar Codezeilen, um einen Benutzer-Authentifizierungsfluss zu etablieren.

Selbst nach der Benutzer-Authentifizierung stehst du vor verschiedenen Möglichkeiten, deine API-Endpunkte zu schützen. Leider haben die meisten dieser Optionen ihre Nachteile:

• Sitzungsbasierte Authentifizierung: Bindet deine API an einen Sitzungs-Store, was nicht skalierbar ist und nicht gut zu Microservices passt.
• Aufruf eines Authentifizierungsdienstes: Dies führt zu einem zusätzlichen Netzwerkaufruf, der Latenz und Kosten erhöht. Einige Authentifizierungsdienste berechnen sogar in Abhängigkeit vom API-Aufrufvolumen, was zu hohen Kosten führen kann.

In diesem Tutorial zeigen wir, wie du deine API-Endpunkte mit JSON Web Tokens (JWT) und Logto sichern kannst. Dieser Ansatz bietet Skalierbarkeit und minimale zusätzliche Kosten.

Voraussetzungen#

Bevor du eintauchst, stelle sicher, dass du Folgendes hast:

• Ein Logto-Konto. Falls du noch keines hast, kannst du dich kostenlos registrieren.
• Ein Express.js-Projekt, das API-Schutz benötigt, und eine Client-Anwendung, die die API nutzt.
• Grundkenntnisse über JSON Web Token (JWT).

Definiere deine API-Ressource in Logto#

Logto nutzt RFC 8707: Resource Indicators for OAuth 2.0 voll aus, um deine API-Endpunkte zu sichern. Das bedeutet, dass du deine API-Ressourcen über ihre tatsächlichen URLs definieren kannst.

Navigiere zum Tab "API-Ressourcen" in der Logto-Konsole und klicke auf "API-Ressource erstellen", um eine neue zu erstellen. Wenn du beispielsweise den Endpunkt /api/products schützen möchtest, kannst du die URL https://yourdomain.com/api/products als Identifier verwenden.

Erhalte ein Zugriffstoken in deiner Client-Anwendung#

Um fortzufahren, musst du das Logto SDK in deine Client-Anwendung integrieren. Diese Anwendung kann sich von deinem Express.js-Backend unterscheiden; zum Beispiel könntest du eine React-App haben, die Express.js als Backend-API-Server verwendet.

Du musst auch die Konfiguration des Logto SDK anpassen, um Logto darüber zu informieren, dass du ein Zugriffstoken für deine API in diesem Grant anfordern möchtest. Hier ist ein Beispiel mit React:

Sobald sich ein Benutzer bei Logto anmeldet, wird isAuthenticated im Logto SDK zu true:

Jetzt kannst du die Methode getAccessToken verwenden, um ein Zugriffstoken für deine API zu erhalten:

Zuletzt füge dieses Zugriffstoken im Authorization-Header hinzu, wenn du Anfragen an deine API stellst:

Überprüfe das Zugriffstoken in deiner API#

In deiner Express.js-Anwendung, installiere die jose-Bibliothek zur JWT-Verifizierung:

Da wir die Bearer-Authentifizierung verwenden, extrahiere das Zugriffstoken aus dem Authorization-Header:

Anschließend erstelle ein Middleware zur Verifizierung des Zugriffstokens:

Du kannst diese Middleware jetzt verwenden, um deine API-Endpunkte zu schützen:

Mit diesem Ansatz musst du nicht jedes Mal, wenn eine Anfrage eingeht, den Logto-Server kontaktieren. Stattdessen holst du dir einmal die JSON Web Key Set (JWKS) vom Logto-Server und verifizierst danach die Zugriffstokens lokal.

Rollenbasierte Zugriffskontrolle#

Bis zu diesem Punkt haben wir nur überprüft, dass sich ein Benutzer bei Logto angemeldet hat. Wir wissen immer noch nicht, ob der Benutzer über die entsprechende Berechtigung zum Zugriff auf den API-Endpunkt verfügt. Das liegt daran, dass Logto es jedem erlaubt, ein Zugriffstoken für eine bestehende API-Ressource zu erhalten.

Um dieses Problem zu lösen, können wir eine rollenbasierte Zugriffskontrolle (RBAC) verwenden. In Logto kannst du Rollen definieren und ihnen Berechtigungen zuweisen. Konsultiere dieses Tutorial, um zu erfahren, wie du Rollen und Berechtigungen in Logto definierst.

Nachdem du Rollen und Berechtigungen definiert hast, kannst du die scopes-Option zur LogtoProvider-Komponente hinzufügen:

Logto wird dann nur ein Zugriffstoken mit den passenden Scopes an den Benutzer ausstellen. Beispielsweise, wenn ein Benutzer nur den read:products-Scope hat, wird das Zugriffstoken nur diesen Scope enthalten:

Wenn ein Benutzer sowohl die read:products- als auch write:products-Scopes hat, wird das Zugriffstoken beide Scopes mit einem Leerzeichen als Trennzeichen enthalten:

In deiner Express.js-Anwendung kannst du überprüfen, ob das Zugriffstoken den korrekten Scope enthält, bevor du Zugriff auf den API-Endpunkt gewährst:

Fazit#

Die Sicherung von API-Endpunkten bei gleichzeitiger Gewährleistung der Skalierbarkeit ist keine leichte Aufgabe. Bei Logto bemühen wir uns, die Anfragen-Authentifizierung für Entwickler zu vereinfachen, damit du dich mehr auf deine Geschäftslogik konzentrieren kannst.

Für Fragen kannst du gerne unserem Discord-Server beitreten. Unsere Community hilft dir gerne weiter.