Deutsch

oidc
supabase
auth
rls
jwt

Integration mit Supabase

Lerne, wie man Logto mit Supabase integriert, um das Authentifizierungserlebnis für deine Anwendungen zu verbessern.

Yijun

Developer

5/16/2024

Verschwenden Sie keine Wochen mit Benutzerauthentifizierung

Bringen Sie sichere Apps schneller mit Logto auf den Markt. Integrieren Sie Benutzerauthentifizierung in Minuten und konzentrieren Sie sich auf Ihr Kernprodukt.

Jetzt starten

Logto ist ein moderner Anbieter von Identitätsauthentifizierungsdiensten, der sichere, umfassende und benutzerfreundliche Anmeldungsunterstützung für Anwendungen bietet. Zusätzlich stellt es eine Vielzahl von SDKs und Integrationsanleitungen für verschiedene Frameworks und Programmiersprachen bereit, sodass du Unternehmensauthentifizierungsdienste nahtlos innerhalb von Minuten in deine Anwendung integrieren kannst.

Dieser Artikel konzentriert sich hauptsächlich darauf, wie man Supabase mit Logto integriert.

Grundlegendes zu Supabase

Supabase nutzt Postgres' Row-Level Security, um den Datenzugriff zu steuern. Einfach ausgedrückt, durch das Erstellen von Row-Level-Sicherheitspolicies für Tabellen in der Datenbank können wir festlegen und verwalten, wer Daten in einer Tabelle lesen, schreiben und aktualisieren kann.

Angenommen, du hast eine Tabelle namens "posts" in deiner Datenbank mit folgendem Inhalt:

Das Feld user_id in der Tabelle repräsentiert den Benutzer, zu dem die jeweiligen Post-Daten gehören. Du kannst jeden Benutzer darauf beschränken, nur auf seine eigenen Post-Daten basierend auf dem user_id-Feld zuzugreifen.

Bevor dies jedoch implementiert werden kann, muss Supabase in der Lage sein, den aktuellen Benutzer zu identifizieren, der auf die Datenbank zugreift.

Benutzerdaten zu Supabase-Anfragen hinzufügen

Dank Supabase's Unterstützung für JWT können wir, wenn unsere Anwendung mit Supabase interagiert, ein JWT erstellen, das Benutzerdaten enthält, indem wir das von Supabase bereitgestellte JWT-Geheimnis verwenden. Wir verwenden dieses JWT dann als Authentifizierungsheader bei Anfragen. Wenn Supabase die Anfrage erhält, wird die Gültigkeit des JWTs automatisch überprüft, und der Zugriff auf die darin enthaltenen Daten wird im weiteren Prozess gewährt.

Zunächst können wir das von Supabase bereitgestellte JWT-Geheimnis aus den „Projekteinstellungen“ im Supabase-Dashboard abrufen:

Dann verwenden wir, wenn wir das Supabase SDK benutzen, um Anfragen an Supabase zu stellen, dieses Geheimnis, um unser JWT zu generieren und es der Anfrage als Authentifizierungsheader beizufügen. (Beachte bitte, dass dieser Prozess innerhalb des Back-End-Dienstes deiner Anwendung stattfindet und das JWT-Geheimnis niemals an Dritte weitergegeben werden sollte).

Als Nächstes gehst du zum SQL-Editor im Supabase-Dashboard und erstellst eine Funktion, um die userId abzurufen, die in der Anfrage mitgeführt wird:

Der im Bild verwendete Code lautet wie folgt:

Wie der Code zeigt, kannst du in Supabase die Nutzlast des JWT, das wir generieren, durch Aufruf von request.jwt.claims abrufen. Das Feld userId innerhalb der Nutzlast ist der Wert, den wir festgelegt haben.

Mit dieser Funktion kann Supabase den Benutzer ermitteln, der aktuell auf die Datenbank zugreift.

Erstelle eine Row-Level-Sicherheitsrichtlinie

Als nächstes können wir eine Row-Level-Sicherheitsrichtlinie erstellen, um jeden Benutzer darauf zu beschränken, nur auf seine eigenen Post-Daten basierend auf dem user_id-Feld in der post-Tabelle zuzugreifen.

Navigiere zur Tabelleneditor-Seite im Supabase-Dashboard und wähle die post-Tabelle aus.
Klicke oben in der Tabelle auf "Eine RLS-Richtlinie hinzufügen".
Klicke im erscheinenden Fenster auf „Richtlinie erstellen“.
Gib einen Richtliniennamen ein und wähle den SELECT-Richtlinienbefehl.
Gib im using-Block des Codes unten ein:

