## Einführung Bei einem neuen Projekt kann man normalerweise einige Dinge nicht überspringen: APIs, Authentifizierung + Autorisierung, Identität und Endnutzer-Anmeldefluss. Früher war es schwer, diese Dinge zu starten, da es viele Konzepte und Technologien gibt, die weit verbreitet sind: RESTful/GraphQL, Web-Frontend, native Clients, Verbindung von Clients mit APIs, Authen-Best Practices, um Sicherheit und Benutzererfahrung auszugleichen, etc. Außerdem sind die meisten Arbeiten „wiederholend“. Ich meine, sie sind notwendig und ähneln sich bei fast jedem Projekt, mit einigen Anpassungen. Klingt das beängstigend und mühsam? Keine Panik. Heute haben wir Open Source. Mit den beiden untenstehenden Open-Source-Projekten wird alles nicht mehr schwierig: - [Logto](https://github.com/logto-io/logto): Hilft dir, die Anmeldung, Auth und Benutzeridentität in Minuten zu erstellen. - [Hasura](https://github.com/hasura/graphql-engine): Rasend schnelle, sofortige Echtzeit-GraphQL-APIs auf deiner DB mit fein abgestimmter Zugriffskontrolle. In diesem Artikel konzentrieren wir uns darauf, Logto und Hasura zu verbinden, was es dir ermöglicht, Authentifizierung, Autorisierung und GraphQL-APIs ohne Hindernisse zu implementieren. So kannst du schnell in dein Geschäft einsteigen, ohne Raketenwissenschaften lernen zu müssen. ## Erste Schritte ### Voraussetzungen Da sowohl [Logto](https://docs.logto.io/docs/tutorials/get-started/) als auch [Hasura](https://hasura.io/docs/latest/getting-started/index/) eine gute Einführung bieten, gehen wir davon aus, dass du sie gelesen und ein grundlegendes Gefühl dafür hast. Zugriff auf eine laufende Instanz von beiden ist erforderlich. Wir gehen davon aus, dass die zugänglichen Endpunkte sind: - Logto: `http://localhost:3001` - Hasura: `http://localhost:8080` Wenn du Docker/Docker Compose verwendest, um auf das `localhost` deiner Maschine zuzugreifen, kannst du den magischen Docker-String `host.docker.internal` verwenden. In diesem Fall lautet der Logto-Endpunkt `http://host.docker.internal:3001`. Außerdem gehen wir davon aus, dass du eine bevorzugte Plattform und ein Framework hast, um die Client-App zu erstellen, z. B. React oder Next.js. ### API in Logto einrichten Klicke im linken Navigationsbereich deiner Logto Admin-Konsole auf „API-Ressourcen“, und du siehst die Verwaltungseite der API-Ressourcen. Klicke dann auf die große Schaltfläche „+ API-Ressource erstellen“ in der oberen rechten Ecke. Gib im sich öffnenden Modalfenster `Hasura` für den API-Namen und `https://hasura.api` für den API-Identifier ein. Create API modal

Wir werden diesen API-Identifier für den Rest unseres Artikels verwenden. Aber du kannst die Werte gerne nach Belieben ändern. Klicken auf „API-Ressource erstellen“, und es wird eine Nachricht angezeigt, die anzeigt, dass die Ressource erfolgreich erstellt wurde. Das ist alles, was wir derzeit in Logto benötigen. ### Rolle für Hasura erstellen Um von Hasuras Berechtigungsverwaltung Gebrauch zu machen, werden wir Rollen in Logto erstellen, die den Rollen von Hasura zugeordnet werden. Create Role

