[Logto](https://logto.io/) är en modern identitetsautentiseringstjänstleverantör som erbjuder säker, omfattande och användarvänligt inloggningsstöd för applikationer. Den tillhandahåller också massor av SDK:er och integrationsguider för flera ramverk och programmeringsspråk, vilket gör det möjligt för dig att sömlöst integrera autentiseringstjänster i företagsklass i din applikation inom några minuter. Denna artikel fokuserar främst på att beskriva hur man integrerar Supabase med Logto. ## Grunderna i Supabase Supabase använder [Postgres's Row-Level Security](https://www.postgresql.org/docs/current/ddl-rowsecurity.html) för att kontrollera dataåtkomstbehörigheter. I enkla termer, genom att skapa säkerhetspolicyer på radnivå för tabeller i databasen, kan vi begränsa och hantera vem som kan läsa, skriva och uppdatera data i en tabell. Låt oss anta att du har en tabell som heter "posts" i din databas, med följande innehåll: Posts table

Fältet `user_id` i tabellen representerar användaren som varje inläggsdatas tillhör. Du kan begränsa varje användare till att bara komma åt sina egna inläggsdata baserat på fältet `user_id`. Men innan detta kan implementeras måste Supabase kunna identifiera den nuvarande användaren som kommer åt databasen. ### Lägg till användardata till Supabase-förfrågningar Tack vare Supabases stöd för JWT, när vår applikation interagerar med Supabase, kan vi generera en JWT som innehåller användardata med hjälp av den JWT-hemlighet som tillhandahålls av Supabase. Vi använder sedan denna JWT som autentiseringshuvud när vi gör förfrågningar. När Supabase tar emot förfrågan verifierar den automatiskt giltigheten av JWT och tillåter åtkomst till data som ingår i den under efterföljande processer. Först kan vi få JWT-hemligheten som tillhandahålls av Supabase från "Project Settings" på Supabase instrumentpanel: Supabase API settings page

Sedan, när vi använder Supabase SDK för att göra förfrågningar till Supabase, använder vi denna hemlighet för att generera vår JWT och bifogar den som autentiseringshuvud till förfrågan. (Observera att denna process sker inom din applikations backend-tjänst, och JWT-hemligheten bör aldrig exponeras för tredje part). ```jsx import { createClient } from '@supabase/supabase-js'; import { sign } from 'jsonwebtoken'; // * Obs: * Du kan hitta SUPABASE_URL, SUPABASE_ANON_KEY på samma plats där du hittar JWT-hemligheten. */ 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', // Bara för demonstration }); const client = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, { global: { headers: { Authorization: `Bearer ${jwt}`, }, }, }); return client; }; ``` Gå sedan till SQL-redigeraren på Supabase-instrumentpanelen och skapa en funktion för att hämta userId som bärs i förfrågan: Create get user ID function

Koden som används i bilden är som följer: ```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; ``` Som koden visar, i Supabase, kan du hämta payloaden av den JWT vi genererar genom att kalla `request.jwt.claims`. Fältet `userId` i payloaden är det värde vi har ställt in. Med denna funktion kan Supabase bestämma användaren som för närvarande kommer åt databasen. ### Skapa säkerhetspolicy på radnivå Nästa steg är att skapa en säkerhetspolicy på radnivå för att begränsa varje användare till att bara komma åt sina egna inläggsdata baserat på fältet `user_id` i poststabellen. 1. Navigera till sidan Table Editor på Supabase instrumentpanel och välj poststabellen. 2. Klicka på "Add RLS Policy" högst upp i tabellen. 3. I det framkallade fönstret, klicka på "Create policy". 4. Ange ett policynamn och välj SELECT Policyn kommandot. 5. I `using`-blocket nedan, ange: ```sql auth.user_id() = user_id ``` Create RLS policy

Genom att utnyttja sådana policyer uppnås dataåtkomstkontroll inom Supabase. I verkliga applikationer skulle du skapa olika policyer för att begränsa användaråtgärder som datainförsel och modifiering. Emellertid ligger detta utanför räckvidden av denna artikel. För mer information om säkerhet på radnivå (RLS), vänligen se [Secure your data using Postgres Row Level Security](https://supabase.com/docs/guides/database/postgres/row-level-security). ### Grundläggande integrationsprocess med Logto Som nämnts tidigare, eftersom Supabase använder RLS för sin åtkomstkontroll, ligger nyckeln till att integrera med Logto (eller någon annan autentiseringstjänst) i att erhålla användarens id på den auktoriserade användaren och skicka den till Supabase. Hela processen illustreras i diagrammet nedan: ```mermaid sequenceDiagram Participant U as Slutanvändare Participant Logto Participant B as App-backendtjänst Participant Supabase U->>Logto: Logga in med Logto Logto-->>U: `access_token` U->>B: Begär data med `access_token` B->>B: Hämtar `user_id` från `access_token` B->>B: Genererar jwt av `user_id` & `Supabase JWT secret` B->>Supabase: Begär data med jwt Supabase-->>B: Svarade data B-->>U: Svarade data ``` Nästa steg är att förklara hur man integrerar Logto med Supabase baserat på detta processdiagram. ## Logto integration Logto erbjuder integrationsguider för olika ramverk och programmeringsspråk. Generellt sett faller appar byggda med dessa ramverk och språk under kategorier som Native-appar, SPA (single-page appar), traditionella webbappar och M2M (maskin-till-maskin) appar. Du kan besöka [Logto quick starts](https://docs.logto.io/quick-starts/) sidan för att integrera Logto i din applikation baserat på din tekniska stack. Efteråt, följ instruktionerna nedan för att integrera Logto i ditt projekt baserat på typen av din applikation. ### Native-app eller SPA Både native-appar och SPA:er körs på din enhet, och autentiseringsinformationen (åtkomsttoken) som erhålls efter inloggning lagras lokalt på din enhet. Därför, när du integrerar din app med Supabase, behöver du interagera med Supabase genom din backendtjänst eftersom du inte kan exponera känslig information (som Supabase JWT-hemlighet) på varje användares enhet. Anta att du bygger din SPA med hjälp av React och Express. Du har framgångsrikt integrerat Logto i din applikation genom att följa [Logto React SDK Guide](https://docs.logto.io/quick-starts/react/) (du kan hänvisa till koden i vårt [react sample](https://github.com/logto-io/js/tree/master/packages/react-sample)). Dessutom har du lagt till Logto-access token-validering till din backend-server enligt [Protect your API on Node (Express)](https://docs.logto.io/docs/recipes/protect-your-api/node/) dokumentationen. Nästa steg är att använda den åtkomsttoken som erhållits från Logto för att begära användardata från din backend-server: ```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; ``` På din backend-server har du redan extraherat den inloggade användarens ID från åtkomsttokenet med hjälp av en middleware: ```jsx // auth-middleware.ts import { createRemoteJWKSet, jwtVerify } from 'jose'; //... export const verifyAuthFromRequest = async (ctx, next) => { // Extrahera tokenen const token = extractBearerTokenFromHeaders(ctx.request.headers); const { payload } = await jwtVerify( token, // Den rå Bearer Token som extraherats från förfrågningshuvudet createRemoteJWKSet(new URL('https:///oidc/jwks')), // generera en jwks med jwks_uri från Logto server { // förväntad utgivare av tokenen, bör utfärdas av Logto-servern issuer: 'https:///oidc', // förväntad publiktoken, bör vara resursindikatorn för den aktuella API:n audience: '', } ); // om du använder RBAC assert(payload.scope.includes('some_scope')); // anpassad payloadlogik ctx.auth = { userId: payload.sub, }; return next(); }; ``` Nu kan du använda `getSupabaseClient` som beskrivits ovan för att bifoga `userId` till JWT som används i efterföljande förfrågningar till Supabase. Alternativt kan du skapa en middleware för att skapa en Supabase klient för förfrågningar som behöver interagera med Supabase: ```jsx export const withSupabaseClient = async (ctx, next) => { ctx.supabase = getSupabaseClient(ctx.auth.userId); return next(); }; ``` I den efterföljande bearbetningsflödet kan du direkt anropa `ctx.supabase` för att interagera med Supabase: ```jsx const fetchPosts = async (ctx) => { const { data } = await ctx.supabase.from('posts').select('*'); return data; } ``` I denna kod kommer Supabase endast att returnera post data som tillhör den nuvarande användaren baserat på de tidigare angivna policyerna. ### Traditionell webbapp Den huvudsakliga skillnaden mellan en traditionell webbapp och en Native-app eller SPA är att en traditionell webbapp renderar och uppdaterar sidor enbart på webbservern. Därför hanteras användarinformationen direkt av webbservern, medan de i Native-appar och SPA:er ligger på användarens enhet. När du integrerar Logto med en traditionell webbapp i Supabase, kan du direkt hämta den inloggade användarens id från backend. Ta ett Next.js-projekt som exempel, efter att du integrerar Logto med ditt projekt enligt [Next.js SDK Guide](https://docs.logto.io/quick-starts/next-app-router/), kan du använda Logto SDK för att hämta användarinformation och konstruera motsvarande JWT för interaktion med Supabase. ```jsx import { getLogtoContext } from '@logto/next-server-actions'; import { logtoConfig } from '@/logto'; import { getSupabaseClient } from '@/utils'; import PostList from './PostList'; export default async function PostPage() { const { claims } = await getLogtoContext(logtoConfig); // `sub`-värde i `claims` är användar-ID. const supabase = getSupabaseClient(claims.sub); const { data: posts } = await supabase.from('posts').select('*'); return ; } ``` ### Maskin-till-maskin-app Maskin-till-maskin (M2M) används ofta när din app behöver kommunicera direkt med resurservers, till exempel en statisk tjänst som drar dagliga inlägg, etc. Du kan använda [Machine-to-machine: Auth with Logto](https://docs.logto.io/quick-starts/m2m/) guiden för maskin-till-maskinautentisering. Integrationen mellan Supabase och maskin-till-maskin-appar liknar den för Native-appar och SPA:er (som beskrivs i avsnittet "Native app eller single-page app"). Det innebär att erhålla en access token från Logto och sedan validera den genom en skyddad backend API. Det är dock viktigt att notera att Native-appar och SPA:er normalt är utformade för slutanvändare, så användar-ID:t som erhålls representerar användaren själv. Men access token för M2M-appar representerar själva applikationen, och `sub`-fältet i åtkomsttokenets payload är klient-ID:t för M2M-appen, inte en specifik användare. Därför är det avgörande att under utvecklingen särskilja vilken data som är avsedd för M2M-appar. Vidare, om du vill att en specifik M2M-app ska komma åt Supabase för hela tjänst eräkningen för att kringgå RLS-begränsningar, kan du använda Supabases `service_role`-hemlighet för att skapa en Supabase-klient. Det är användbart när du vill göra vissa administrativa eller automatiserade uppgifter som kräver åtkomst till all data utan att begränsas av de säkerhetspolicyer på radnivå som är inställda för enskilda användare. `service_role`-hemligheten kan hittas på samma sida som JWT-hemligheten: Service role secret

När du skapar en Supabase-klient, använd `service_role`-hemligheten, då kan denna klient komma åt all data i databasen: ```jsx import { createClient } from '@supabase/supabase-js'; // ... const SUPABASE_SERVICE_ROLE_SECRET = process.env.SUPABASE_SERVICE_ROLE_SECRET; const client = createClient(SUPABASE_URL, SUPABASE_SERVICE_ROLE_SECRET, { // ...alternativ }); ``` ## Sammanfattning I denna artikel fördjupar vi oss i att integrera Logto med Supabase, belyser viktiga insikter och kritiska integrationsaspekter. Vi utforskar koncept som JWT-autentisering och säkerhetspolicyer på radnivå, guidade dig genom processen att sömlöst införliva Logto i dina Supabase-drivna applikationer. Med denna kunskap hoppas vi att du kan förbättra din applikations säkerhet, funktionalitet och till och med utöka dina projekt med ytterligare funktioner.