[Logto](https://logto.io/) 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](https://www.postgresql.org/docs/current/ddl-rowsecurity.html), 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: Posts Tabelle

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: Supabase API-Einstellungen Seite

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). ```jsx import { createClient } from '@supabase/supabase-js'; import { sign } from 'jsonwebtoken'; /* * Hinweis: * Die SUPABASE_URL und den SUPABASE_ANON_KEY findest du an derselben Stelle wie das JWT-Geheimnis. */ const SUPABASE_URL = process.env.SUPABASE_URL; const SUPABASE_ANON_KEY = process.env.SUPABASE_ANON_KEY; const SUPABASE_JWT_SECRET = process.env.SUPABASE_JWT_SECRET; export const getSupabaseClient = (userId) => { const jwtPayload = { userId, }; const jwt = sign(jwtPayload, SUPABASE_JWT_SECRET, { expiresIn: '1h', // Nur zur Demonstration }); const client = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, { global: { headers: { Authorization: `Bearer ${jwt}`, }, }, }); return client; }; ``` 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: Erstelle eine User-ID-Funktion

Der im Bild verwendete Code lautet wie folgt: ```sql create or replace function auth.user_id() returns text as $$ select nullif(current_setting('request.jwt.claims', true)::json->>'userId', '')::text; $$ language sql stable; ``` 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. 1. Navigiere zur Tabelleneditor-Seite im Supabase-Dashboard und wähle die post-Tabelle aus. 2. Klicke oben in der Tabelle auf "Eine RLS-Richtlinie hinzufügen". 3. Klicke im erscheinenden Fenster auf „Richtlinie erstellen“. 4. Gib einen Richtliniennamen ein und wähle den SELECT-Richtlinienbefehl. 5. Gib im `using`-Block des Codes unten ein: ```sql auth.user_id() = user_id ``` Erstelle RLS-Richtlinie

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](https://supabase.com/docs/guides/database/postgres/row-level-security). ### 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: ```mermaid sequenceDiagram Participant U as Endbenutzer Participant Logto Participant B as App-Backend-Dienst Participant Supabase U->>Logto: Melde dich bei Logto an Logto-->>U: `access_token` U->>B: Fordere Daten mit `access_token` an B->>B: Extrahiere `user_id` aus `access_token` B->>B: Generiere jwt durch `user_id` & `Supabase JWT secret` B->>Supabase: Fordere Daten mit jwt an Supabase-->>B: Antwortdaten B-->>U: Antwortdaten ``` 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](https://docs.logto.io/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](https://docs.logto.io/quick-starts/react/) gefolgt bist. (Du kannst den Code in unserem [React-Beispiel](https://github.com/logto-io/js/tree/master/packages/react-sample) einsehen). Zusätzlich hast du die Logto Access Token-Validierung deinem Backend-Server gemäß der Anleitung [Schütze deine API mit Node (Express)](https://docs.logto.io/docs/recipes/protect-your-api/node/) hinzugefügt. Als Nächstes verwendest du das von Logto erhaltene Access Token, um Benutzerdaten von deinem Backend-Server anzufordern: ```jsx import { useLogto } from '@logto/react'; import { useState, useEffect } from 'react'; import PostList from './PostList'; const endpoint = ''; const resource = ''; function PostPage() { const { isAuthenticated, getAccessToken } = useLogto(); const [posts, setPosts] = useState(); useEffect(() => { const fetchPosts = async () => { const response = await fetch(endpoint, { headers: { Authorization: `Bearer ${await getAccessToken(resource)}`, }, }); setPosts(response.json()); }; if (isAuthenticated) { void fetchPosts(); } }, [isAuthenticated, getAccessToken]); return ; } export default PostPage; ``` In deinem Backend-Server hast du bereits die ID des angemeldeten Benutzers aus dem Access Token extrahiert, indem du Middleware benutzt hast: ```jsx // auth-middleware.ts import { createRemoteJWKSet, jwtVerify } from 'jose'; //... export const verifyAuthFromRequest = async (ctx, next) => { // Extrahiere das Token const token = extractBearerTokenFromHeaders(ctx.request.headers); const { payload } = await jwtVerify( token, // Das rohe Bearer-Token, das aus dem Anfrage-Header extrahiert wurde createRemoteJWKSet(new URL('https:///oidc/jwks')), // Erstellen eines JWKS unter Verwendung der jwks_uri, die vom Logto-Server bereitgestellt wurde { // Erwarteter Aussteller des Tokens, sollte vom Logto-Server ausgestellt worden sein issuer: 'https:///oidc', // Erwartetes Publikum des Tokens, sollte das Ressourcenkennzeichen des aktuellen API-Hörers sein audience: '', } ); // wenn du RBAC verwenden assert(payload.scope.includes('some_scope')); // benutzerdefinierte Nutzlastlogik ctx.auth = { userId: payload.sub, }; return next(); }; ``` 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: ```jsx export const withSupabaseClient = async (ctx, next) => { ctx.supabase = getSupabaseClient(ctx.auth.userId); return next(); }; ``` Beim weiteren Verarbeitungsfluss kannst du direkt `ctx.supabase` abrufen, um mit Supabase zu interagieren: ```jsx const fetchPosts = async (ctx) => { cosnt { data } = await ctx.supabase.from('posts').select('*'); return data; } ``` 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](https://docs.logto.io/quick-starts/next-app-router/) gefolgt bist, kannst du das Logto SDK verwenden, um Benutzerinformationen abzurufen und das entsprechende JWT für die Interaktion mit Supabase zu erstellen. ```jsx import { getLogtoContext } from '@logto/next-server-actions'; import { logtoConfig } from '@/logto'; import { getSupabaseClient } from '@/utils'; import PostList from './PostList'; export const async function PostPage() { const { cliams } = await getLogtoContext(logtoConfig); // Der Wert `sub` in `cliams` ist die Benutzer-ID. const supabase = getSupabaseClient(cliams.sub); const { data: posts } = await supabase.from('posts').select('*'); return ; } ``` ### 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](https://docs.logto.io/quick-starts/m2m/) 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: Service-Rolle Geheimnis

Wenn du einen Supabase-Client erstellst, verwende das `service_role`-Geheimnis, dieser Client kann dann auf alle Daten in der Datenbank zugreifen: ```jsx import { createClient } from '@supabase/supabase-js'; // ... const SUPABASE_SERVICE_ROLE_SCRET = process.env.SUPABASE_SERVICE_ROLE_SCRET; const client = createClient(SUPABASE_URL, SUPABASE_SERVICE_ROLE_SCRET, { // ...optionen }); ``` ## 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.