Logto x Hasura: Hur man använder öppen källkodsautentisering + GraphQL-lösning för att öka ditt projekt
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.
GaoFounder
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.
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.
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.
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.
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 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.
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.
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:
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.
