Logto x Hasura: Hur man använder öppen källkodsautentisering + GraphQL-lösning för att öka ditt projekt

Introduktion#

När det gäller ett nytt projekt kan du vanligtvis inte hoppa över flera saker: API:er, autentisering + auktorisering, identitet och användarinloggningsflöde. Det brukade vara svårt att sätta igång med dessa saker eftersom det finns många koncept och teknologier som sprids brett: RESTful/GraphQL, webbfrontend, inbyggd klient, ansluta klienter med API:er, bästa praxis för autentisering för att balansera säkerhet och användarupplevelse, etc.

Dessutom är de flesta av arbetena "upprepande". Jag menar, de behövs och är liknande för nästan alla projekt, med några modifieringar.

Låter det skrämmande och tråkigt? Ingen panik. Idag har vi öppen källkod. Med de två projekten med öppen källkod nedan, blir saker inte svåra:

• Logto: Hjälper dig att bygga inloggning, behörighet och användaridentitet inom några minuter.
• Hasura: Blixtsnabba, direkt realtids-GraphQL-API:er på din databas med finkornig åtkomstkontroll.

I den här artikeln fokuserar vi på att ansluta Logto och Hasura, vilket gör det möjligt för dig att implementera autentisering, auktorisering och GraphQL-API:er utan friktion. På så sätt kan du snabbt sätta igång med din verksamhet utan att behöva raketkunskap.

Kom igång#

Förutsättningar#

Eftersom både Logto och Hasura har en bra kom igång-guide, antar vi att du har läst dem och har en grundläggande förståelse. Tillgång till en körande instans av båda behövs.

Vi antar att de tillgängliga slutpunkterna är:

• Logto: http://localhost:3001
• Hasura: http://localhost:8080

Vi antar också att du har en föredragen plattform och ramverk att bygga klientappen på, till exempel React eller Next.js.

Ställ in API i Logto#

I den vänstra navigationspanelen i din Logto Admin-konsol, klicka på “API Resources”, så ser du sidan för hantering av API-resurser.

Klicka sedan på den stora knappen “+ Create API Resource” i det övre högra hörnet. I den öppnade modalen, ange Hasura för API-namn och https://hasura.api för API-identifierare.

Vi kommer att använda denna API-identifierare för resten av vår artikel. Men känn dig fri att ändra värdena baserat på dina preferenser.

Klicka på “Create API Resource”, och det kommer att visa ett meddelande som anger att resursen har skapats framgångsrikt. Det är allt vi behöver i Logto för tillfället.

Skapa roll för Hasura#

För att dra nytta av Hasuras tillståndshantering, kommer vi att skapa roller i Logto, dessa roller kommer att mappas till Hasuras roller.

Kom ihåg att tilldela rollen till användare.

Aktivera webhook-autentisering i Hasura#

Hasura använder rollbaserad åtkomsthantering, som hanterar auktorisering. Så, vi behöver bara lista ut autentisering. Den stödjer två metoder: Webhook och JWT. Vi väljer webhook eftersom det är mer flexibelt.

För att aktivera webhook-autentisering måste du ställa in admin-hemlighet och auth hook-slutpunkt.

• Admin-hemligheten är nyckeln till att ha Hasura-adminåtkomst när man skickar förfrågningar. Den är nödvändig innan aktivering av webhook-autentisering. Kom ihåg att hålla den någonstans säker, och använd inte den i produktion.
• Auth hook-slutpunkt är en URL för att skicka autentiseringsförfrågningar.

Du kan ställa in dem via miljövariabler:

Du kanske märker att vi använder API-identifieraren fylld i Logto för att bygga auth hook-slutpunkten. Det säkerställer att användaren skickar den korrekta bearer-token istället för en slumpmässig som kan komma från en illvillig.

Du behöver uppdatera auth hook-slutpunkten om du har en annan Logto-slutpunkt eller API-indikator. Säg att du har https://logto.domain.com som Logto-slutpunkt och https://graphql.domain.com som API-identifierare, då blir det:

Från och med nu, för varje GraphQL-förfrågan, kommer Hasura att ta med alla begär-rubriker till Logto-auth-hook slutpunkten, och Logto svarar korrekt.

Skicka säkra GraphQL-förfrågningar#

Sammanfattning#

Eftersom vi inte kommer att använda Hasura-adminhemligheten i produktion, är varje GraphQL-förfrågan säkrad av följande rubriker:

• Authorization Den vanliga bearer-token som Logto genererar.
• Expected-Role Rollen du vill att Logto visar i auth hook-svaret.

Authorization-rubriken kräver en giltig Access Token i JWT-format med Hasura-API-indikator för audience. Håll i dig - det är ganska svårt att komma ihåg och sätta ihop alla dessa saker. Som tur är har vi Logto SDK:er för att förenkla den tekniska delen.

Integrera Logto SDK#

Följ integrationsguiden för att integrera en Logto SDK i din klientapp. Det möjliggör inte bara förmågan att generera en giltig Access Token för GraphQL-förfrågningar, utan också en smidig inloggningsupplevelse för dina slutanvändare.

När du är klar med guiden, behöver vi en liten ändring i LogtoConfig: Lägg till API-indikatorn du skapade i Logto Admin-konsolen till resources. Ta React SDK som ett exempel:

Skicka förfrågningar#

Äntligen! Efter att användaren har loggat in, använd getAccessToken() i Logto SDK för att hämta Access Token för Hasura GraphQL-förfrågningar:

Sammanfattning#

Med ovanstående ansträngningar har vi framgångsrikt implementerat alla de icke-skippbara sakerna i introduktionen:

• En databas-schemadriven GraphQL API-slutpunkt
• En autentiserings- och identitetstjänst ovanpå OIDC-protokollet
• Det fullständiga användarinloggningsflödet och hantering av autentiseringsstatus
• Säkert API-åtkomst baserat på användaridentitet och roller

Inte så svårt, eller hur? Om du stöter på några problem, tveka inte att gå med i Logto eller Hasura Discord-servern för att ha en livechatt med teamet.