Durch solche Richtlinien wird die Datenzugriffskontrolle innerhalb von Supabase erreicht.

In realen Anwendungen würdest du verschiedene Richtlinien erstellen, um Benutzeraktionen wie Dateneinfügung und -änderung einzuschränken. Dies liegt jedoch außerhalb des Umfangs dieses Artikels. Für weitere Informationen zur Row-Level-Sicherheit (RLS) siehe Schütze deine Daten mit Postgres Row-Level-Sicherheit.

Grundlegender Integrationsprozess mit Logto

Wie bereits erwähnt, verwendet Supabase RLS für seine Zugriffskontrolle. Der Schlüssel zur Integration mit Logto (oder anderen Authentifizierungsdiensten) liegt darin, die Benutzer-ID des autorisierten Benutzers zu erhalten und an Supabase zu senden. Der gesamte Prozess wird im folgenden Diagramm veranschaulicht:

Als Nächstes erklären wir, wie du Logto basierend auf diesem Prozessdiagramm mit Supabase integrierst.

Logto-Integration

Logto bietet Integrationsanleitungen für verschiedene Frameworks und Programmiersprachen.

Im Allgemeinen fallen Apps, die mit diesen Frameworks und Sprachen erstellt wurden, in Kategorien wie Native Apps, SPAs (Single-Page-Apps), traditionelle Web-Apps und M2M (Machine-to-Machine) Apps. Du kannst die Seite Logto Quick Starts besuchen, um Logto basierend auf deinem Tech-Stack in deine Anwendung zu integrieren. Befolge anschließend die folgenden Anweisungen, um Logto je nach Art deiner Anwendung in dein Projekt zu integrieren.

Native App oder SPA

Sowohl native Apps als auch SPAs laufen auf deinem Gerät und die Anmeldeinformationen (Access Token), die nach der Anmeldung erhalten werden, werden lokal auf deinem Gerät gespeichert.

Wenn du deine App mit Supabase integrierst, musst du daher über deinen Backend-Dienst mit Supabase interagieren, da du keine sensiblen Informationen (wie z.B. Supabase JWT-Geheimnis) auf dem Gerät jedes Benutzers offenlegen kannst.

Angenommen, du erstellst dein SPA mit React und Express. Du hast Logto erfolgreich in deine Anwendung integriert, indem du dem Logto React SDK Guide gefolgt bist. (Du kannst den Code in unserem React-Beispiel einsehen). Zusätzlich hast du die Logto Access Token-Validierung deinem Backend-Server gemäß der Anleitung Schütze deine API mit Node (Express) hinzugefügt.

Als Nächstes verwendest du das von Logto erhaltene Access Token, um Benutzerdaten von deinem Backend-Server anzufordern:

In deinem Backend-Server hast du bereits die ID des angemeldeten Benutzers aus dem Access Token extrahiert, indem du Middleware benutzt hast:

Nun kannst du den oben beschriebenen getSupabaseClient verwenden, um die userId dem JWT hinzuzufügen, das in nachfolgenden Anfragen an Supabase verwendet wird. Alternativ kannst du eine Middleware erstellen, um einen Supabase-Client für Anfragen zu erstellen, die mit Supabase interagieren müssen:

Beim weiteren Verarbeitungsfluss kannst du direkt ctx.supabase abrufen, um mit Supabase zu interagieren:

In diesem Code wird Supabase nur die Postdaten, die dem aktuellen Benutzer gehören, basierend auf den zuvor festgelegten Richtlinien zurückgeben.

Traditionelle Web-App

Der Hauptunterschied zwischen einer traditionellen Web-App und einer nativen App oder SPA besteht darin, dass eine traditionelle Web-App Seiten ausschließlich auf dem Webserver rendert und aktualisiert. Daher werden Benutzeranmeldedaten direkt vom Webserver verwaltet, während sie bei nativen Apps und SPAs auf dem Gerät des Benutzers gespeichert werden.

Wenn du Logto in eine traditionelle Web-App in Supabase integrierst, kannst du die ID des angemeldeten Benutzers direkt vom Backend abrufen.

Angenommen, du erstellst ein Next.js-Projekt, nachdem du Logto mit deinem Projekt integriert hast, indem du dem Next.js SDK Guide gefolgt bist, kannst du das Logto SDK verwenden, um Benutzerinformationen abzurufen und das entsprechende JWT für die Interaktion mit Supabase zu erstellen.

