## 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](https://logto.io/) 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](https://cloud.logto.io/). - Ein Express.js-Projekt, das API-Schutz benötigt, und eine Client-Anwendung, die die API nutzt. - Grundkenntnisse über [JSON Web Token (JWT)](https://datatracker.ietf.org/doc/html/rfc7519). Wir verstehen, dass das RFC lang sein kann. Kurz gesagt, ein JWT ist ein base64-kodierter String, der aus drei Teilen besteht: Header, Payload und Signatur. Das Payload speichert die Informationen, die du möchtest, während die Signatur die Integrität des Tokens sicherstellt. ## Definiere deine API-Ressource in Logto Logto nutzt [RFC 8707: Resource Indicators for OAuth 2.0](https://datatracker.ietf.org/doc/html/rfc8707) 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. ![API-Ressource erstellen](https://uploads.strapi.logto.io/1/create_api_resource_13a2c8e660.png) ## 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: ```tsx import { LogtoProvider } from '@logto/react'; const App = () => { return ( ); }; ``` Sobald sich ein Benutzer bei Logto anmeldet, wird `isAuthenticated` im Logto SDK zu `true`: ```tsx import { useLogto } from '@logto/react'; const Content = () => { const { isAuthenticated } = useLogto(); console.log(isAuthenticated); // true }; ``` Jetzt kannst du die Methode `getAccessToken` verwenden, um ein Zugriffstoken für deine API zu erhalten: ```tsx const Content = () => { const { getAccessToken, isAuthenticated } = useLogto(); useEffect(() => { if (isAuthenticated) { const accessToken = await getAccessToken('https://yourdomain.com/api/products'); console.log(accessToken); // eyJhbG... } }, [isAuthenticated, getAccessToken]); }; ``` Zuletzt füge dieses Zugriffstoken im `Authorization`-Header hinzu, wenn du Anfragen an deine API stellst: ```tsx const Content = () => { const { getAccessToken, isAuthenticated } = useLogto(); useEffect(() => { if (isAuthenticated) { const accessToken = await getAccessToken('https://yourdomain.com/api/products'); const response = await fetch('https://yourdomain.com/api/products', { headers: { Authorization: `Bearer ${accessToken}`, }, }); } }, [isAuthenticated, getAccessToken]); }; ``` ## Überprüfe das Zugriffstoken in deiner API In deiner Express.js-Anwendung, installiere die `jose`-Bibliothek zur JWT-Verifizierung: ```bash npm install jose ``` Da wir die Bearer-Authentifizierung verwenden, extrahiere das Zugriffstoken aus dem `Authorization`-Header: ```ts import { IncomingHttpHeaders } from 'http'; const extractBearerTokenFromHeaders = ({ authorization }: IncomingHttpHeaders) => { if (!authorization) { throw new Error('Authorization header fehlt'); } if (!authorization.startsWith('Bearer')) { throw an Error('Authorization header ist nicht im Bearer-Schema'); } return authorization.slice(7); // Die Länge von 'Bearer ' ist 7 }; ``` Anschließend erstelle ein Middleware zur Verifizierung des Zugriffstokens: ```ts import { createRemoteJWKSet, jwtVerify } from 'jose'; // Erzeuge ein JWKS mithilfe der jwks_uri, die vom Logto-Server erhalten wurde // Ersetze `` durch deinen Logto-Endpunkt, z.B. `abc123.logto.app` const jwks = createRemoteJWKSet(new URL('https:///oidc/jwks')); export const authMiddleware = async (req, res, next) => { // Extrahiere das Token mit der oben definierten Hilfsfunktion const token = extractBearerTokenFromHeaders(req.headers); const { payload } = await jwtVerify( // Das rohe Bearer-Token, das aus dem Anforderungs-Header extrahiert wurde token, jwks, { // Erwarteter Aussteller des Tokens, ausgestellt vom Logto-Server issuer: 'https:///oidc', // Erwartetes Publikumstoken, der Ressourcenindikator der aktuellen API audience: 'https://yourdomain.com/api/products', } ); // Sub ist die Benutzer-ID, die zur Benutzeridentifizierung verwendet wird const { scope, sub } = payload; // Für rollenbasierte Zugriffskontrolle, wir besprechen es später assert(scope.split(' ').includes('read:products')); return next(); }; ``` Du kannst diese Middleware jetzt verwenden, um deine API-Endpunkte zu schützen: ```ts app.get('/api/products', authMiddleware, (req, res) => { // ... }); ``` 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](https://docs.logto.io/docs/recipes/rbac/), 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: ```tsx ``` 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: ```json { "scope": "read:products", "sub": "1234567890" } ``` Wenn ein Benutzer sowohl die `read:products`- als auch `write:products`-Scopes hat, wird das Zugriffstoken beide Scopes mit einem Leerzeichen als Trennzeichen enthalten: ```json { "scope": "read:products write:products", "sub": "1234567890" } ``` 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: ```ts assert(scope.split(' ').includes('read:products')); ``` ## 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](https://discord.gg/UEPaF3j5e6) beitreten. Unsere Community hilft dir gerne weiter. Probiere Logto noch heute aus