## 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](https://github.com/logto-io/logto): Hjälper dig att bygga inloggning, behörighet och användaridentitet inom några minuter. - [Hasura](https://github.com/hasura/graphql-engine): 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](https://docs.logto.io/docs/tutorials/get-started/) och [Hasura](https://hasura.io/docs/latest/getting-started/index/) 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` Om du använder Docker/Docker Compose, för åtkomst till din maskin(värd)s `localhost`, kan du använda Docker magiska sträng `host.docker.internal`. I detta fall blir Logto-slutpunkten `http://host.docker.internal:3001`. 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. Create API modal

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. Create Role

Rollnamnet måste vara samma som rollnamnet på Hasuras "Permissions"-sida. Kom ihåg att tilldela rollen till användare. ### Aktivera webhook-autentisering i Hasura [Hasura använder rollbaserad åtkomsthantering](https://hasura.io/docs/latest/auth/index/), som hanterar auktorisering. Så, vi behöver bara lista ut autentisering. Den stödjer två metoder: Webhook och JWT. Vi väljer [webhook](https://hasura.io/docs/latest/auth/authentication/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](https://hasura.io/docs/latest/auth/authentication/webhook/#configuring-webhook-mode): ```yaml HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey # Byt ut mot din egna hemlighet HASURA_GRAPHQL_AUTH_HOOK: http://localhost:3001/api/authn/hasura?resource=https://hasura.api ``` 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: ```yaml HASURA_GRAPHQL_AUTH_HOOK: https://logto.domain.com/api/authn/hasura?resource=https://graphql.domain.com ``` 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. Om användaren som `Authorization`-rubriken indikerar inte har `Expected-Role`, kommer Logto svara med `401 Unauthorized`. `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](https://docs.logto.io/docs/recipes/integrate-logto/) 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: ```tsx const config: LogtoConfig = { endpoint: 'http://localhost:3001', appId: '', resources: ['https://hasura.api'], // Lägg till denna rad }; ``` ### 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: ```tsx const accessToken = await logto.getAccessToken('https://hasura.api'); // Innan du skickar förfrågan request.headers.set('Authorization', `Bearer ${accessToken}`); request.headers.set('Expected-Role', 'user'); ``` ## 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](https://discord.gg/vRvwuwgpVX) eller [Hasura](https://discord.gg/hasura) Discord-servern för att ha en livechatt med teamet.