"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introductie", "hProperties": { "id": "introductie" } }, "depth": 2, "value": "Introductie" }, { "data": { "id": "oauth-20-versus-openid-connect", "hProperties": { "id": "oauth-20-versus-openid-connect" } }, "depth": 2, "value": "OAuth 2.0 versus OpenID Connect" }, { "data": { "id": "oauth-20", "hProperties": { "id": "oauth-20" } }, "depth": 3, "value": "OAuth 2.0" }, { "data": { "id": "openid-connect-oidc", "hProperties": { "id": "openid-connect-oidc" } }, "depth": 3, "value": "OpenID Connect (OIDC)" }, { "data": { "id": "applicatietypen", "hProperties": { "id": "applicatietypen" } }, "depth": 2, "value": "Applicatietypen" }, { "data": { "id": "webapplicaties-die-op-een-server-draaien", "hProperties": { "id": "webapplicaties-die-op-een-server-draaien" } }, "depth": 3, "value": "Webapplicaties die op een server draaien" }, { "data": { "id": "enkelvoudige-pagina-applicaties-spas", "hProperties": { "id": "enkelvoudige-pagina-applicaties-spas" } }, "depth": 3, "value": "Enkelvoudige pagina-applicaties (SPAs)" }, { "data": { "id": "mobiele-applicaties", "hProperties": { "id": "mobiele-applicaties" } }, "depth": 3, "value": "Mobiele applicaties" }, { "data": { "id": "machine-to-machine-m2m-applicaties", "hProperties": { "id": "machine-to-machine-m2m-applicaties" } }, "depth": 3, "value": "Machine-to-machine (M2M) applicaties" }, { "data": { "id": "applicaties-die-op-iot-apparaten-draaien", "hProperties": { "id": "applicaties-die-op-iot-apparaten-draaien" } }, "depth": 3, "value": "Applicaties die op IoT-apparaten draaien" }, { "data": { "id": "bescherm-je-api", "hProperties": { "id": "bescherm-je-api" } }, "depth": 2, "value": "Bescherm je API" }, { "data": { "id": "autorisatiedesign", "hProperties": { "id": "autorisatiedesign" } }, "depth": 3, "value": "Autorisatiedesign" }, { "data": { "id": "toegangstokens", "hProperties": { "id": "toegangstokens" } }, "depth": 3, "value": "Toegangstokens" }, { "data": { "id": "bronindicatoren", "hProperties": { "id": "bronindicatoren" } }, "depth": 3, "value": "Bronindicatoren" }, { "data": { "id": "breng-alles-samen", "hProperties": { "id": "breng-alles-samen" } }, "depth": 2, "value": "Breng alles samen" }, { "data": { "id": "slotopmerkingen", "hProperties": { "id": "slotopmerkingen" } }, "depth": 2, "value": "Slotopmerkingen" }]; const readingTime = { "minutes": 12, "words": 3631, "text": "12 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", blockquote: "blockquote", code: "code", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "introductie", children: ["Introductie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introductie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Cloudgebaseerde applicaties zijn tegenwoordig de trend. Hoewel het type applicatie varieert (web, mobiel, desktop, enz.), hebben ze allemaal een cloudbackend die diensten zoals opslag, computing en databases levert. Meestal moeten deze applicaties gebruikers authentiseren en autoriseren om toegang te krijgen tot bepaalde bronnen." }), "\n", _jsx(_components.p, { children: "Hoewel zelfgemaakte authenticatie- en autorisatiemechanismen mogelijk zijn, is beveiliging een van de grootste zorgen geworden bij het ontwikkelen van cloudapplicaties. Gelukkig heeft onze industrie beproefde standaarden zoals OAuth 2.0 en OpenID Connect om ons te helpen bij het implementeren van veilige authenticatie en autorisatie." }), "\n", _jsx(_components.p, { children: "Dit bericht gaat uit van de volgende aannames:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Je hebt een basisbegrip van applicatieontwikkeling (web, mobiel of enig ander type)." }), "\n", _jsx(_components.li, { children: "Je hebt gehoord over de concepten van authenticatie en autorisatie." }), "\n", _jsxs(_components.li, { children: ["Je hebt gehoord over ", _jsx(_components.a, { href: "https://auth.wiki/oauth-2.0", children: "OAuth 2.0" }), " en ", _jsx(_components.a, { href: "https://auth.wiki/openid-connect", children: "OpenID Connect" }), "."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Ja, \"gehoord\" is voldoende voor zowel 2 als 3. Dit bericht zal echte voorbeelden gebruiken om concepten uit te leggen en het proces te illustreren met diagrammen. Laten we beginnen!" }), "\n", _jsxs(_components.h2, { id: "oauth-20-versus-openid-connect", children: ["OAuth 2.0 versus OpenID Connect", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#oauth-20-versus-openid-connect", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Als je vertrouwd bent met OAuth 2.0 en OpenID Connect, kun je ook verder lezen omdat we enkele praktijkvoorbeelden in deze sectie zullen behandelen; als je nieuw bent met deze standaarden, is het ook veilig om verder te gaan, want we zullen ze op een eenvoudige manier introduceren." }), "\n", _jsxs(_components.h3, { id: "oauth-20", children: ["OAuth 2.0", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#oauth-20", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://auth.wiki/oauth-2.0", children: "OAuth 2.0" }), " is een autorisatieframework dat een applicatie in staat stelt beperkte toegang te verkrijgen tot beschermde bronnen van een andere applicatie namens een gebruiker of de applicatie zelf. De meeste populaire diensten zoals Google, Facebook en GitHub gebruiken OAuth 2.0 voor sociale login (bijv. \"Aanmelden met Google\")."] }), "\n", _jsx(_components.p, { children: "Bijvoorbeeld, je hebt een webapplicatie MyApp die toegang wil krijgen tot de Google Drive van de gebruiker. In plaats van de gebruiker te vragen hun Google Drive-inloggegevens te delen, kan MyApp OAuth 2.0 gebruiken om toegang tot Google Drive aan te vragen namens de gebruiker. Hier is een vereenvoudigde flow:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant User\n participant MyApp\n participant Google\n\n User->>MyApp: Open MyApp en
klik op \"Verbind Google Drive\"\n MyApp->>Google: Doorverwijzen naar Google\n Google->>User: Aanmelden bij Google\n User->>Google: Aanmelden\n Google->>User: Vragen om toestemming
om toegang te krijgen tot Google Drive\n User->>Google: Toegang verlenen aan MyApp\n Google->>MyApp: Doorverwijzen naar MyApp
met autorisatiedata (bijv. toegangstoken)\n MyApp->>Google: Toegang tot Google Drive van gebruiker\n" }) }), "\n", _jsxs(_components.p, { children: ["In deze flow ziet MyApp nooit de Google Drive-inloggegevens van de gebruiker. In plaats daarvan ontvangt het een ", _jsx(_components.a, { href: "https://auth.wiki/access-token", children: "toegangstoken" }), " van Google waarmee het toegang krijgt tot Google Drive namens de gebruiker."] }), "\n", _jsxs(_components.p, { children: ["In OAuth 2.0-termen is MyApp de ", _jsx(_components.a, { href: "https://auth.wiki/client", children: "client" }), ", is Google zowel de ", _jsx(_components.a, { href: "https://auth.wiki/authorization-server", children: "autorisatieserver" }), " als de ", _jsx(_components.a, { href: "https://auth.wiki/resource-server", children: "bronserver" }), " voor eenvoudigheid. In de echte wereld hebben we vaak gescheiden autorisatie- en bronservers om een Single Sign-On (SSO) ervaring te bieden. Bijvoorbeeld, Google is de autorisatieserver en kan meerdere bronservers hebben zoals Google Drive, Gmail en YouTube."] }), "\n", _jsx(_components.p, { children: "Merk op dat de daadwerkelijke autorisatiestroom complexer is dan dit. OAuth 2.0 heeft verschillende toestaan verleentypes, domeinen en andere concepten waarmee je bekend moet zijn. Laten we dat even terzijde leggen en verder gaan naar OpenID Connect." }), "\n", _jsxs(_components.h3, { id: "openid-connect-oidc", children: ["OpenID Connect (OIDC)", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#openid-connect-oidc", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["OAuth 2.0 is geweldig voor autorisatie, maar je merkt misschien dat het geen manier heeft om de gebruiker te identificeren (d.w.z. authenticatie). ", _jsx(_components.a, { href: "https://auth.wiki/openid-connect", children: "OpenID Connect" }), " is een identiteitslaag bovenop OAuth 2.0 die authenticatiefuncties toevoegt."] }), "\n", _jsx(_components.p, { children: "In het bovenstaande voorbeeld moet MyApp weten wie de gebruiker is voordat de autorisatiestroom wordt gestart. Let op dat er hier twee gebruikers betrokken zijn: de gebruiker van MyApp en de gebruiker van Google Drive. In dit geval moet MyApp de gebruiker van zijn eigen applicatie kennen." }), "\n", _jsx(_components.p, { children: "Laten we een eenvoudig voorbeeld bekijken, ervan uitgaande dat gebruikers zich kunnen aanmelden bij MyApp met gebruikersnaam en wachtwoord:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant User\n participant MyApp\n participant IdP as Identity provider (IdP)\n\n User->>MyApp: Open MyApp en
klik op \"Aanmelden\"\n MyApp->>IdP: Doorverwijzen naar IdP\n IdP->>User: Vragen om gebruikersnaam en wachtwoord\n User->>IdP: Gebruikersnaam en wachtwoord invoeren\n IdP->>IdP: Gebruiker authentiseren\n IdP->>MyApp: Doorverwijzen naar MyApp
met authenticatie- en
autorisatiedata (bijv. ID-token)\n MyApp->>User: Gebruikersprofiel tonen
(via ID-token of gebruikersinformatie-uiteinde)\n" }) }), "\n", _jsxs(_components.p, { children: ["Aangezien we de gebruiker van onze eigen applicatie authenticeren, is het meestal niet nodig om toestemming te vragen zoals Google deed in de OAuth 2.0-flow. Ondertussen hebben we iets nodig dat de gebruiker kan identificeren. OpenID Connect introduceert de concepten zoals ", _jsx(_components.strong, { children: "ID-token" }), " en ", _jsx(_components.strong, { children: "gebruikersinformatie-uiteinde" }), " om ons daarbij te helpen."] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: ["Je merkt misschien dat de ", _jsx(_components.strong, { children: _jsx(_components.a, { href: "https://auth.wiki/identity-provider", children: "identity provider (IdP)" }) }), " een nieuwe zelfstandige deelnemer in de flow is. Het is hetzelfde als de ", _jsx(_components.strong, { children: "autorisatieserver" }), " in OAuth 2.0, maar voor meer duidelijkheid gebruiken we de term IdP om aan te geven dat het verantwoordelijk is voor gebruikersauthenticatie en identiteitsbeheer."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Wanneer je bedrijf groeit, kun je meerdere applicaties hebben die dezelfde gebruikersdatabase delen. Net als OAuth 2.0, stelt OpenID Connect je in staat om een enkele autorisatieserver te hebben die gebruikers voor meerdere applicaties kan authentiseren. Als de gebruiker al is aangemeld bij één applicatie, hoeft de gebruiker zijn inloggegevens niet opnieuw in te voeren wanneer een andere applicatie ze omleidt naar de IdP. De stroom kan automatisch worden uitgevoerd zonder gebruikersinteractie. Dit wordt Single Sign-On (SSO) genoemd." }), "\n", _jsx(_components.p, { children: "Nogmaals, dit is een zeer vereenvoudigde flow en er zijn meer details onder de motorkap. Laten we nu verder gaan met de volgende sectie om informatieoverbelasting te voorkomen." }), "\n", _jsxs(_components.h2, { id: "applicatietypen", children: ["Applicatietypen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#applicatietypen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["In de vorige sectie hebben we webapplicaties als voorbeelden gebruikt terwijl de wereld diverser is dan dat. Voor een identity provider maakt de exacte programmeertaal, framework of platform dat je gebruikt niet echt uit. In de praktijk is één opmerkelijk verschil of de applicatie een ", _jsx(_components.a, { href: "https://auth.wiki/client#public-clients", children: "openbare client" }), " of een ", _jsx(_components.a, { href: "https://auth.wiki/client#private-clients", children: "privé (vertrouwde) client" }), " is:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Openbare client" }), ": Een client die zijn inloggegevens niet vertrouwelijk kan houden, wat betekent dat de resource-eigenaar (gebruiker) er toegang toe heeft. Bijvoorbeeld, een webapplicatie die in een browser draait (bijv. enkelvoudige pagina-applicatie)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Privé client" }), ": Een client die in staat is zijn inloggegevens vertrouwelijk te houden zonder deze bloot te stellen aan (resource-eigenaren) gebruikers. Bijvoorbeeld, een webapplicatie die op een server draait (bijv. server-side webapplicatie) of een API-service."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Met deze in gedachten, laten we eens kijken hoe OAuth 2.0 en OpenID Connect in verschillende applicatietypen kunnen worden gebruikt." }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "\"Applicatie\" en \"client\" kunnen in de context van dit bericht door elkaar worden gebruikt." }), "\n"] }), "\n", _jsxs(_components.h3, { id: "webapplicaties-die-op-een-server-draaien", children: ["Webapplicaties die op een server draaien", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#webapplicaties-die-op-een-server-draaien", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "De applicatie draait op een server en levert HTML-pagina's aan gebruikers. Veel populaire webframeworks zoals Express.js, Django en Ruby on Rails vallen in deze categorie; en backend-voor-front-end (BFF) frameworks zoals Next.js en Nuxt.js zijn ook inbegrepen. Deze applicaties hebben de volgende kenmerken:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Omdat een server alleen privétoegang toestaat (er is geen manier voor het publiek om de code of inloggegevens van de server te zien), wordt het beschouwd als een privé client." }), "\n", _jsx(_components.li, { children: "De algemene gebruikersauthenticatiestroom is dezelfde als die we hebben besproken in de sectie \"OpenID Connect\"." }), "\n", _jsx(_components.li, { children: "De applicatie kan het door de identity provider (d.w.z. de OpenID Connect provider) uitgegeven ID-token gebruiken om de gebruiker te identificeren en gebruikersspecifieke inhoud weer te geven." }), "\n", _jsxs(_components.li, { children: ["Om de applicatie veilig te houden, gebruikt de applicatie meestal de ", _jsx(_components.strong, { children: "autorisatiecode-flow" }), " voor gebruikersauthenticatie en om tokens te verkrijgen."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Ondertussen moet de applicatie mogelijk toegang hebben tot andere interne API-services in een microservicesarchitectuur; of het is een monolithische applicatie die toegangscontrole nodig heeft voor verschillende delen van de applicatie. We bespreken dit in de sectie \"Bescherm je API\"." }), "\n", _jsxs(_components.h3, { id: "enkelvoudige-pagina-applicaties-spas", children: ["Enkelvoudige pagina-applicaties (SPAs)", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#enkelvoudige-pagina-applicaties-spas", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "De applicatie draait in de browser van de gebruiker en communiceert met de server via API's. React, Angular en Vue.js zijn populaire frameworks voor het bouwen van SPAs. Deze applicaties hebben de volgende kenmerken:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Aangezien de code van de applicatie zichtbaar is voor het publiek, wordt het beschouwd als een openbare client." }), "\n", _jsx(_components.li, { children: "De algemene gebruikersauthenticatiestroom is dezelfde als die we hebben besproken in de sectie \"OpenID Connect\"." }), "\n", _jsx(_components.li, { children: "De applicatie kan het door de identity provider (d.w.z. de OpenID Connect provider) uitgegeven ID-token gebruiken om de gebruiker te identificeren en gebruikersspecifieke inhoud weer te geven." }), "\n", _jsxs(_components.li, { children: ["Om de applicatie veilig te houden, gebruikt de applicatie meestal de ", _jsx(_components.strong, { children: "autorisatiecode-flow met PKCE (Proof Key for Code Exchange)" }), " voor gebruikersauthenticatie en om tokens te verkrijgen."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Gewoonlijk moeten SPAs toegang krijgen tot andere API-services voor gegevensophaling en -bijwerking. We bespreken dit in de sectie \"Bescherm je API\"." }), "\n", _jsxs(_components.h3, { id: "mobiele-applicaties", children: ["Mobiele applicaties", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mobiele-applicaties", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "De applicatie draait op een mobiel apparaat (iOS, Android, enz.) en communiceert met de server via API's. In de meeste gevallen hebben deze applicaties dezelfde kenmerken als SPAs." }), "\n", _jsxs(_components.h3, { id: "machine-to-machine-m2m-applicaties", children: ["Machine-to-machine (M2M) applicaties", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#machine-to-machine-m2m-applicaties", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://auth.wiki/machine-to-machine", children: "Machine-to-machine" }), " applicaties zijn ", _jsx(_components.a, { href: "https://auth.wiki/client", children: "clients" }), " die op een server (machine) draaien en communiceren met andere servers. Deze applicaties hebben de volgende kenmerken:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Net als webapplicaties die op een server draaien, zijn M2M-applicaties privé clients." }), "\n", _jsx(_components.li, { children: "De applicatie hoeft mogelijk niet de gebruiker te identificeren; in plaats daarvan moet het zichzelf authentiseren om toegang te krijgen tot andere diensten." }), "\n", _jsx(_components.li, { children: "De applicatie kan het toegangstoken uitgegeven door de identity provider (d.w.z. de OAuth 2.0 provider) gebruiken om toegang te krijgen tot andere diensten." }), "\n", _jsxs(_components.li, { children: ["Om de applicatie veilig te houden, gebruikt de applicatie meestal de ", _jsx(_components.strong, { children: "client-inloggegevensflow" }), " om toegangstokens te verkrijgen."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Bij toegang tot andere diensten moet de applicatie mogelijk het toegangstoken in de aanvraagheader meegeven. We bespreken dit in de sectie \"Bescherm je API\"." }), "\n", _jsxs(_components.h3, { id: "applicaties-die-op-iot-apparaten-draaien", children: ["Applicaties die op IoT-apparaten draaien", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#applicaties-die-op-iot-apparaten-draaien", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "De applicatie draait op een IoT-apparaat (bijv. slimme thuisapparaten, wearables, enz.) en communiceert met de server via API's. Deze applicaties hebben de volgende kenmerken:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Afhankelijk van de capaciteit van het apparaat kan het een openbare of privé client zijn." }), "\n", _jsx(_components.li, { children: "De algemene authenticatiestroom kan afwijken van de stroom die we hebben besproken in de sectie \"OpenID Connect\" naargelang de capaciteit van het apparaat. Sommige apparaten hebben bijvoorbeeld misschien geen scherm voor gebruikers om hun inloggegevens in te voeren." }), "\n", _jsx(_components.li, { children: "Als het apparaat de gebruiker niet hoeft te identificeren, hoeft het mogelijk geen ID-tokens of gebruikersinformatie-uiteindes te gebruiken; in plaats daarvan kan het worden behandeld als een machine-to-machine (M2M) applicatie." }), "\n", _jsxs(_components.li, { children: ["Om de applicatie veilig te houden, kan de applicatie de ", _jsx(_components.strong, { children: "autorisatiecodeflow met PKCE (Proof Key for Code Exchange)" }), " voor gebruikersauthenticatie en verkrijgen van tokens of de ", _jsx(_components.strong, { children: "client-inloggegevensflow" }), " gebruiken om toegangstokens te verkrijgen."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Bij communicatie met de server moet het apparaat mogelijk het toegangstoken in de aanvraagheader meegeven. We bespreken dit in de sectie \"Bescherm je API\"." }), "\n", _jsxs(_components.h2, { id: "bescherm-je-api", children: ["Bescherm je API", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#bescherm-je-api", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Met OpenID Connect is het mogelijk de gebruiker te identificeren en gebruikersspecifieke gegevens op te halen via ", _jsx(_components.a, { href: "https://auth.wiki/id-token", children: "ID-tokens" }), " of ", _jsx(_components.a, { href: "https://auth.wiki/userinfo-endpoint", children: "gebruikersinformatie-uiteindes" }), ". Dit proces wordt authenticatie genoemd. Maar je wilt waarschijnlijk niet al je middelen blootstellen aan alle geauthentiseerde gebruikers, bijvoorbeeld dat alleen beheerders toegang hebben tot de gebruikersbeheerspagina."] }), "\n", _jsx(_components.p, { children: "Dit is waar autorisatie om de hoek komt kijken. Vergeet niet dat OAuth 2.0 een autorisatieframework is en OpenID Connect een identiteitslaag bovenop OAuth 2.0; wat betekent dat je ook OAuth 2.0 kunt gebruiken wanneer je OpenID Connect al hebt geïmplementeerd." }), "\n", _jsxs(_components.p, { children: ["Laten we het voorbeeld uit de sectie \"OAuth 2.0\" onthouden: MyApp wil toegang krijgen tot de Google Drive van de gebruiker. Het is niet praktisch om MyApp toegang te geven tot alle bestanden van de gebruiker in Google Drive. In plaats daarvan moet MyApp expliciet vermelden wat het wil benaderen (bijv. alleen-lezen toegang tot bestanden in een specifieke map). In OAuth 2.0-termen wordt dit een ", _jsx(_components.strong, { children: "domein (scope)" }), " genoemd."] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "Je kunt de term \"toestemming\" zien die door elkaar wordt gebruikt met \"domein\" in de context van OAuth 2.0 omdat \"domein\" soms dubbelzinnig is voor niet-technische gebruikers." }), "\n"] }), "\n", _jsx(_components.p, { children: "Wanneer de gebruiker toegang verleent aan MyApp, geeft de autorisatieserver een toegangstoken uit met het aangevraagde domein. Het toegangstoken wordt vervolgens naar de bronserver (Google Drive) gestuurd om toegang te krijgen tot de bestanden van de gebruiker." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant User\n participant MyApp\n participant Google\n\n User->>MyApp: Open MyApp en
klik op \"Verbind Google Drive\"\n MyApp->>Google: Doorverwijzen naar Google\n Google->>User: MyApp wil toegang krijgen tot je
Google Drive met \"alleen-lezen\" domein\n User->>Google: Oké, toegang verlenen aan MyApp\n Google->>MyApp: Doorverwijzen naar MyApp
met autorisatiedata (bijv. toegangstoken)\n MyApp->>Google: Toegang tot Google Drive van gebruiker
met toegangstoken en domein\n" }) }), "\n", _jsx(_components.p, { children: "Uiteraard kunnen we Google Drive vervangen door onze eigen API-services. Bijvoorbeeld, MyApp moet toegang krijgen tot de OrderService om de bestelgeschiedenis van de gebruiker op te halen. Deze keer, aangezien gebruikersauthenticatie al is uitgevoerd door de identity provider en zowel MyApp als OrderService onder onze controle staan, kunnen we overslaan om de gebruiker om toegang te laten verlenen; MyApp kan direct het verzoek naar OrderService sturen met het door de identity provider uitgegeven toegangstoken." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant User\n participant MyApp\n participant OrderService\n\n User->>MyApp: Open bestelgeschiedenis\n MyApp->>OrderService: Haal mijn bestelgeschiedenis op (met toegangstoken)\n OrderService->>MyApp: Retourneer bestelgeschiedenis\n MyApp->>User: Toon bestelgeschiedenis\n" }) }), "\n", _jsxs(_components.p, { children: ["Het toegangstoken kan een ", _jsx(_components.code, { children: "lees:order" }), " ", _jsx(_components.a, { href: "https://auth.wiki/scope", children: "domein" }), " bevatten om aan te geven dat de gebruiker zijn bestelgeschiedenis kan lezen."] }), "\n", _jsxs(_components.p, { children: ["Stel dat de gebruiker per ongeluk een URL van een beheerderspagina in de browser invoert. Aangezien de gebruiker geen beheerder is, is er geen ", _jsx(_components.code, { children: "admin" }), " domein in het toegangstoken. OrderService zal het verzoek afwijzen en een foutmelding retourneren."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant User\n participant MyApp\n participant OrderService\n\n User->>MyApp: Open beheerderspagina\n MyApp->>OrderService: Haal beheerderspagina op (met toegangstoken)\n OrderService->>MyApp: Fout: Toegang geweigerd\n MyApp->>User: Toon foutmelding\n" }) }), "\n", _jsx(_components.p, { children: "In dit geval kan OrderService een 403 Forbidden-statuscode retourneren om aan te geven dat de gebruiker geen toestemming heeft om toegang te krijgen tot de beheerderspagina." }), "\n", _jsx(_components.p, { children: "Voor machine-to-machine (M2M) applicaties is er geen gebruiker betrokken bij het proces. Applicaties kunnen rechtstreeks toegangstokens aanvragen bij de identity provider en deze gebruiken om toegang te krijgen tot andere diensten. Hetzelfde concept geldt: het toegangstoken bevat de noodzakelijke domeinen om toegang te krijgen tot de bronnen." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant MyApp\n participant OrderService\n\n MyApp->>OrderService: Haal alle bestellingen op (met toegangstoken)\n OrderService->>MyApp: Retourneer alle bestellingen\n" }) }), "\n", _jsxs(_components.h3, { id: "autorisatiedesign", children: ["Autorisatiedesign", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#autorisatiedesign", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["We kunnen zien dat er twee belangrijke zaken zijn om te overwegen bij het ontwerpen van ", _jsx(_components.a, { href: "https://auth.wiki/authorization", children: "autorisatie" }), " om je API-diensten te beschermen:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Domeinen" }), ": Definiëren wat de client kan benaderen. Domeinen kunnen fijnmazig zijn (bijv. ", _jsx(_components.code, { children: "lees:order" }), ", ", _jsx(_components.code, { children: "schrijf:order" }), ") of meer algemeen (bijv. ", _jsx(_components.code, { children: "order" }), ") afhankelijk van je vereisten."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Toegangscontrole" }), ": Definiëren wie specifieke domeinen kan hebben. Bijvoorbeeld, alleen beheerders kunnen het ", _jsx(_components.code, { children: "admin" }), " domein hebben."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Wat betreft ", _jsx(_components.a, { href: "https://auth.wiki/access-control", children: "toegangscontrole" }), ", een aantal populaire benaderingen zijn:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Rolgebaseerde toegangscontrole (RBAC)" }), ": Rollen aan gebruikers toewijzen en definieer welke rollen toegang tot welke bronnen kunnen krijgen. Bijvoorbeeld, een beheerdersrol kan toegang tot de beheerderspagina krijgen."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Attribuutgebaseerde toegangscontrole (ABAC)" }), ": Beleidsregels definiëren op basis van attributen (bijv. afdeling van de gebruiker, locatie, enz.) en toegangsbeslissingen nemen op basis van deze attributen. Bijvoorbeeld, een gebruiker van de afdeling \"Engineering\" kan toegang krijgen tot de engineeringspagina."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Het is vermeldenswaard dat voor beide benaderingen de standaardmanier voor het verifiëren van toegangscontrole is om de domeinen van het toegangstoken te controleren, in plaats van rollen of attributen. Rollen en attributen kunnen zeer dynamisch zijn en domeinen zijn statischer, waardoor het veel gemakkelijker te beheren is." }), "\n", _jsxs(_components.p, { children: ["Voor gedetailleerde informatie over toegangscontrole kun je verwijzen naar ", _jsx(_components.a, { href: "https://blog.logto.io/rbac-and-abac", children: "RBAC en ABAC: De toegangscontrolemodellen die je moet kennen" }), "."] }), "\n", _jsxs(_components.h3, { id: "toegangstokens", children: ["Toegangstokens", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#toegangstokens", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Hoewel we de term \"", _jsx(_components.a, { href: "https://auth.wiki/access-token", children: "toegangstoken" }), "\" vaak hebben genoemd, hebben we nog niet besproken hoe je er een verkrijgt. In OAuth 2.0 wordt een toegangstoken uitgegeven door de autorisatieserver (identity provider) na een succesvolle autorisatiestroom."] }), "\n", _jsx(_components.p, { children: "Laten we eens nauwkeuriger kijken naar het Google Drive-voorbeeld en aannemen dat we de autorisatiecode-flow gebruiken:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n autonumber\n participant User\n participant MyApp\n participant Google\n\n User->>MyApp: Open MyApp en
klik op \"Verbind Google Drive\"\n MyApp->>Google: Doorverwijzen naar Google\n Google->>User: Aanmelden bij Google\n User->>Google: Aanmelden\n Google->>User: Vragen om toestemming
om toegang te krijgen tot Google Drive\n User->>Google: Toegang verlenen aan MyApp\n Google->>MyApp: Doorverwijzen naar MyApp
met autorisatiedata (bijv. autorisatiecode)\n MyApp->>Google: Gebruik autorisatiecode om
te ruilen voor toegangstoken\n Google->>MyApp: Retourneer toegangstoken\n MyApp->>Google: Toegang tot Google Drive van gebruiker met toegangstoken\n" }) }), "\n", _jsx(_components.p, { children: "Er zijn enkele belangrijke stappen in de flow voor het uitgeven van toegangstokens:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Stap 2 (Doorverwijzen naar Google): MyApp verwijst de gebruiker naar Google met een ", _jsx(_components.strong, { children: "autorisatieverzoek" }), ". Meestal bevat dit verzoek de volgende informatie:", "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Welke client (MyApp) het verzoek initieert" }), "\n", _jsx(_components.li, { children: "Welke domeinen MyApp aanvraagt" }), "\n", _jsx(_components.li, { children: "Waar Google de gebruiker naartoe moet verwijzen nadat de autorisatie is voltooid" }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["Stap 5 (Vragen om toestemming om toegang te krijgen tot Google Drive): Google vraagt de gebruiker om toegang te verlenen aan MyApp. De gebruiker kan ervoor kiezen om toegang te verlenen of te weigeren. Deze stap wordt ", _jsx(_components.strong, { children: "toestemming (consent)" }), " genoemd."] }), "\n", _jsxs(_components.li, { children: ["Stap 7 (Doorverwijzen naar MyApp met autorisatiedata): Deze stap is nieuw geïntroduceerd in het diagram. In plaats van het toegangstoken direct te retourneren, geeft Google eenmalige ", _jsx(_components.strong, { children: "autorisatiecode" }), " aan MyApp voor een veiligere uitwisseling. Deze code wordt gebruikt om het toegangstoken te verkrijgen."] }), "\n", _jsxs(_components.li, { children: ["Stap 8 (Gebruik autorisatiecode om te ruilen voor toegangstoken): Dit is ook een nieuwe stap. MyApp verzendt de autorisatiecode naar Google om deze om te ruilen voor een toegangstoken. Als identity provider zal Google de context van het verzoek samenstellen en beslissen of het een toegangstoken uitgeeft:", "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "De client (MyApp) is wie hij beweert te zijn" }), "\n", _jsx(_components.li, { children: "De gebruiker heeft toegang verleend aan de client" }), "\n", _jsx(_components.li, { children: "De gebruiker is wie hij beweert te zijn" }), "\n", _jsx(_components.li, { children: "De gebruiker heeft de benodigde domeinen" }), "\n", _jsx(_components.li, { children: "De autorisatiecode is geldig en niet verlopen" }), "\n"] }), "\n"] }), "\n"] }), "\n", _jsx(_components.p, { children: "Het bovenstaande voorbeeld gaat ervan uit dat de autorisatieserver (identity provider) en de bronserver hetzelfde zijn (Google). Als ze gescheiden zijn, het voorbeeld van MyApp en OrderService nemend, zal de stroom er als volgt uitzien:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n autonumber\n participant User\n participant MyApp\n participant IdP as Identity provider (IdP)\n participant OrderService\n\n User->>MyApp: Open MyApp en
klik op \"Aanmelden\"\n MyApp->>IdP: Doorverwijzen naar IdP\n IdP->>User: Vragen om gebruikersnaam en wachtwoord\n User->>IdP: Gebruikersnaam en wachtwoord invoeren\n IdP->>IdP: Gebruiker authentiseren\n IdP->>MyApp: Doorverwijzen naar MyApp
met autorisatiedata (bijv. autorisatiecode)\n MyApp->>IdP: Gebruik autorisatiecode om
tokens te ruilen (ID-token, toegangstoken)\n IdP->>MyApp: Retourneer tokens\n MyApp->>OrderService: Haal mijn bestelgeschiedenis op (met toegangstoken)\n OrderService->>OrderService: Verifieer toegangstoken\n OrderService->>MyApp: Retourneer bestelgeschiedenis\n" }) }), "\n", _jsx(_components.p, { children: "In deze flow geeft de autorisatieserver (IdP) zowel een ID-token als een toegangstoken aan MyApp uit (stap 8). Het ID-token wordt gebruikt om de gebruiker te identificeren, en het toegangstoken wordt gebruikt om toegang te krijgen tot andere diensten zoals OrderService. Aangezien zowel MyApp als OrderService eerstelijnsservices zijn, vragen ze de gebruiker meestal niet om toegang te verlenen; in plaats daarvan vertrouwen ze op de toegangscontrole in de identity provider om te bepalen of de gebruiker toegang kan krijgen tot de bronnen (d.w.z. of het toegangstoken de noodzakelijke domeinen bevat)." }), "\n", _jsx(_components.p, { children: "Ten slotte, laten we eens kijken hoe het toegangstoken wordt gebruikt in machine-to-machine (M2M) applicaties. Aangezien er geen gebruiker betrokken is bij het proces en de applicatie vertrouwd is, kan het direct een toegangstoken aanvragen bij de identity provider:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n autonumber\n participant MyApp\n participant IdP as Identity provider (IdP)\n participant OrderService\n\n MyApp->>IdP: Vraag toegangstoken aan\n IdP->>MyApp: Retourneer toegangstoken\n MyApp->>OrderService: Haal alle bestellingen op (met toegangstoken)\n OrderService->>OrderService: Verifieer toegangstoken\n OrderService->>MyApp: Retourneer alle bestellingen\n" }) }), "\n", _jsx(_components.p, { children: "Toegangscontrole kan nog steeds worden toegepast. Voor OrderService maakt het niet uit wie de gebruiker is of welke applicatie de gegevens opvraagt; het is alleen geïnteresseerd in het toegangstoken en de domeinen die het bevat." }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: ["Toegangstokens worden meestal gecodeerd als JSON Web Tokens (JWT). Om meer te leren over JWT, kun je verwijzen naar ", _jsx(_components.a, { href: "https://blog.logto.io/what-is-jwt", children: "Wat is JSON Web Token (JWT)?" }), "."] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "bronindicatoren", children: ["Bronindicatoren", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#bronindicatoren", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "OAuth 2.0 introduceert het concept van domeinen voor toegangscontrole. Echter, je realiseert je misschien snel dat domeinen niet voldoende zijn:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["OpenID Connect definieert een set standaarddomeinen zoals ", _jsx(_components.code, { children: "openid" }), ", ", _jsx(_components.code, { children: "offline_access" }), " en ", _jsx(_components.code, { children: "profile" }), ". Het kan verwarrend zijn om deze standaarddomeinen te mengen met je aangepaste domeinen."] }), "\n", _jsx(_components.li, { children: "Je kunt meerdere API-services hebben die dezelfde domeinnaam delen maar verschillende betekenissen hebben." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Een veel voorkomende oplossing is om achtervoegsels (of voorvoegsels) toe te voegen aan de domeinnamen om de bron (API-service) aan te geven. Bijvoorbeeld, ", _jsx(_components.code, { children: "lees:order" }), " en ", _jsx(_components.code, { children: "lees:product" }), " zijn duidelijker dan ", _jsx(_components.code, { children: "lees" }), " en ", _jsx(_components.code, { children: "lees" }), ". Een OAuth 2.0-extensie ", _jsx(_components.a, { href: "https://tools.ietf.org/html/rfc8707", children: "RFC 8707" }), " introduceert een nieuwe parameter ", _jsx(_components.code, { children: "resource" }), " om de ", _jsx(_components.strong, { children: "bronserver" }), " aan te geven die de client wil benaderen."] }), "\n", _jsxs(_components.p, { children: ["In werkelijkheid worden API-services meestal gedefinieerd door URL's, dus het is natuurlijker om URL's te gebruiken als ", _jsx(_components.a, { href: "https://auth.wiki/resource-indicator", children: "bronindicatoren" }), ". Bijvoorbeeld, de OrderService API kan worden weergegeven als:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "https://api.example.com/orders\n" }) }), "\n", _jsxs(_components.p, { children: ["Zoals je kunt zien, biedt de parameter het gemak om de daadwerkelijke bron-URL's in de autorisatieverzoeken en toegangstokens te gebruiken. Het is vermeldenswaard dat RFC 8707 mogelijk niet door alle identity providers is geïmplementeerd. Je moet de documentatie van je identity provider controleren om te zien of deze de ", _jsx(_components.code, { children: "resource" }), "-parameter ondersteunt (Logto ondersteunt het)."] }), "\n", _jsxs(_components.p, { children: ["Kort gezegd, kan de ", _jsx(_components.code, { children: "resource" }), "-parameter worden gebruikt in autorisatieverzoeken en toegangstokens om de bron aan te geven die de client wil benaderen."] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: ["Er is geen beperking op de toegankelijkheid van de bronindicatoren, d.w.z. de bronindicator hoeft geen echte URL te zijn die verwijst naar een API-service. Daarom weerspiegelt de naam \"bronindicator\" zijn rol in het autorisatieproces adequaat. Je kunt virtuele URL's gebruiken om bronnen te vertegenwoordigen die je wilt beschermen. Bijvoorbeeld, je kunt een virtuele URL ", _jsx(_components.code, { children: "https://api.example.com/admin" }), " definiëren in je monolithische applicatie om de bron te vertegenwoordigen die alleen beheerders kunnen benaderen."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "breng-alles-samen", children: ["Breng alles samen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#breng-alles-samen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Op dit punt hebben we de basisprincipes van OAuth 2.0 en OpenID Connect behandeld, en hoe je ze kunt gebruiken in verschillende applicatietypen en scenario's. Hoewel we ze afzonderlijk hebben besproken, kun je ze combineren volgens je zakelijke vereisten. De algemene architectuur kan zo eenvoudig zijn als dit:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "flowchart LR\n MyApp --- IdP\n" }) }), "\n", _jsx(_components.p, { children: "Of iets complexer:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "flowchart LR\n WA[Webapplicatie] --- IdP[Identity provider]\n MA[Mobiele applicatie] --- IdP\n OS[OrderService] --- IdP\n AS[AdminService] --- IdP\n WA --- OS\n MA --- OS\n SA[Enkelvoudige pagina-applicatie] --- IdP\n SA --- AS\n OS --- AS\n" }) }), "\n", _jsx(_components.p, { children: "Naarmate je applicatie groeit, zul je zien dat de identity provider (IdP) een cruciale rol speelt in de architectuur; maar het heeft geen directe relatie met je zakelijke doelen. Hoewel het een goed idee is om het over te dragen aan een betrouwbare leverancier, moeten we de identity provider verstandig kiezen. Een goede identity provider kan het proces aanzienlijk vereenvoudigen, de ontwikkelingsinspanning verminderen en je behoeden voor potentiële beveiligingsvalkuilen." }), "\n", _jsxs(_components.h2, { id: "slotopmerkingen", children: ["Slotopmerkingen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#slotopmerkingen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Voor moderne cloudapplicaties is de identity provider (of autorisatieserver) de centrale plek voor gebruikers", _jsx(_components.a, { href: "https://auth.wiki/authentication", children: "authenticatie" }), ", ", _jsx(_components.a, { href: "https://auth.wiki/iam", children: "identiteitsbeheer" }), " en ", _jsx(_components.a, { href: "https://auth.wiki/access-control", children: "toegangscontrole" }), ". Hoewel we veel concepten in deze post hebben besproken, zijn er nog veel nuances om te overwegen bij het implementeren van zo'n systeem. Als je geïnteresseerd bent in meer leren, kun je onze blog doorbladeren voor meer diepgaande artikelen."] }), "\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."); }