Nederlands

oidc
supabase
auth
rls
jwt

Integreren met Supabase

Leer hoe je Logto met Supabase integreert om de authenticatie-ervaring voor je applicaties te verbeteren.

Yijun

Developer

5/16/2024

Stop met weken verspillen aan gebruikersauthenticatie

Lanceer veilige apps sneller met Logto. Integreer gebruikersauthenticatie in minuten en focus op je kernproduct.

Aan de slag

Logto is een moderne identiteitsauthenticatie-serviceprovider die veilige, uitgebreide en gebruiksvriendelijke login-ondersteuning voor applicaties biedt. Het biedt ook veel SDK's en integratiegidsen voor meerdere frameworks en programmeertalen, waarmee je binnen enkele minuten naadloos bedrijfswaardige identiteitsauthenticatiediensten in je applicatie kunt integreren.

Dit artikel richt zich voornamelijk op het detailleren van hoe je Supabase met Logto kunt integreren.

Supabase basisprincipes

Supabase maakt gebruik van Postgres's Row-Level Security om gegevenstoegangsrechten te beheren. Simpel gezegd, door Row Level Security-beleidsregels voor tabellen in de database te maken, kunnen we beperken en beheren wie gegevens in een tabel kan lezen, schrijven en bijwerken.

Laten we aannemen dat je een tabel genaamd "posts" in je database hebt, met de volgende inhoud:

Het user_id-veld in de tabel vertegenwoordigt de gebruiker waartoe elke post behoort. Je kunt elke gebruiker beperken tot alleen toegang tot hun eigen post-gegevens op basis van het user_id-veld.

Voordat dit echter kan worden geïmplementeerd, moet Supabase de huidige gebruiker kunnen identificeren die toegang krijgt tot de database.

Voeg gebruikersgegevens toe aan de Supabase-verzoeken

Dankzij de ondersteuning van Supabase voor JWT, kunnen we, wanneer onze applicatie met Supabase communiceert, een JWT genereren die gebruikersgegevens bevat met het door Supabase verstrekte JWT-geheim. We gebruiken deze JWT vervolgens als de Authentication-header bij het indienen van verzoeken. Na het ontvangen van het verzoek verifieert Supabase automatisch de geldigheid van de JWT en geeft toegang tot de gegevens die erin zijn opgenomen gedurende de daaropvolgende processen.

Ten eerste kunnen we het door Supabase verstrekte JWT-geheim verkrijgen via de "Project Settings" in het Supabase-dashboard:

Vervolgens gebruiken we, wanneer we het Supabase SDK gebruiken om verzoeken naar Supabase te sturen, dit geheim om onze JWT te genereren en het als de Authentication-header aan het verzoek toe te voegen. (Houd er rekening mee dat dit proces plaatsvindt binnen de backend-service van je applicatie en dat het JWT-geheim nooit aan derden mag worden blootgesteld).

Navigeer vervolgens naar de SQL Editor in het Supabase-dashboard en maak een functie om de userId op te halen die in het verzoek is opgenomen:

Maak functie voor het ophalen van gebruikers-ID

De in de afbeelding gebruikte code is als volgt:

Zoals de code laat zien, kun je in Supabase de payload van de JWT die we genereren ophalen door request.jwt.claims aan te roepen. Het userId-veld binnen de payload is de waarde die we hebben ingesteld.

Met deze functie kan Supabase bepalen welke gebruiker momenteel toegang heeft tot de database.

Maak Row-Level Security beleidsregel

Vervolgens kunnen we een Row-Level Security beleidsregel maken om elke gebruiker te beperken tot alleen toegang tot hun eigen post-gegevens op basis van het user_id-veld in de posts-tabel.

Ga naar de Table Editor-pagina in het Supabase-dashboard en selecteer de posts-tabel.
Klik bovenaan de tabel op "Add RLS Policy".
Klik in het weergegeven venster op "Create policy".
Voer een beleidsnaam in en kies de SELECT beleidsopdracht.
Voer in het using-blok van de onderstaande code in:

Door gebruik te maken van dergelijke beleidsregels, wordt gegevenscontrole binnen Supabase bereikt.

In toepassingen in de echte wereld zou je verschillende beleidsregels maken om gebruikersacties zoals het invoegen en wijzigen van gegevens te beperken. Dit valt echter buiten de reikwijdte van dit artikel. Voor meer informatie over Row-Level Security (RLS), verwijzen we naar Beveilig je data met Postgres Row Level Security.

Basisintegratieproces met Logto

Zoals eerder vermeld, omdat Supabase RLS gebruikt voor zijn toegangscontrole, ligt de sleutel tot integratie met Logto (of andere authenticatieservices) in het verkrijgen van de gebruikers-ID van de gemachtigde gebruiker en het verzenden naar Supabase. Het hele proces wordt geïllustreerd in het onderstaande diagram:

Vervolgens leggen we uit hoe je Logto met Supabase kunt integreren op basis van dit procesdiagram.

Logto-integratie

Logto biedt integratiegidsen voor verschillende frameworks en programmeertalen.

Over het algemeen vallen apps die met deze frameworks en talen zijn gebouwd in categorieën zoals native apps, SPA (single-page apps), traditionele webapps en M2M (machine-to-machine) apps. Je kunt de Logto quick starts pagina bezoeken om Logto in je applicatie te integreren op basis van de tech-stack die je gebruikt. Volg daarna de onderstaande instructies om Logto in je project te integreren op basis van het type toepassing.

Native app of SPA

Zowel native apps als SPA's draaien op je apparaat, en de inloggegevens (access token) die na het inloggen worden verkregen, worden lokaal op je apparaat opgeslagen.

