## Intro Wanneer het om een nieuw project gaat, kun je meestal enkele dingen niet overslaan: API's, authenticatie + autorisatie, identiteit en de inlogstroom van eindgebruikers. Het was vroeger moeilijk om hiermee te beginnen omdat er veel concepten en technologieën zijn die wijd verspreid zijn: RESTful/GraphQL, webfrontend, native client, clients verbinden met API's, auth best practices om de balans tussen beveiliging en gebruikerservaring te vinden, enz. Ook is het meeste werk "herhalend". Ik bedoel, ze zijn nodig en vergelijkbaar voor bijna elk project, met enkele aanpassingen. Klinkt eng en vervelend? Geen paniek. Vandaag de dag hebben we open source. Met de twee onderstaande open-source projecten worden dingen niet moeilijk: - [Logto](https://github.com/logto-io/logto): Helpt je bij het bouwen van de inlog, auth en gebruikersidentiteit binnen enkele minuten. - [Hasura](https://github.com/hasura/graphql-engine): Razendsnelle, directe real-time GraphQL API's op je database met fijnmazige toegangscontrole. In dit artikel richten we ons op het verbinden van Logto en Hasura, waardoor je authenticatie, autorisatie en GraphQL API's zonder problemen kunt implementeren. Zo kun je snel aan je bedrijf beginnen zonder ingewikkeld leren. ## Aan de slag ### Vereisten Aangezien zowel [Logto](https://docs.logto.io/docs/tutorials/get-started/) als [Hasura](https://hasura.io/docs/latest/getting-started/index/) een fatsoenlijke aan de slag gids hebben, gaan we ervan uit dat je deze hebt gelezen en een basisidee hebt. Toegang tot een draaiende instantie van beide is nodig. We gaan ervan uit dat de toegankelijke eindpunten zijn: - Logto: `http://localhost:3001` - Hasura: `http://localhost:8080` Als je Docker/Docker Compose gebruikt, kun je voor toegang tot de `localhost` van je machine(host) de Docker magische string `host.docker.internal` gebruiken. In dit geval zal het Logto-eindpunt `http://host.docker.internal:3001` zijn. Ook gaan we ervan uit dat je een voorkeursplatform en framework hebt om de client-app te bouwen, zoals React of Next.js. ### Stel API in Logto in Klik in de linker navigatie zijbalk van je Logto Admin Console op “API Resources”, en je zult de API Resource-beheerpagina zien. Klik vervolgens op de grote knop “+ Create API Resource” in de rechterbovenhoek. Voer in het geopende venster `Hasura` in voor de API-naam en `https://hasura.api` voor de API-id. Create API modal

We zullen deze API-id gebruiken voor de rest van ons artikel. Maar voel je vrij om de waarden naar eigen voorkeur aan te passen. Klik op “Create API Resource”, en er zal een bericht verschijnen dat aangeeft dat de bron succesvol is aangemaakt. Dat is alles wat we nu nodig hebben in Logto. ### Maak rol voor Hasura aan Om gebruik te maken van Hasura's permissiebeheer, gaan we rollen maken in Logto, die zullen worden toegewezen aan de rollen van Hasura. Create Role

