Svenska

oidc
supabase
auth
rls
jwt

Integrera med Supabase

Lär dig hur du integrerar Logto med Supabase för att förbättra autentiseringsupplevelsen för dina applikationer.

Yijun

Developer

5/16/2024

Sluta slösa veckor på användarautentisering

Lansera säkra appar snabbare med Logto. Integrera användarautentisering på några minuter och fokusera på din kärnprodukt.

Kom igång

Logto ä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 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:

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:

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).

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:

Koden som används i bilden är som följer:

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.

Navigera till sidan Table Editor på Supabase instrumentpanel och välj poststabellen.
Klicka på "Add RLS Policy" högst upp i tabellen.
I det framkallade fönstret, klicka på "Create policy".
Ange ett policynamn och välj SELECT Policyn kommandot.
I using-blocket nedan, ange:

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.

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:

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 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 (du kan hänvisa till koden i vårt react sample). Dessutom har du lagt till Logto-access token-validering till din backend-server enligt Protect your API on Node (Express) 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:

På din backend-server har du redan extraherat den inloggade användarens ID från åtkomsttokenet med hjälp av en middleware:

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:

I den efterföljande bearbetningsflödet kan du direkt anropa ctx.supabase för att interagera med Supabase:

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, kan du använda Logto SDK för att hämta användarinformation och konstruera motsvarande JWT för interaktion med Supabase.

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

När du skapar en Supabase-klient, använd service_role-hemligheten, då kan denna klient komma åt all data i databasen:

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.

Prova Logto Cloud gratis

Grunderna i Supabase#

Lägg till användardata till Supabase-förfrågningar#

Skapa säkerhetspolicy på radnivå#

Grundläggande integrationsprocess med Logto#

Logto integration#

Native-app eller SPA#

Traditionell webbapp#

Maskin-till-maskin-app#

Sammanfattning#

Grunderna i Supabase#

Lägg till användardata till Supabase-förfrågningar#

Skapa säkerhetspolicy på radnivå#

Grundläggande integrationsprocess med Logto#

Logto integration#

Native-app eller SPA#

Traditionell webbapp#

Maskin-till-maskin-app#

Sammanfattning#

Grunderna i Supabase

Lägg till användardata till Supabase-förfrågningar

Skapa säkerhetspolicy på radnivå

Grundläggande integrationsprocess med Logto

Logto integration

Native-app eller SPA

Traditionell webbapp

Maskin-till-maskin-app

Sammanfattning

Grunderna i Supabase

Lägg till användardata till Supabase-förfrågningar

Skapa säkerhetspolicy på radnivå

Grundläggande integrationsprocess med Logto

Logto integration

Native-app eller SPA

Traditionell webbapp

Maskin-till-maskin-app

Sammanfattning