Der Rollenname muss dem Rollennamen auf der Hasura-Seite „Berechtigungen“ entsprechen. Denke daran, die Rolle den Benutzern zuzuweisen. ### Webhook-Authentifizierung in Hasura aktivieren [Hasura verwendet rollenbasierte Zugriffskontrolle](https://hasura.io/docs/latest/auth/index/), die die Autorisierung regelt. Daher müssen wir uns nur um die Authentifizierung kümmern. Es unterstützt zwei Methoden: Webhook und JWT. Wir wählen [Webhook](https://hasura.io/docs/latest/auth/authentication/webhook/), da es flexibler ist. Um die Webhook-Authentifizierung zu aktivieren, musst du das Admin-Geheimnis und den Auth-Hook-Endpunkt festlegen. - Das Admin-Geheimnis ist der Schlüssel, um Zugang zum Hasura-Admin zu haben, wenn Anfragen gesendet werden. Es ist erforderlich, bevor die Webhook-Authentifizierung aktiviert wird. Denke daran, es an einem sicheren Ort aufzubewahren und es nicht in Produktion zu verwenden. - Der Auth-Hook-Endpunkt ist eine URL, um Authentifizierungsanfragen zu senden. Du kannst sie über [Umgebungsvariablen](https://hasura.io/docs/latest/auth/authentication/webhook/#configuring-webhook-mode) festlegen: ```yaml HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey # Ersetze durch dein eigenes Geheimnis HASURA_GRAPHQL_AUTH_HOOK: http://localhost:3001/api/authn/hasura?resource=https://hasura.api ``` Du wirst bemerken, dass wir den API-Identifier, der in Logto ausgefüllt wurde, verwenden, um den Auth-Hook-Endpunkt zu erstellen. Es stellt sicher, dass der Benutzer das richtige "Bearer Token" anstelle eines zufälligen, möglicherweise von einem Angreifer stammenden Tokens übergibt. Du musst den Auth-Hook-Endpunkt aktualisieren, wenn du einen anderen Logto-Endpunkt oder API-Indikator hast. Angenommen, du hast `https://logto.domain.com` als Logto-Endpunkt und `https://graphql.domain.com` als API-Identifier, dann wird es: ```yaml HASURA_GRAPHQL_AUTH_HOOK: https://logto.domain.com/api/authn/hasura?resource=https://graphql.domain.com ``` Ab jetzt wird Hasura bei jeder GraphQL-Anfrage alle Anfrage-Header an den Logto-Auth-Hook-Endpunkt senden, und Logto wird entsprechend antworten. ## Gesicherte GraphQL-Anfragen senden ### Zusammenfassung Da wir das Hasura-Admin-Geheimnis nicht in der Produktion verwenden werden, wird jede GraphQL-Anfrage durch die folgenden Header gesichert: - `Authorization` Das standardmäßige Bearer-Token, das von Logto generiert wird. - `Expected-Role` Die Rolle, die du möchtest, dass Logto in der Auth-Hook-Antwort anzeigt. Wenn der Benutzer, den der `Authorization`-Header angibt, nicht die `Expected-Role` hat, wird Logto mit `401 Unauthorized` antworten. Der `Authorization`-Header erfordert ein gültiges Zugangs-Token im JWT-Format mit dem Hasura-API-Indikator für das Publikum. Moment mal - es ist ziemlich schwer, sich all dies zu merken und zusammenzustellen. Zum Glück haben wir Logto-SDKs, um den geekigen Teil zu vereinfachen. ### Logto SDK integrieren Folge dem [Integrationshandbuch](https://docs.logto.io/docs/recipes/integrate-logto/), um ein Logto-SDK in deiner Client-App zu integrieren. Es ermöglicht nicht nur die Fähigkeit, ein gültiges Zugangs-Token für GraphQL-Anfragen zu erstellen, sondern auch ein reibungsloses Anmeldeerlebnis für deine Endnutzer. Sobald du die Anleitung abgeschlossen hast, brauchen wir eine kleine Änderung am `LogtoConfig`: Füge den API-Indikator hinzu, den du in der Logto Admin-Konsole erstellt hast, zu `resources`. Am Beispiel des React-SDKs: ```tsx const config: LogtoConfig = { endpoint: 'http://localhost:3001', appId: '', resources: ['https://hasura.api'], // Diese Zeile hinzufügen }; ``` ### Anfragen senden Endlich! Nach der Anmeldung des Benutzers verwende `getAccessToken()` im Logto-SDK, um das Zugangs-Token für Hasura-GraphQL-Anfragen abzurufen: ```tsx const accessToken = await logto.getAccessToken('https://hasura.api'); // Bevor die Anfrage gesendet wird request.headers.set('Authorization', `Bearer ${accessToken}`); request.headers.set('Expected-Role', 'user'); ``` ## Rückblick Mit dem obigen Aufwand haben wir erfolgreich alle nicht überspringbaren Dinge in der Einführung implementiert: - Ein Datenbankschema-gesteuertes GraphQL-API-Endpunkt - Ein Auth- und Identitätsservice basierend auf dem OIDC-Protokoll - Der vollständige Endnutzer-Anmeldefluss und die Verwaltung des Auth-Zustands - Gesicherter API-Zugriff basierend auf Benutzeridentität und Rollen Gar nicht so schwer, oder? Wenn du auf irgendwelche Probleme stößt, kannst du gerne dem [Logto](https://discord.gg/vRvwuwgpVX) oder [Hasura](https://discord.gg/hasura) Discord-Server beitreten, um ein Live-Chat mit dem Team zu führen.