De rolnaam moet gelijk zijn aan de rolnaam in Hasura's "Permissions" pagina. Vergeet niet om de rol aan gebruikers toe te wijzen. ### Schakel webhookauthenticatie in Hasura in [Hasura gebruikt rolgebaseerd toegangsbeheer](https://hasura.io/docs/latest/auth/index/), dat autorisatie regelt. We hoeven dus alleen maar authenticatie uit te zoeken. Het ondersteunt twee methoden: Webhook en JWT. We kiezen voor [webhook](https://hasura.io/docs/latest/auth/authentication/webhook/) omdat het flexibeler is. Om webhookauthenticatie in te schakelen, moet je de admin secret en auth hook-eindpunt instellen. - De admin secret is de sleutel voor toegang tot Hasura admin bij het versturen van verzoeken. Het is vereist voordat je webhookauthenticatie kunt inschakelen. Vergeet niet om het ergens veilig te bewaren en gebruik het niet in productie. - Het auth hook-eindpunt is een URL om authenticatieverzoeken te versturen. Je kunt ze instellen via [omgevingsvariabelen](https://hasura.io/docs/latest/auth/authentication/webhook/#configuring-webhook-mode): ```yaml HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey # Vervang door je eigen geheim HASURA_GRAPHQL_AUTH_HOOK: http://localhost:3001/api/authn/hasura?resource=https://hasura.api ``` Je merkt misschien op dat we de API-id ingevuld in Logto gebruiken om het auth hook-eindpunt te bouwen. Het zorgt ervoor dat de gebruiker de juiste bewaarder token doorgeeft in plaats van een willekeurige die mogelijk kwaadaardig is. Je moet het auth hook-eindpunt bijwerken als je een ander Logto-eindpunt of API-indicator hebt. Stel dat je `https://logto.domain.com` hebt als het Logto-eindpunt en `https://graphql.domain.com` als de API-indicator, dan zal het zijn: ```yaml HASURA_GRAPHQL_AUTH_HOOK: https://logto.domain.com/api/authn/hasura?resource=https://graphql.domain.com ``` Vanaf nu, voor elk GraphQL-verzoek, zal Hasura alle verzoekheaders naar het Logto auth hook-eindpunt brengen en zal Logto correct reageren. ## Stuur beveiligde GraphQL aanvragen ### Samenvatting Aangezien we de Hasura admin secret niet in productie zullen gebruiken, is elk GraphQL-verzoek beveiligd door de volgende headers: - `Authorization` De standaard baret kenteken dat door Logto wordt gegenereerd. - `Expected-Role` De rol die je wilt dat Logto laat zien in de auth hook-reactie. Als de gebruiker die de `Authorization` header aangeeft niet de `Expected-Role` heeft, zal Logto reageren met `401 Unauthorized`. De `Authorization` header vereist een geldige toegangstoken in JWT-formaat met de Hasura API-indicator voor publiek. Wacht even - het is behoorlijk moeilijk om al deze dingen te onthouden en samen te stellen. Gelukkig hebben we Logto SDK's om het technische deel te vereenvoudigen. ### Integreer Logto SDK Volg de [integratiehandleiding](https://docs.logto.io/docs/recipes/integrate-logto/) om een Logto SDK in je client-app te integreren. Hiermee kan niet alleen een geldige toegangstoken voor GraphQL-verzoeken worden gegenereerd, maar ook een soepele inlogervaring voor je eindgebruikers worden geboden. Zodra je de handleiding hebt voltooid, hebben we één kleine wijziging nodig in de `LogtoConfig`: Voeg de API-indicator die je in Logto Admin Console hebt aangemaakt toe aan `resources`. Laten we het React SDK als voorbeeld nemen: ```tsx const config: LogtoConfig = { endpoint: 'http://localhost:3001', appId: '', resources: ['https://hasura.api'], // Voeg deze regel toe }; ``` ### Verstuur aanvragen Eindelijk! Nadat de gebruiker is ingelogd, gebruik `getAccessToken()` in Logto SDK om de toegangstoken voor Hasura GraphQL-verzoeken op te halen: ```tsx const accessToken = await logto.getAccessToken('https://hasura.api'); // Voordat je het verzoek verstuurt request.headers.set('Authorization', `Bearer ${accessToken}`); request.headers.set('Expected-Role', 'user'); ``` ## Herhaling Met de bovenstaande inspanning hebben we succesvol alle niet-te-ontkomen zaken uit de intro geïmplementeerd: - Een database-schema-gedreven GraphQL API-eindpunt - Een auth- en identiteitsservice bovenop OIDC-protocol - De complete eindgebruiker inlogstroom en auth-statusbeheer - Beveiligde API-toegang gebaseerd op gebruikersidentiteit en rollen Niet zo moeilijk, toch? Als je problemen tegenkomt, voel je vrij om deel te nemen aan de [Logto](https://discord.gg/vRvwuwgpVX) of [Hasura](https://discord.gg/hasura) discord server om live te chatten met het team.