Logto x Hasura: Wie man mit einer Open-Source-Auth + GraphQL-Lösung das Projekt vorantreibt

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: Hilft dir, die Anmeldung, Auth und Benutzeridentität in Minuten zu erstellen.
• Hasura: 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 als auch Hasura 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

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.

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.

Denke daran, die Rolle den Benutzern zuzuweisen.

Webhook-Authentifizierung in Hasura aktivieren#

Hasura verwendet rollenbasierte Zugriffskontrolle, 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, 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 festlegen:

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:

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.

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, 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:

Anfragen senden#

Endlich! Nach der Anmeldung des Benutzers verwende getAccessToken() im Logto-SDK, um das Zugangs-Token für Hasura-GraphQL-Anfragen abzurufen:

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 oder Hasura Discord-Server beitreten, um ein Live-Chat mit dem Team zu führen.