## Introductie Wanneer je een webapplicatie ontwikkelt, is het cruciaal om je API-eindpunten te beschermen tegen ongeautoriseerde toegang. Stel je voor dat je een online winkelwebsite bouwt; je wilt zeker niet dat cyberdieven je API exploiteren. Stel dat je al een Express.js-applicatie hebt gebouwd met gebruikersauthenticatie, waarbij gebruikers moeten inloggen voordat ze bepaalde acties kunnen ondernemen. Zo niet, dan kun je je avontuur starten met [Logto](https://logto.io/). Het vereist slechts een paar regels code om een gebruikersauthenticatiestroom op te zetten. Echter, zelfs na gebruikersauthenticatie, sta je voor verschillende keuzes om je API-eindpunten te beschermen. Helaas hebben de meeste van deze opties hun nadelen: - **Sessie-gebaseerde authenticatie**: Het koppelen van je API aan een sessiestore, wat niet schaalbaar is en niet goed past bij microservices. - **Aanroepen van een authenticatieservice**: Dit introduceert een extra netwerkoproep, wat latentie en kosten verhoogt. Sommige authenticatieservices rekenen zelfs kosten op basis van API-oproepvolume, wat kan leiden tot flinke uitgaven. In deze handleiding demonstreren we hoe je je API-eindpunten kunt versterken met behulp van JSON Web Tokens (JWT) en Logto. Deze aanpak biedt schaalbaarheid en minimale extra kosten. ## Vereisten Voordat we beginnen, zorg ervoor dat je het volgende hebt: - Een Logto-account. Als je er geen hebt, kun je [gratis aanmelden](https://cloud.logto.io/). - Een Express.js-project dat API-bescherming nodig heeft en een client-applicatie die de API gebruikt. - Basiskennis van [JSON Web Token (JWT)](https://datatracker.ietf.org/doc/html/rfc7519). We begrijpen dat de RFC lang kan zijn. Kort gezegd is een JWT een base64-gecodeerde string bestaande uit drie delen: header, payload en signature. De payload slaat de informatie op die je wilt, terwijl de signature de tokenintegriteit garandeert. ## Definieer je API-resource in Logto Logto maakt volledig gebruik van [RFC 8707: Resource Indicators for OAuth 2.0](https://datatracker.ietf.org/doc/html/rfc8707) om je API-eindpunten te beveiligen. Dit betekent dat je je API-resources kunt definiëren met hun daadwerkelijke URL's. Navigeer naar het tabblad "API-resources" in de Logto Console en klik op "Create API resource" om een nieuwe te maken. Als je bijvoorbeeld het `/api/products`-eindpunt wilt beschermen, kun je de URL `https://yourdomain.com/api/products` als de identifier gebruiken. ![Create API resource](https://uploads.strapi.logto.io/1/create_api_resource_13a2c8e660.png) ## Verkrijg een toegangstoken in je client-applicatie Om verder te gaan, moet je de Logto SDK in je client-applicatie integreren. Deze applicatie kan verschillen van je Express.js backend; bijvoorbeeld, je hebt mogelijk een React-app die Express.js als de backend API-server gebruikt. Je moet ook de Logto SDK-configuratie aanpassen om Logto te informeren dat je een toegangstoken voor je API in deze grant wilt aanvragen. Hier is een voorbeeld met React: ```tsx import { LogtoProvider } from '@logto/react'; const App = () => { return ( ); }; ``` Zodra een gebruiker zich aanmeldt bij Logto, wordt `isAuthenticated` binnen de Logto SDK `true`: ```tsx import { useLogto } from '@logto/react'; const Content = () => { const { isAuthenticated } = useLogto(); console.log(isAuthenticated); // true }; ``` Nu kun je de methode `getAccessToken` gebruiken om een toegangstoken voor je API te verkrijgen: ```tsx const Content = () => { const { getAccessToken, isAuthenticated } = useLogto(); useEffect(() => { if (isAuthenticated) { const accessToken = await getAccessToken('https://yourdomain.com/api/products'); console.log(accessToken); // eyJhbG... } }, [isAuthenticated, getAccessToken]); }; ``` Voeg ten slotte dit toegangstoken toe in de `Authorization`-header bij het maken van verzoeken aan je API: ```tsx const Content = () => { const { getAccessToken, isAuthenticated } = useLogto(); useEffect(() => { if (isAuthenticated) { const accessToken = await getAccessToken('https://yourdomain.com/api/products'); const response = await fetch('https://yourdomain.com/api/products', { headers: { Authorization: `Bearer ${accessToken}`, }, }); } }, [isAuthenticated, getAccessToken]); }; ``` ## Verifieer het toegangstoken in je API In je Express.js applicatie installeer je de `jose`-bibliotheek voor JWT-verificatie: ```bash npm install jose ``` Aangezien we Bearer-authenticatie gebruiken, haal je het toegangstoken uit de `Authorization`-header: ```ts import { IncomingHttpHeaders } from 'http'; const extractBearerTokenFromHeaders = ({ authorization }: IncomingHttpHeaders) => { if (!authorization) { throw new Error('Authorization header is missing'); } if (!authorization.startsWith('Bearer')) { throw an Error('Authorization header is not in the Bearer scheme'); } return authorization.slice(7); // De lengte van 'Bearer ' is 7 }; ``` Vervolgens maak je een middleware om het toegangstoken te verifiëren: ```ts import { createRemoteJWKSet, jwtVerify } from 'jose'; // Genereer een JWKS met behulp van jwks_uri verkregen van de Logto-server // Vervang `` met je Logto-eindpunt, bijvoorbeeld `abc123.logto.app` const jwks = createRemoteJWKSet(new URL('https:///oidc/jwks')); export const authMiddleware = async (req, res, next) => { // Extraheer de token met behulp van de hulpfunctie die hierboven is gedefinieerd const token = extractBearerTokenFromHeaders(req.headers); const { payload } = await jwtVerify( // De ruwe Bearer-token die uit de request-header is geëxtraheerd token, jwks, { // Verwachte uitgever van de token, uitgegeven door de Logto-server issuer: 'https:///oidc', // Verwachte publiekstoken, de resource-indicator van de huidige API audience: 'https://yourdomain.com/api/products', } ); // Sub is de gebruikers-ID, gebruikt voor gebruikersidentificatie const { scope, sub } = payload; // Voor role-based toegangscontrole, bespreken we later assert(scope.split(' ').includes('read:products')); return next(); }; ``` Je kunt nu deze middleware gebruiken om je API-eindpunten te beschermen: ```ts app.get('/api/products', authMiddleware, (req, res) => { // ... }); ``` Met deze aanpak hoef je niet elke keer dat er een verzoek binnenkomt contact op te nemen met de Logto-server. In plaats daarvan haal je de JSON Web Key Set (JWKS) eenmalig van de Logto-server op en verifieer je vervolgens lokaal toegangstokens. ## Role-based toegangscontrole Tot nu toe hebben we alleen geverifieerd dat een gebruiker is ingelogd met Logto. We weten nog steeds niet of de gebruiker over de juiste toestemming beschikt om toegang te krijgen tot het API-eindpunt. Dit komt omdat Logto iedereen toestaat om een toegangstoken voor een bestaande API-resource te verkrijgen. Om dit aan te pakken, kunnen we role-based toegangscontrole (RBAC) toepassen. In Logto kun je rollen definiëren en hieraan permissies toekennen. Raadpleeg [deze handleiding](https://docs.logto.io/docs/recipes/rbac/) om te leren hoe je rollen en permissies in Logto kunt definiëren. Na het definiëren van rollen en permissies, kun je de `scopes`-optie toevoegen aan de `LogtoProvider`-component: ```tsx ``` Logto zal dan alleen een toegangstoken met de juiste scope(s) aan de gebruiker toekennen. Bijvoorbeeld, als een gebruiker alleen de scope `read:products` heeft, zal het toegangstoken alleen die scope bevatten: ```json { "scope": "read:products", "sub": "1234567890" } ``` Als een gebruiker zowel de `read:products` als `write:products` scopes heeft, zal het toegangstoken beide scopes bevatten met een spatie als scheidingsteken: ```json { "scope": "read:products write:products", "sub": "1234567890" } ``` In je Express.js-applicatie kun je verifiëren of het toegangstoken de juiste scope(s) bevat voordat je toegang verleent tot het API-eindpunt: ```ts assert(scope.split(' ').includes('read:products')); ``` ## Conclusie Het beschermen van API-eindpunten terwijl je zorgt voor schaalbaarheid is geen gemakkelijke taak. Bij Logto streven we ernaar om aanvraagauthenticatie voor ontwikkelaars te vereenvoudigen, zodat je meer kunt focussen op je bedrijfslogica. Voor vragen kun je gerust onze [Discord-server](https://discord.gg/UEPaF3j5e6) joinen. Onze community helpt je graag verder. Probeer Logto vandaag