Daarom moet je, wanneer je je app integreert met Supabase, communiceren met Supabase via je backend-service omdat je gevoelige informatie (zoals Supabase JWT secret) niet op elk apparaat van de gebruiker kunt blootstellen.

Laten we aannemen dat je je SPA bouwt met React en Express. Je hebt Logto met succes geïntegreerd in je applicatie door de Logto React SDK Guide te volgen (je kunt refereren aan de code in ons react sample). Daarnaast heb je Logto-toegangstokenvalidatie toegevoegd aan je backend-server volgens de Bescherm je API op Node (Express) documentatie.

Vervolgens gebruik je het toegangstoken dat je van Logto hebt verkregen om gebruikersgegevens op te vragen bij je backend-server:

Op je backend-server heb je al de id van de ingelogde gebruiker uit het toegangstoken gehaald met behulp van middleware:

Nu kun je de getSupabaseClient gebruiken, zoals hierboven beschreven, om de userId bij de JWT te voegen die in volgende verzoeken aan Supabase wordt gebruikt. Je kunt ook een middleware maken om een Supabase-client te maken voor verzoeken die met Supabase moeten communiceren:

In de daaropvolgende verwerkingsstroom kun je ctx.supabase rechtstreeks aanroepen om met Supabase te communiceren:

In deze code geeft Supabase alleen de post-gegevens terug die behoren tot de huidige gebruiker op basis van de eerder ingestelde beleidsregels.

Traditionele webapp

Het belangrijkste verschil tussen een traditionele webapp en een native app of SPA is dat een traditionele webapp pagina's uitsluitend op de webserver weergeeft en bijwerkt. Daarom worden gebruikersgegevens direct door de webserver beheerd, terwijl ze in native apps en SPA's zich op het apparaat van de gebruiker bevinden.

Bij het integreren van Logto met een traditionele webapp in Supabase kun je direct de id van de ingelogde gebruiker van de backend ophalen.

Neem een Next.js-project als voorbeeld, nadat je Logto met je project hebt geïntegreerd volgens de Next.js SDK Guide, kun je de Logto SDK gebruiken om gebruikersinformatie op te halen en de overeenkomstige JWT te construeren voor interactie met Supabase.

Machine-to-machine app

Machine-to-machine (M2M) wordt vaak gebruikt wanneer je app direct moet communiceren met recourceservers, zoals een statische service die dagelijkse posts ophaalt, enz.

Je kunt de Machine-to-machine: Auth with Logto gids gebruiken voor authenticatie van machine-to-machine apps. De integratie tussen Supabase en machine-to-machine-apps lijkt op die van native apps en SPA's (zoals beschreven in de "Native app of single-page app"-sectie). Het omvat het verkrijgen van een toegangstoken van Logto en het valideren ervan via een beveiligde backend-API.

Het is echter belangrijk op te merken dat native apps en SPA's doorgaans zijn ontworpen voor eindgebruikers, dus de verkregen user-id vertegenwoordigt de gebruiker zelf. Het toegangstoken voor machine-to-machine apps vertegenwoordigt echter de applicatie zelf, en het sub-veld in de toegangstoken payload is de client-id van de M2M-app, niet een specifieke gebruiker. Daarom is het tijdens de ontwikkeling cruciaal om onderscheid te maken welke gegevens bestemd zijn voor M2M-apps.

Verder, als je wilt dat een specifieke M2M-app toegang heeft tot Supabase namens de hele service om RLS-beperkingen te omzeilen, kun je de service_role geheim van Supabase gebruiken om een Supabase-client te maken. Dit is handig wanneer je enkele administratieve of geautomatiseerde taken wilt uitvoeren die toegang vereisen tot alle gegevens zonder beperkt te worden door de Row-Level Security beleidsregels die zijn ingesteld voor individuele gebruikers.

Het service_role geheim kan worden gevonden op dezelfde pagina als het JWT-geheim:

Bij het maken van een Supabase-client gebruik je het service_role geheim, dan kan deze client toegang krijgen tot alle gegevens in de database:

Samenvatting

In dit artikel gaan we dieper in op het integreren van Logto met Supabase, waarbij we belangrijke inzichten en kritieke integratieaspecten belichten. We verkennen concepten zoals JWT-authenticatie en Row-Level Security beleidsregels, en leiden je door het proces van het naadloos opnemen van Logto in je Supabase-aangedreven applicaties. Met deze kennis hopen we dat je vol vertrouwen de beveiliging en functionaliteit van je applicatie kunt verbeteren, en zelfs je projecten kunt uitbreiden met extra functies.

Probeer Logto Cloud gratis

Supabase basisprincipes#

Voeg gebruikersgegevens toe aan de Supabase-verzoeken#

Maak Row-Level Security beleidsregel#

Basisintegratieproces met Logto#

Logto-integratie#

Native app of SPA#

Traditionele webapp#

Machine-to-machine app#

Samenvatting#

Supabase basisprincipes#

Voeg gebruikersgegevens toe aan de Supabase-verzoeken#

Maak Row-Level Security beleidsregel#

Basisintegratieproces met Logto#

Logto-integratie#

Native app of SPA#

Traditionele webapp#

Machine-to-machine app#

Samenvatting#

Supabase basisprincipes

Voeg gebruikersgegevens toe aan de Supabase-verzoeken

Maak Row-Level Security beleidsregel

Basisintegratieproces met Logto

Logto-integratie

Native app of SPA

Traditionele webapp

Machine-to-machine app

Samenvatting

Supabase basisprincipes

Voeg gebruikersgegevens toe aan de Supabase-verzoeken

Maak Row-Level Security beleidsregel

Basisintegratieproces met Logto

Logto-integratie

Native app of SPA

Traditionele webapp

Machine-to-machine app

Samenvatting