Machine-to-Machine-App

Machine-to-Machine (M2M) wird häufig verwendet, wenn deine App direkt mit Ressourcendiensten kommunizieren muss, wie beispielsweise ein statischer Dienst, der tägliche Posts abruft, usw.

Du kannst den Leitfaden Machine-to-Machine: Auth mit Logto für die Authentifizierung von Machine-to-Machine-Apps verwenden. Die Integration zwischen Supabase und Machine-to-Machine-Apps ist ähnlich wie bei nativen Apps und SPAs (wie im Abschnitt „Native App oder SPA“ beschrieben). Sie umfasst das Abrufen eines Access-Tokens von Logto und dessen Validierung über eine geschützte Backend-API.

Es ist jedoch wichtig zu beachten, dass native Apps und SPAs in der Regel für Endbenutzer entwickelt wurden, sodass die erhaltene Benutzer-ID den Benutzer selbst repräsentiert. Das Access-Token für Machine-to-Machine-Apps repräsentiert jedoch die Anwendung selbst und das sub-Feld im Access-Token-Payload ist die Client-ID der M2M-App, nicht eines bestimmten Benutzers. Daher ist es bei der Entwicklung wichtig, zu unterscheiden, für welche Daten die Machine-to-Machine-Apps gedacht sind.

Darüber hinaus, wenn du möchtest, dass eine bestimmte M2M-App im Namen des gesamten Dienstes auf Supabase zugreifen kann, um RLS-Einschränkungen zu umgehen, kannst du das service_role-Geheimnis von Supabase verwenden, um einen Supabase-Client zu erstellen. Dies ist nützlich, wenn du einige Verwaltungs- oder Automatisierungsaufgaben, die den Zugriff auf alle Daten erfordern, durchführen möchtest, ohne durch die Richtlinien der Row-Level-Sicherheit für einzelne Benutzer eingeschränkt zu werden.

Das service_role-Geheimnis kann an derselben Stelle wie das JWT-Geheimnis gefunden werden:

Wenn du einen Supabase-Client erstellst, verwende das service_role-Geheimnis, dieser Client kann dann auf alle Daten in der Datenbank zugreifen:

Zusammenfassung

In diesem Artikel haben wir uns eingehend mit der Integration von Logto mit Supabase beschäftigt und dabei wichtige Einblicke und kritische Integrationsaspekte hervorgehoben. Wir haben Konzepte wie JWT-Authentifizierung und Row-Level-Sicherheitsrichtlinien behandelt und dich durch den Prozess der nahtlosen Integration von Logto in deine Supabase-basierten Anwendungen geführt. Mit diesem Wissen hoffen wir, dass du in der Lage bist, die Sicherheit, Funktionalität und weitere Features deiner Anwendung selbstbewusst zu verbessern und deine Projekte zu erweitern.

Probieren Sie Logto Cloud kostenlos aus

Grundlegendes zu Supabase#

Benutzerdaten zu Supabase-Anfragen hinzufügen#

Erstelle eine Row-Level-Sicherheitsrichtlinie#

Grundlegender Integrationsprozess mit Logto#

Logto-Integration#

Native App oder SPA#

Traditionelle Web-App#

Machine-to-Machine-App#

Zusammenfassung#

Grundlegendes zu Supabase#

Benutzerdaten zu Supabase-Anfragen hinzufügen#

Erstelle eine Row-Level-Sicherheitsrichtlinie#

Grundlegender Integrationsprozess mit Logto#

Logto-Integration#

Native App oder SPA#

Traditionelle Web-App#

Machine-to-Machine-App#

Zusammenfassung#

Grundlegendes zu Supabase

Benutzerdaten zu Supabase-Anfragen hinzufügen

Erstelle eine Row-Level-Sicherheitsrichtlinie

Grundlegender Integrationsprozess mit Logto

Logto-Integration

Native App oder SPA

Traditionelle Web-App

Machine-to-Machine-App

Zusammenfassung

Grundlegendes zu Supabase

Benutzerdaten zu Supabase-Anfragen hinzufügen

Erstelle eine Row-Level-Sicherheitsrichtlinie

Grundlegender Integrationsprozess mit Logto

Logto-Integration

Native App oder SPA

Traditionelle Web-App

Machine-to-Machine-App

Zusammenfassung