"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "inleiding", "hProperties": { "id": "inleiding" } }, "depth": 2, "value": "Inleiding" }, { "data": { "id": "maar-eerst-wat-en-waarom", "hProperties": { "id": "maar-eerst-wat-en-waarom" } }, "depth": 2, "value": "Maar eerst, wat en waarom?" }, { "data": { "id": "integreer-een-oidc-server", "hProperties": { "id": "integreer-een-oidc-server" } }, "depth": 2, "value": "Integreer een OIDC-server" }, { "data": { "id": "vind-een-oidc-provider", "hProperties": { "id": "vind-een-oidc-provider" } }, "depth": 3, "value": "Vind een OIDC-provider" }, { "data": { "id": "onderwerp-cliënt-en-publiek", "hProperties": { "id": "onderwerp-cliënt-en-publiek" } }, "depth": 3, "value": "Onderwerp, cliënt en publiek" }, { "data": { "id": "1-een-gebruiker-klikt-op-de-inlogknop-op-een-webapplicatie", "hProperties": { "id": "1-een-gebruiker-klikt-op-de-inlogknop-op-een-webapplicatie" } }, "depth": 4, "value": "1. Een gebruiker klikt op de inlogknop op een webapplicatie" }, { "data": { "id": "2-een-gebruiker-gebruikt-een-single-page-applicatie", "hProperties": { "id": "2-een-gebruiker-gebruikt-een-single-page-applicatie" } }, "depth": 4, "value": "2. Een gebruiker gebruikt een single-page applicatie" }, { "data": { "id": "3-een-machine-tot-machine-communicatie", "hProperties": { "id": "3-een-machine-tot-machine-communicatie" } }, "depth": 4, "value": "3. Een machine-tot-machine communicatie" }, { "data": { "id": "samenvatting", "hProperties": { "id": "samenvatting" } }, "depth": 4, "value": "Samenvatting" }, { "data": { "id": "tokens", "hProperties": { "id": "tokens" } }, "depth": 3, "value": "Tokens" }, { "data": { "id": "meerdere-publieken", "hProperties": { "id": "meerdere-publieken" } }, "depth": 3, "value": "Meerdere publieken" }, { "data": { "id": "specificeer-resource-in-de-code-uitwisselingsaanvraag", "hProperties": { "id": "specificeer-resource-in-de-code-uitwisselingsaanvraag" } }, "depth": 4, "value": "Specificeer resource in de code-uitwisselingsaanvraag" }, { "data": { "id": "gebruik-een-refresh-token-om-een-nieuwe-access-token-te-verkrijgen", "hProperties": { "id": "gebruik-een-refresh-token-om-een-nieuwe-access-token-te-verkrijgen" } }, "depth": 4, "value": "Gebruik een refresh token om een nieuwe access token te verkrijgen" }, { "data": { "id": "client-credentials-grant", "hProperties": { "id": "client-credentials-grant" } }, "depth": 4, "value": "Client credentials grant" }, { "data": { "id": "bescherm-je-api-service", "hProperties": { "id": "bescherm-je-api-service" } }, "depth": 3, "value": "Bescherm je API-service" }, { "data": { "id": "claims-controleren", "hProperties": { "id": "claims-controleren" } }, "depth": 4, "value": "Claims controleren" }, { "data": { "id": "autorisatie", "hProperties": { "id": "autorisatie" } }, "depth": 2, "value": "Autorisatie" }, { "data": { "id": "afsluitende-opmerkingen", "hProperties": { "id": "afsluitende-opmerkingen" } }, "depth": 2, "value": "Afsluitende opmerkingen" }]; const readingTime = { "minutes": 8, "words": 2329, "text": "8 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", blockquote: "blockquote", code: "code", em: "em", h2: "h2", h3: "h3", h4: "h4", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {Info, LogtoCloudButton, Note} = _components; if (!Info) _missingMdxReference("Info", true); if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); if (!Note) _missingMdxReference("Note", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "inleiding", children: ["Inleiding", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#inleiding", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Je kunt in een situatie komen waarin je een gecentraliseerd authenticatie- en autorisatiesysteem nodig hebt, oftewel identity access management (IAM) of identity provider (IdP). Soms voegen mensen een woord toe om het zakelijke aspect aan te duiden, zoals Customer IAM en Workforce IAM." }), "\n", _jsx(_components.p, { children: "Laten we deze mooie namen even parkeren. De behoefte aan IAM zou kunnen ontstaan omdat je applicatie groeit, of je van plan bent het zware werk vanaf het begin aan een leverancier over te laten. Niettemin bereik je een punt waarop een identiteitssysteem aan je project moet worden toegevoegd." }), "\n", _jsx(_components.p, { children: "Aangezien OAuth 2.0 populair is, is OpenID Connect (OIDC) een natuurlijke keuze voor veel ontwikkelaars. Omdat OIDC een authenticatielaag is die bovenop OAuth 2.0 is gebouwd, zou je je vertrouwd kunnen voelen wanneer je met OIDC begint te werken. Laten we beginnen!" }), "\n", _jsxs(_components.h2, { id: "maar-eerst-wat-en-waarom", children: ["Maar eerst, wat en waarom?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#maar-eerst-wat-en-waarom", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "Voel je vrij om deze sectie over te slaan als je al vertrouwd bent met het concept van een identity provider en het belang ervan." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Een OIDC-server, of identity provider, is een gecentraliseerd systeem dat gebruikersauthenticatie en autorisatie beheert. Zoals we bespraken in ", _jsx(_components.a, { href: "https://blog.logto.io/centralized-identity-system", children: "Waarom je een gecentraliseerd identiteitssysteem nodig hebt voor een multi-app business" }), ", heeft een gecentraliseerd identiteitssysteem veel voordelen."] }), "\n", _jsx(_components.p, { children: "Laten we zeggen dat je project begint met een eenvoudige webapplicatie, en het heeft ingebouwde authenticatie:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "graph LR\n A[Gebruiker] --> B[Webapplicatie]\n" }) }), "\n", _jsx(_components.p, { children: "Naarmate je project groeit, moet je een mobiele versie introduceren:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "graph LR\n A[Gebruiker] --> B[Webapplicatie]\n A --> C[Mobiele applicatie]\n" }) }), "\n", _jsx(_components.p, { children: "Het zal een slechte ervaring voor gebruikers zijn als ze voor elke applicatie een account moeten aanmaken. Omdat je begonnen bent met een webapplicatie, laat je de mobiele applicatie communiceren met de webapplicatie voor authenticatie:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "graph LR\n A[Gebruiker] --> B[Webapplicatie]\n A --> C[Mobiele applicatie]\n C --> B\n" }) }), "\n", _jsx(_components.p, { children: "Nu wordt er een nieuwe API-service geïntroduceerd. Omdat het een service voor betalende gebruikers is, moet je ervoor zorgen dat de gebruiker geauthenticeerd en geautoriseerd is om toegang te krijgen tot de service. Om dit te bereiken, kun je de service via de webapplicatie proxiëren:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "graph LR\n A[Gebruiker] --> B[Webapplicatie]\n A --> C[Mobiele applicatie]\n C --> B\n B --> D[API-service]\n" }) }), "\n", _jsx(_components.p, { children: "Of gebruik een of andere token-techniek om de gebruiker te authenticeren en valideer de token door te communiceren met de webapplicatie in de service. Hierdoor kan de mobiele applicatie de service direct gebruiken:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "graph LR\n A[Gebruiker] --> B[Webapplicatie]\n A --> C[Mobiele applicatie]\n C --> B\n B <--> D[API-service]\n C --> D\n" }) }), "\n", _jsx(_components.p, { children: "De zaken worden rommelig. Dus je besluit om de authenticatie- en autorisatielogica in een aparte service op te splitsen:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "graph LR\n A[Gebruiker] --> B[Webapplicatie]\n A --> C[Mobiele applicatie]\n B --> D[API-service]\n C --> D\n B --> E[Identiteitsservice] \n C --> E\n D --> E \n\n subgraph Applicaties\n B\n C\n end\n\n subgraph Services\n D\n end\n\n subgraph Identiteit\n E\n end\n" }) }), "\n", _jsx(_components.p, { children: "Het herstructureringsproces kan pijnlijk zijn. Je merkt misschien dat de complexiteit exponentieel toeneemt naarmate je meer applicaties en services aan het project toevoegt. Nog erger, je moet mogelijk meerdere authenticatiemethoden onderhouden, zoals wachtwoordloos inloggen, sociale login, SAML, enz." }), "\n", _jsx(_components.p, { children: "Om deze reden is het beter om vanaf het begin een identiteit provider in te voeren als je van plan bent je project op te schalen." }), "\n", _jsx(Note, { children: _jsx(_components.p, { children: "Natuurlijk zijn er enkele gevallen waarin het project eenvoudig genoeg is en je weet dat het een tijdje eenvoudig zal blijven. Je kunt dit artikel verlaten en terugkomen wanneer je het nodig hebt." }) }), "\n", _jsxs(_components.h2, { id: "integreer-een-oidc-server", children: ["Integreer een OIDC-server", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#integreer-een-oidc-server", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "vind-een-oidc-provider", children: ["Vind een OIDC-provider", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#vind-een-oidc-provider", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Er zijn veel OIDC-providers beschikbaar op de markt. Je kunt er een kiezen op basis van je vereisten en voorkeuren. Zolang de provider OIDC-compliant is, zal het dezelfde rol spelen in je project." }), "\n", _jsx(Info, { children: _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://logto.io", children: "Logto" }), " is een open-source OIDC-provider met kant-en-klare identity en access management-functies."] }) }), "\n", _jsxs(_components.h3, { id: "onderwerp-cliënt-en-publiek", children: ["Onderwerp, cliënt en publiek", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#onderwerp-cliënt-en-publiek", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Om het concept te vereenvoudigen, kunnen we denken dat het ", _jsx(_components.em, { children: "onderwerp" }), " de entiteit is die toegang aanvraagt tot een ", _jsx(_components.em, { children: "publiek" }), " via een ", _jsx(_components.em, { children: "cliënt" }), "."] }), "\n", _jsx(Note, { title: "Ik kan audience (aud) niet zien in de token", children: _jsx(_components.p, { children: "Wanneer een publiek ontbreekt, betekent het meestal dat het publiek de OIDC-server zelf is." }) }), "\n", _jsx(_components.p, { children: "Laten we enkele typische scenario's bekijken:" }), "\n", _jsxs(_components.h4, { id: "1-een-gebruiker-klikt-op-de-inlogknop-op-een-webapplicatie", children: ["1. Een gebruiker klikt op de inlogknop op een webapplicatie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#1-een-gebruiker-klikt-op-de-inlogknop-op-een-webapplicatie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "In een traditionele en server-side rendered webapplicatie zijn de frontend en backend gekoppeld. Stel dat de webapplicatie zowel frontend als backend heeft:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Onderwerp" }), ": De gebruiker"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Publiek" }), ": De OIDC-server"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Cliënt" }), ": De webapplicatie"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Het lijkt misschien niet intuïtief dat het publiek de OIDC-server is. In feite is het de sleutel tot het realiseren van de SSO (Single Sign-On) ervaring voor eindgebruikers. Laten we een vereenvoudigd sequentiediagram voor de ", _jsx(_components.a, { href: "https://blog.logto.io/implicit-flow-is-dead#how-authorization-code-flow-works", children: "authorization code flow" }), " bekijken:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant User as Gebruiker
(onderwerp)\n participant App1 as WebApp 1
(cliënt)\n participant App2 as WebApp 2
(cliënt)\n participant OIDC as OIDC-server
(publiek)\n\n User ->> App1: Klik op inloggen\n App1 ->> OIDC: Omleiding
(autorisatieaanvraag)\n OIDC ->> User: Toon inlogpagina\n User ->> OIDC: Inloggen\n OIDC ->> App1: Omleiding met `code`\n App1 ->> OIDC: Wissel tokens uit met `code`\n Note over User: Drink een kop koffie\n User ->> App2: Klik op inloggen\n App2 ->> OIDC: Omleiding\n OIDC ->> OIDC: Geldige sessie gevonden\n OIDC ->> App2: Omleiding met `code`\n App2 ->> OIDC: Wissel tokens uit met `code`\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "code" }), " is een eenmalige code die kan worden ingewisseld voor verschillende tokens, zoals een access token, ID-token en refresh token. Het is prima als je op dit moment niet alle tokens begrijpt. Terwijl we verder gaan, zul je er een beter begrip van krijgen."] }), "\n", _jsx(_components.p, { children: "In het bovenstaande geval hoeft de gebruiker niet opnieuw in te loggen wanneer hij overschakelt naar een andere applicatie omdat de gebruiker (onderwerp) al is geauthenticeerd bij de OIDC-server (publiek)." }), "\n", _jsxs(_components.h4, { id: "2-een-gebruiker-gebruikt-een-single-page-applicatie", children: ["2. Een gebruiker gebruikt een single-page applicatie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#2-een-gebruiker-gebruikt-een-single-page-applicatie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "In een single-page applicatie (of een mobiele applicatie) zijn de frontend en backend gescheiden. Laten we zeggen dat de backend een API-service is:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Onderwerp" }), ": De gebruiker"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Publiek" }), ": De API-service"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Cliënt" }), ": De single-page applicatie (SPA)"] }), "\n"] }), "\n", _jsx(_components.p, { children: "Een vereenvoudigd sequentiediagram met authorization code flow:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant User as Gebruiker
(onderwerp)\n participant SPA as Single-page applicatie
(cliënt)\n participant API as API-service
(publiek)\n participant OIDC as OIDC-server
(publiek)\n\n User ->> SPA: Klik op inloggen\n SPA ->> OIDC: Omleiding
(autorisatieaanvraag)\n OIDC ->> User: Toon inlogpagina\n User ->> OIDC: Inloggen\n OIDC ->> SPA: Omleiding met `code`\n SPA ->> OIDC: Wissel tokens uit met `code`\n User ->> SPA: Probeer een beschermde pagina te bekijken\n SPA ->> API: Verzoek gegevens met access token\n API ->> OIDC: Valideer access token\n OIDC ->> API: OK\n API ->> SPA: Antwoord gegevens\n" }) }), "\n", _jsxs(_components.p, { children: ["Aangezien de API-service niet-interactief is, moet de SPA het access token gebruiken met de API-service als publiek (de ", _jsx(_components.code, { children: "aud" }), " in de token)."] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Waarom is de OIDC-server nog steeds een publiek?" }) }), "\n", _jsx(_components.p, { children: "Technisch gezien kun je de OIDC-server uit de publiek lijst verwijderen. Aangezien je in de meeste gevallen de gebruikersinformatie van de OIDC-server nodig hebt (wat vereist dat de OIDC-server het publiek is), is het beter om de OIDC-server altijd in de publiek lijst op te nemen wanneer het gebruikersinteractie betreft." }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Wacht, je zegt dat we meerdere publieken kunnen hebben in een autorisatieaanvraag?" }) }), "\n", _jsxs(_components.p, { children: ["Precies! Vergeet niet dat OIDC is gebouwd bovenop OAuth 2.0; het is mogelijk om ", _jsx(_components.a, { href: "https://datatracker.ietf.org/doc/html/rfc8707", children: "RFC 8707: Resource Indicators for OAuth 2.0" }), " in de autorisatieaanvraag te gebruiken om meerdere publieken op te geven. Dit vereist ondersteuning van zowel de grant als de OIDC-server. ", _jsx(_components.a, { href: "https://logto.io", children: "Logto" }), " ondersteunt deze functie van nature."] }), "\n", _jsxs(_components.h4, { id: "3-een-machine-tot-machine-communicatie", children: ["3. Een machine-tot-machine communicatie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#3-een-machine-tot-machine-communicatie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Laten we zeggen dat je een service A hebt die service B moet aanroepen:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Onderwerp" }), ": Service A"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Publiek" }), ": Service B"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Cliënt" }), ": Service A"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Een vereenvoudigd sequentiediagram met de ", _jsx(_components.a, { href: "https://datatracker.ietf.org/doc/html/rfc6749#section-1.3.4", children: "client credentials grant" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant ServiceA as Service A
(onderwerp en cliënt)\n participant ServiceB as Service B
(publiek)\n participant OIDC as OIDC-server\n\n ServiceA ->> OIDC: Verzoek access token
met client credentials (token aanvraag)\n OIDC ->> ServiceA: Access token\n ServiceA ->> ServiceB: Verzoek gegevens met access token\n ServiceB ->> OIDC: Valideer access token\n OIDC ->> ServiceB: OK\n ServiceB ->> ServiceA: Antwoord gegevens\n" }) }), "\n", _jsx(_components.p, { children: "Wanneer service B service A moet aanroepen, worden de rollen eenvoudigweg verwisseld." }), "\n", _jsxs(_components.h4, { id: "samenvatting", children: ["Samenvatting", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#samenvatting", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Onderwerp" }), ": Dit kan een gebruiker, een service of een entiteit zijn die toegang tot het publiek nodig heeft."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Cliënt" }), ": Dit kan een webapplicatie, een mobiele applicatie of een entiteit zijn die het verzoek initieert of namens het onderwerp handelt."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Publiek" }), ": Dit kan een service, een API of een entiteit zijn die toegang biedt aan het onderwerp."] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "tokens", children: ["Tokens", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#tokens", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Er zijn drie soorten tokens die je kunt tegenkomen bij het werken met OIDC:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Access token" }), ": Het wordt gebruikt om toegang te krijgen tot het publiek. Het kan een JWT (JSON Web Token) zijn of een ondoorzichtig token (meestal een willekeurige tekenreeks)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "ID-token" }), ": Een OIDC-specifiek token dat gebruikersinformatie bevat. Het is altijd een JWT. De cliënt kan de token decoderen om gebruikersinformatie te verkrijgen."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Refresh token" }), ": Het wordt gebruikt om een nieuwe set tokens te krijgen wanneer het access token of ID-token verloopt."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Voor een gedetailleerde uitleg van deze tokens kun je verwijzen naar ", _jsx(_components.a, { href: "https://blog.logto.io/understanding-tokens-in-oidc", children: "Understanding refresh tokens, access tokens, and ID tokens in OIDC protocol" }), "."] }), "\n", _jsxs(_components.p, { children: ["In de bovenstaande scenario's 1 en 2 verwijst de term ", _jsx(_components.em, { children: "autorisatieaanvraag" }), " naar een verzoek om een set tokens te verkrijgen via een specifieke ", _jsx(_components.em, { children: "grant" }), "."] }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Hoewel de OAuth 2.0 RFC de term ", _jsx(_components.em, { children: "grant" }), " gebruikt, gebruiken mensen in de praktijk vaak de term ", _jsx(_components.em, { children: "flow" }), " om een meer algemene, end-to-end proces te beschrijven."] }) }), "\n", _jsxs(_components.p, { children: ["Wanneer alles goed gaat, wordt er een set tokens teruggegeven in de stap \"Wissel tokens uit met ", _jsx(_components.code, { children: "code" }), "\". De beschikbare tokens in de set zijn afhankelijk van meerdere factoren, met name de ", _jsx(_components.code, { children: "scope" }), " parameter in de autorisatieaanvraag. Omwille van de eenvoud gaan we ervan uit dat alle tokens in de set worden geretourneerd. Zodra het access token is verlopen, kan de cliënt de refresh token gebruiken om een nieuwe set tokens te verkrijgen zonder gebruikersinteractie."] }), "\n", _jsx(_components.p, { children: "Voor scenario 3 is het eenvoudiger omdat de client credentials grant alleen een access token retourneert." }), "\n", _jsxs(_components.h3, { id: "meerdere-publieken", children: ["Meerdere publieken", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#meerdere-publieken", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Je merkt misschien dat er slechts één access token tegelijkertijd wordt geretourneerd. Hoe kunnen we omgaan met het geval waarin de cliënt toegang tot meerdere publieken nodig heeft?" }), "\n", _jsx(_components.p, { children: "Er zijn twee veelvoorkomende oplossingen:" }), "\n", _jsxs(_components.h4, { id: "specificeer-resource-in-de-code-uitwisselingsaanvraag", children: ["Specificeer ", _jsx(_components.code, { children: "resource" }), " in de code-uitwisselingsaanvraag", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#specificeer-resource-in-de-code-uitwisselingsaanvraag", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Wanneer de cliënt de code inwisselt voor tokens, kan deze een ", _jsx(_components.code, { children: "resource" }), " parameter in de aanvraag specificeren. De OIDC-server retourneert een access token voor het gespecificeerde publiek indien van toepassing."] }), "\n", _jsx(_components.p, { children: "Hier is een niet-normatief voorbeeld:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-http", children: "POST /token HTTP/1.1\nHost: oidc-server.example.com\nContent-Type: application/x-www-form-urlencoded\n\ngrant_type=authorization_code\n&code=AUTHORIZATION_CODE\n&client_id=CLIENT_ID\n&client_secret=CLIENT_SECRET\n&resource=API_SERVICE\n" }) }), "\n", _jsxs(_components.p, { children: ["Dan retourneert de OIDC-server een access token voor het ", _jsx(_components.code, { children: "API_SERVICE" }), " publiek, indien van toepassing."] }), "\n", _jsxs(_components.h4, { id: "gebruik-een-refresh-token-om-een-nieuwe-access-token-te-verkrijgen", children: ["Gebruik een refresh token om een nieuwe access token te verkrijgen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#gebruik-een-refresh-token-om-een-nieuwe-access-token-te-verkrijgen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Met RFC 8707 kan de cliënt zelfs meerdere publieken specificeren door de ", _jsx(_components.code, { children: "resource" }), " parameter meerdere keren te gebruiken. Nu, als refresh tokens beschikbaar zijn in de cliënt, kan de cliënt het publiek specificeren in de ", _jsx(_components.code, { children: "resource" }), " parameter wanneer de token wordt vernieuwd."] }), "\n", _jsx(_components.p, { children: "Hier is een niet-normatief voorbeeld:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-http", children: "POST /token HTTP/1.1\nHost: oidc-server.example.com\nContent-Type: application/x-www-form-urlencoded\n\ngrant_type=refresh_token\n&refresh_token=REFRESH_TOKEN\n&client_id=CLIENT_ID\n&client_secret=CLIENT_SECRET\n&resource=API_SERVICE\n" }) }), "\n", _jsx(_components.p, { children: "Dit heeft hetzelfde effect als de vorige oplossing. Ondertussen zijn andere verleende publieken nog steeds beschikbaar in toekomstige token aanvragen." }), "\n", _jsxs(_components.h4, { id: "client-credentials-grant", children: ["Client credentials grant", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#client-credentials-grant", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Je kunt ook de ", _jsx(_components.code, { children: "resource" }), " parameter in de client credentials grant gebruiken om het publiek te specificeren. Er is geen probleem met meerdere publieken in deze grant omdat je altijd een nieuw access token voor een ander publiek kunt aanvragen door simpelweg een nieuwe token aanvraag te verzenden."] }), "\n", _jsxs(_components.h3, { id: "bescherm-je-api-service", children: ["Bescherm je API-service", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#bescherm-je-api-service", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "De \"API-service\" in scenario 2 en de \"Service B\" in scenario 3 hebben één ding gemeen: ze moeten de access token valideren om te bepalen of het verzoek is geautoriseerd. Afhankelijk van het formaat van de access token kan het validatieproces variëren." }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Ondoorzichtig token" }), ": De API-service moet de OIDC-server aanroepen om de token te valideren. Een ", _jsx(_components.a, { href: "https://blog.logto.io/oauth2-token-introspection", children: "introspectie eindpunt" }), " wordt meestal door de OIDC-server voor dit doel geleverd."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "JWT" }), ": De API-service kan de token lokaal valideren door de handtekening en de claims in de token te controleren. De OIDC-server levert meestal een ", _jsx(_components.a, { href: "https://openid.net/specs/openid-connect-discovery-1_0.html#ProviderMetadata", children: "JSON Web Key Set (JWKS) eindpunt" }), " (", _jsx(_components.code, { children: "jwks_uri" }), ") voor de API-service om de openbare sleutel te verkrijgen om de handtekening te verifiëren."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Als je nieuw bent met JWT, kun je verwijzen naar ", _jsx(_components.a, { href: "https://blog.logto.io/what-is-jwt", children: "What is JSON Web Token (JWT)?" }), ". In feite is het meestal niet nodig om de handtekening en de claims handmatig te valideren omdat er veel bibliotheken zijn die dit voor je kunnen doen, zoals ", _jsx(_components.a, { href: "https://github.com/panva/jose", children: "jose" }), " voor Node.js en webbrowsers."] }), "\n", _jsxs(_components.h4, { id: "claims-controleren", children: ["Claims controleren", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#claims-controleren", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Naast het valideren van de JWT-handtekening, moet de API-service altijd de claims in de token controleren:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "iss" }), ": De uitgever van de token. Dit moet overeenkomen met de issuer URL van de OIDC-server."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "aud" }), ": Het publiek van de token. Dit moet overeenkomen met de audience waarde van de API-service (meestal een geldige URI)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "exp" }), ": De vervaltijd van de token. De API-service moet de token weigeren als deze is verlopen."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "scope" }), ": De scopes (toestemmingen) van de token. De API-service moet controleren of de vereiste scope aanwezig is in de token."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Andere claims, zoals ", _jsx(_components.code, { children: "sub" }), " (onderwerp) en ", _jsx(_components.code, { children: "iat" }), " (uitgegeven op), zijn in sommige gevallen ook belangrijk. Als je aanvullende veiligheidsmaatregelen hebt, controleer dan de claims dienovereenkomstig."] }), "\n", _jsxs(_components.h2, { id: "autorisatie", children: ["Autorisatie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#autorisatie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Een onbeantwoorde vraag blijft bestaan: Hoe bepalen we of een ", _jsx(_components.em, { children: "scope" }), " (d.w.z. toestemming) aan een onderwerp kan worden verleend?"] }), "\n", _jsx(_components.p, { children: "De enkele vraag leidt tot een hele nieuwe wereld van autorisatie, die buiten het bereik van dit artikel valt. Kort gezegd zijn er enkele veelvoorkomende benaderingen zoals RBAC (Role-Based Access Control) en ABAC (Attribute-Based Access Control). Hier zijn enkele bronnen om je op weg te helpen:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://blog.logto.io/rbac-and-abac", children: "RBAC and ABAC: The access control models you should know" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://blog.logto.io/mastering-rbac", children: "Mastering RBAC in Logto: A Comprehensive Real-World Example" }) }), "\n"] }), "\n", _jsxs(_components.h2, { id: "afsluitende-opmerkingen", children: ["Afsluitende opmerkingen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#afsluitende-opmerkingen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Het introduceren van een OIDC-server in je project is een grote stap. Het kan de beveiliging en schaalbaarheid van je project aanzienlijk verbeteren. Ondertussen kan het enige tijd kosten om de concepten en de interacties tussen componenten te begrijpen." }), "\n", _jsx(_components.p, { children: "Het kiezen van een goede OIDC-provider die aan je vereisten en voorkeuren voldoet, kan de complexiteit van het integratieproces aanzienlijk verminderen, omdat de provider meestal het hele pakket biedt, inclusief de OIDC-server, autorisatiemechanismen, SDK's, en de enterprise-functies die je in de toekomst mogelijk nodig hebt." }), "\n", _jsxs(_components.p, { children: ["Ik hoop dat deze gids je helpt de basis te begrijpen van het integreren van een OIDC-server. Als je op zoek bent naar een om mee te beginnen, zou ik egoïstisch ", _jsx(_components.a, { href: "https://logto.io", children: "Logto" }), " aanraden, onze identiteit infrastructuur voor ontwikkelaars."] }), "\n", _jsx(LogtoCloudButton, {})] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }