"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "wat-is-iam", "hProperties": { "id": "wat-is-iam" } }, "depth": 2, "value": "Wat is IAM?" }, { "data": { "id": "authenticatie-vs-autorisatie", "hProperties": { "id": "authenticatie-vs-autorisatie" } }, "depth": 3, "value": "Authenticatie vs. autorisatie" }, { "data": { "id": "oauth", "hProperties": { "id": "oauth" } }, "depth": 2, "value": "OAuth" }, { "data": { "id": "openid-connect-oidc", "hProperties": { "id": "openid-connect-oidc" } }, "depth": 2, "value": "OpenID Connect (OIDC)" }, { "data": { "id": "voorbeeldscenario-log-in-met-google", "hProperties": { "id": "voorbeeldscenario-log-in-met-google" } }, "depth": 3, "value": "Voorbeeldscenario: \"Log in met Google\"" }, { "data": { "id": "saml", "hProperties": { "id": "saml" } }, "depth": 2, "value": "SAML" }, { "data": { "id": "hoe-vergelijkt-saml-zich-met-oidc", "hProperties": { "id": "hoe-vergelijkt-saml-zich-met-oidc" } }, "depth": 3, "value": "Hoe vergelijkt SAML zich met OIDC?" }, { "data": { "id": "single-sign-on-sso", "hProperties": { "id": "single-sign-on-sso" } }, "depth": 2, "value": "Single sign-on (SSO)" }, { "data": { "id": "hoe-werkt-sso", "hProperties": { "id": "hoe-werkt-sso" } }, "depth": 3, "value": "Hoe werkt SSO?" }, { "data": { "id": "voorbeeld-van-oidc-gebaseerde-sso", "hProperties": { "id": "voorbeeld-van-oidc-gebaseerde-sso" } }, "depth": 4, "value": "Voorbeeld van OIDC-gebaseerde SSO" }, { "data": { "id": "enterprise-sso", "hProperties": { "id": "enterprise-sso" } }, "depth": 3, "value": "Enterprise SSO" }, { "data": { "id": "voorbeeld-een-enterprise-sso-provider-toevoegen", "hProperties": { "id": "voorbeeld-een-enterprise-sso-provider-toevoegen" } }, "depth": 4, "value": "Voorbeeld: Een enterprise SSO-provider toevoegen" }, { "data": { "id": "jwt", "hProperties": { "id": "jwt" } }, "depth": 2, "value": "JWT" }, { "data": { "id": "samenvatting", "hProperties": { "id": "samenvatting" } }, "depth": 2, "value": "Samenvatting" }]; const readingTime = { "minutes": 6, "words": 1793, "text": "6 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", em: "em", h2: "h2", h3: "h3", h4: "h4", hr: "hr", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton, Note} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); if (!Note) _missingMdxReference("Note", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["Het domein van ", _jsx(_components.a, { href: "https://auth.wiki/iam", children: "identity- en access management (IAM)" }), " is de afgelopen jaren ingewikkelder geworden. De dure woorden als ", _jsx(_components.a, { href: "https://auth.wiki/oauth", children: "OAuth" }), ", ", _jsx(_components.a, { href: "https://auth.wiki/openid-connect", children: "OpenID Connect (OIDC)" }), ", ", _jsx(_components.a, { href: "https://auth.wiki/saml", children: "SAML" }), ", ", _jsx(_components.a, { href: "https://auth.wiki/single-sign-on", children: "SSO" }), " en ", _jsx(_components.a, { href: "https://auth.wiki/jwt", children: "JWT" }), " worden vaak gebruikt, maar wat betekenen ze? Hoe werken ze samen? Laten we deze concepten en frameworks verkennen om ze begrijpelijker en praktischer te maken."] }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Elk van deze protocollen en frameworks kan grondiger worden verkend. Dit artikel is bedoeld om een basisbegrip te bieden. Voor gedetailleerde inzichten over elk onderwerp, bezoek ", _jsx(_components.a, { href: "https://auth.wiki", children: "Auth Wiki" }), "."] }) }), "\n", _jsxs(_components.h2, { id: "wat-is-iam", children: ["Wat is IAM?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#wat-is-iam", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Identity- en access management (IAM) is een breed concept dat het beheren van digitale ", _jsx(_components.strong, { children: "identiteiten" }), " en het implementeren van ", _jsx(_components.strong, { children: "toegangscontrole" }), " omvat. De eerder genoemde frameworks en protocollen vallen binnen IAM, elk met specifieke uitdagingen in dit gebied."] }), "\n", _jsx(_components.p, { children: "In essentie gaat IAM over:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Identiteit" }), ": Een digitale representatie van een gebruiker, dienst of apparaat. Een identiteit omvat meestal attributen zoals naam, e-mail, rollen, enz., om de entiteit te beschrijven."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Toegang" }), ": Het vermogen om met bronnen te interageren, acties uit te voeren of diensten te gebruiken. Toegang definieert welke acties op welke bronnen kunnen worden uitgevoerd."] }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "graph LR\n subgraph User\n Name\n Email\n Role\n end\n\n API\n\n User -->|GET| API\n" }) }), "\n", _jsxs(_components.p, { children: ["In het diagram hierboven wil een gebruiker (identiteit) een ", _jsx(_components.code, { children: "GET" }), "-verzoek uitvoeren op een API (bron). De kenmerken van de gebruiker - naam, e-mail en rol - beschrijven de identiteit."] }), "\n", _jsxs(_components.h3, { id: "authenticatie-vs-autorisatie", children: ["Authenticatie vs. autorisatie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#authenticatie-vs-autorisatie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Authenticatie en autorisatie komen vaak samen voor in IAM-discussies. Laten we hun definities verduidelijken:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Authenticatie" }), ": Het proces van het verifiëren van het eigendom van een identiteit. Het beantwoordt de vraag: \"Welke identiteit bezit je?\""] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Autorisatie" }), ": Het proces van het bepalen welke acties een geauthenticeerde identiteit kan uitvoeren op een bron. Het beantwoordt de vraag: “Wat kun je doen?”"] }), "\n"] }), "\n", _jsx(Note, { title: "Wat is het verschil tussen autorisatie en toegangscontrole?", children: _jsxs(_components.p, { children: ["Autorisatie is een deelverzameling van toegangscontrole. Toegangscontrole is een breder concept dat autorisatie en andere beperkingen omvat. Voor meer details, zie ", _jsx(_components.a, { href: "https://auth.wiki/access-control", children: "toegangscontrole" }), "."] }) }), "\n", _jsx(_components.p, { children: "In het eerdere voorbeeld:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Voordat de gebruiker (identiteit) enige acties kan uitvoeren, moet hij of zij het ", _jsx(_components.strong, { children: "authenticatie" }), "-proces voltooien."] }), "\n", _jsxs(_components.li, { children: ["Na authenticatie moet het systeem bepalen of de gebruiker een ", _jsx(_components.code, { children: "GET" }), "-verzoek (actie) op de API (bron) kan uitvoeren, d.w.z. het ", _jsx(_components.strong, { children: "autorisatie" }), "-proces voltooien."] }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.p, { children: "Gewapend met deze basiskennis, laten we de andere acroniemen en protocollen ontcijferen." }), "\n", _jsxs(_components.h2, { id: "oauth", children: ["OAuth", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#oauth", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://auth.wiki/oauth-2.0", children: "OAuth 2.0" }), ", vaak simpelweg OAuth genoemd, is een ", _jsx(_components.strong, { children: "autorisatie" }), "-framework dat een applicatie in staat stelt toegang te krijgen tot beschermde bronnen op een andere applicatie (meestal namens een gebruiker)."] }), "\n", _jsxs(_components.p, { children: ["Stel je voor dat je een webapplicatie hebt genaamd ", _jsx(_components.em, { children: "MyApp" }), " die toegang wil tot de Google Drive van een gebruiker. In plaats van de gebruiker te vragen zijn Google Drive-inloggegevens te delen, kan ", _jsx(_components.em, { children: "MyApp" }), " OAuth 2.0 gebruiken om toestemming (", _jsx(_components.strong, { children: "autorisatie" }), ") van Google te vragen om toegang te krijgen tot de Drive van de gebruiker."] }), "\n", _jsx(_components.p, { children: "Hier is een vereenvoudigd diagram dat de OAuth-flow illustreert:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n autonumber\n actor User\n participant MyApp\n participant Google\n\n User->>MyApp: Open MyApp en
klik \"Verbind Google Drive\"\n MyApp->>Google: Redirect naar Google
met autorisatieverzoek\n Google->>User: Google login verzoek\n User->>Google: Inloggen\n Google->>User: Vraag om toestemming om
Google Drive te openen\n User->>Google: Verleen toegang aan MyApp\n Google->>MyApp: Redirect naar MyApp
met een toegangstoken\n MyApp->>Google: Gebruik toegangstoken om
Google Drive te openen\n" }) }), "\n", _jsx(_components.p, { children: "In deze flow:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.em, { children: "MyApp" }), " is de client (identiteit) die toegang vraagt tot Google Drive (bron)."] }), "\n", _jsxs(_components.li, { children: ["De gebruiker (bronhouder) verleent ", _jsx(_components.em, { children: "MyApp" }), " toestemming in stap 6, waarmee het ", _jsx(_components.strong, { children: "autorisatie" }), "-proces voltooid wordt."] }), "\n"] }), "\n", _jsx(Note, { children: _jsx(_components.p, { children: "OAuth 2.0 definieert niet hoe gebruikers zichzelf authenticeren bij Google (stappen 3 en 4). Dit aspect is aan de implementatie door Google." }) }), "\n", _jsxs(_components.p, { children: ["Een sleutelbegrip in OAuth 2.0 is het ", _jsx(_components.strong, { children: "toegangstoken" }), ", dat de client gebruikt om de autorisatie van de gebruiker te demonstreren bij het openen van bronnen. Voor diepere inzichten, zie ", _jsx(_components.a, { href: "https://auth.wiki/access-token", children: "toegangstoken" }), "."] }), "\n", _jsxs(_components.h2, { 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: [_jsx(_components.a, { href: "https://auth.wiki/openid-connect", children: "OpenID Connect (OIDC)" }), " is een ", _jsx(_components.strong, { children: "authenticatielaag" }), " gebouwd bovenop OAuth 2.0. Het voegt functies toe die specifiek zijn voor authenticatie, zoals ", _jsx(_components.a, { href: "https://auth.wiki/id-token", children: "ID-tokens" }), " en een ", _jsx(_components.a, { href: "https://auth.wiki/userinfo-endpoint", children: "UserInfo-eindpunt" }), ", waardoor het geschikt is voor zowel authenticatie als autorisatie."] }), "\n", _jsxs(_components.p, { children: ["Als we de OAuth-flow opnieuw bekijken, introduceert OIDC een ", _jsx(_components.strong, { children: "ID-token" }), ". Dit token bevat informatie over de geauthenticeerde gebruiker en stelt MyApp in staat om de identiteit van de gebruiker te verifiëren."] }), "\n", _jsxs(_components.h3, { id: "voorbeeldscenario-log-in-met-google", children: ["Voorbeeldscenario: \"Log in met Google\"", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#voorbeeldscenario-log-in-met-google", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Laten we een ander voorbeeld bekijken. Als MyApp gebruikers wil toestaan in te loggen met hun Google-accounts, verschuift het doel naar authenticatie in plaats van bronacces. In dit geval is OIDC beter geschikt. Zo ziet de OIDC-flow eruit:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n autonumber\n actor User\n participant MyApp\n participant Google\n\n User->>MyApp: Klik \"Log in met Google\"\n MyApp->>Google: Redirect met authenticatieverzoek\n Google->>User: Google login verzoek\n User->>Google: Inloggen\n Google->>User: Vraag toestemming om
gebruikersinformatie te delen\n User->>Google: Verleen toestemming\n Google->>MyApp: Redirect naar MyApp
met ID- en toegangstokens\n MyApp->>MyApp: Verifieer en extraheer gebruikers
informatie uit ID-token\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Belangrijk verschil" }), ": Naast een toegangstoken voorziet OIDC in een ", _jsx(_components.strong, { children: "ID-token" }), ", waarmee MyApp de gebruiker kan authentiseren zonder extra verzoeken in te dienen."] }), "\n", _jsxs(_components.p, { children: ["OIDC deelt OAuth 2.0's ", _jsx(_components.a, { href: "https://auth.wiki/oauth-2.0-grant", children: "grant" }), " definities, wat compatibiliteit en consistentie tussen de twee frameworks verzekert."] }), "\n", _jsxs(_components.h2, { id: "saml", children: ["SAML", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#saml", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://auth.wiki/saml", children: "Security Assertion Markup Language (SAML)" }), " is een XML-gebaseerd framework voor het uitwisselen van ", _jsx(_components.strong, { children: "authenticatie" }), "- en ", _jsx(_components.strong, { children: "autorisatie" }), "gegevens tussen partijen. SAML, geïntroduceerd in het begin van de jaren 2000, is breed aangenomen in bedrijfsomgevingen."] }), "\n", _jsxs(_components.h3, { id: "hoe-vergelijkt-saml-zich-met-oidc", children: ["Hoe vergelijkt SAML zich met OIDC?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#hoe-vergelijkt-saml-zich-met-oidc", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "SAML en OIDC zijn functioneel vergelijkbaar maar verschillen in hun implementatiedetails:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "SAML" }), ": Gebruikt XML-gebaseerde assertions en wordt vaak als complexer beschouwd."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "OIDC" }), ": Maakt gebruik van JSON en JWT, waardoor het lichter en gebruiksvriendelijker is voor ontwikkelaars."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Moderne applicaties geven vaak de voorkeur aan OIDC vanwege de eenvoud en flexibiliteit, maar SAML blijft veelvoorkomend in legacy systemen en bedrijfsgebruik." }), "\n", _jsxs(_components.h2, { id: "single-sign-on-sso", children: ["Single sign-on (SSO)", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#single-sign-on-sso", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://auth.wiki/sso", children: "Single sign-on (SSO)" }), " is een ", _jsx(_components.strong, { children: "authenticatieschema" }), " dat gebruikers in staat stelt meerdere applicaties en diensten te openen met één set inloggegevens. In plaats van afzonderlijk in te loggen bij elke applicatie, logt de gebruiker eenmalig in en krijgt toegang tot alle gekoppelde systemen."] }), "\n", _jsxs(_components.h3, { id: "hoe-werkt-sso", children: ["Hoe werkt SSO?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#hoe-werkt-sso", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["SSO vertrouwt op een centrale ", _jsx(_components.a, { href: "https://auth.wiki/identity-provider", children: "identity provider (IdP)" }), " om gebruikersidentiteiten te beheren. De IdP authenticiseert de gebruiker en biedt diensten zoals authenticatie en autorisatie aan gekoppelde applicaties."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "graph LR\n User --> AppA\n User --> AppB\n AppA <--> IdP[Identity Provider]\n AppB <--> IdP\n User -->|SSO| IdP\n" }) }), "\n", _jsx(_components.p, { children: "De IdP kan protocollen zoals OIDC, OAuth 2.0, SAML of andere gebruiken om deze diensten te bieden. Een enkele IdP kan meerdere protocollen ondersteunen om aan de verschillende behoeften van verschillende applicaties te voldoen." }), "\n", _jsxs(_components.h4, { id: "voorbeeld-van-oidc-gebaseerde-sso", children: ["Voorbeeld van OIDC-gebaseerde SSO", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#voorbeeld-van-oidc-gebaseerde-sso", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Laten we een voorbeeld van OIDC-gebaseerde SSO verkennen:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n actor User\n participant AppA\n participant AppB\n participant IdP\n\n User->>AppA: Toegang tot Applicatie A\n AppA->>IdP: Redirect naar IdP\n IdP->>User: Vraag om inloggegevens\n User->>IdP: Verstrek inloggegevens\n IdP->>AppA: Verstrek ID-token\n AppA->>User: Toegang verlenen\n User->>AppB: Toegang tot Applicatie B\n AppB->>IdP: Redirect naar IdP\n IdP->>IdP: Gebruiker al geauthenticeerd\n IdP->>AppB: Verstrek ID-token\n AppB->>User: Toegang verlenen\n" }) }), "\n", _jsx(_components.p, { children: "In deze flow logt de gebruiker eenmalig in op de IdP en wordt geauthenticeerd bij meerdere applicaties (AppA en AppB)." }), "\n", _jsxs(_components.h3, { id: "enterprise-sso", children: ["Enterprise SSO", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#enterprise-sso", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Hoewel SSO een breed concept is, kom je ook de term ", _jsx(_components.a, { href: "https://auth.wiki/enterprise-sso", children: "enterprise SSO" }), " tegen, die verwijst naar een specifiek type SSO ontworpen voor bedrijfsomgevingen (meestal voor werknemers en partners)."] }), "\n", _jsx(_components.p, { children: "Wanneer een klant SSO voor je applicatie aanvraagt, is het belangrijk om hun behoeften en de protocollen die ze gebruiken te verduidelijken. Meestal betekent dit dat voor specifieke e-maildomeinen je wil dat je applicatie gebruikers doorverwijst naar hun IdP (die enterprise SSO implementeert) voor authenticatie." }), "\n", _jsxs(_components.h4, { id: "voorbeeld-een-enterprise-sso-provider-toevoegen", children: ["Voorbeeld: Een enterprise SSO-provider toevoegen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#voorbeeld-een-enterprise-sso-provider-toevoegen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Hier is een vereenvoudigd voorbeeld van het integreren van een enterprise SSO-provider (Banana) met je applicatie (MyApp):" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n actor User\n participant MyApp\n participant IdP as MyApp IdP\n participant Banana as Banana IdP\n\n User->>MyApp: Klik \"Log in\"\n MyApp->>IdP: Redirect naar IdP\n IdP->>User: Vraag om inloggegevens\n User->>IdP: Voorzien Banana e-mail\n IdP->>Banana: Redirect naar Banana IdP\n Banana->>User: Vraag om inloggegevens\n User->>Banana: Voorzien inloggegevens\n Banana->>IdP: Verstrek antwoord\n IdP->>MyApp: Verstrek antwoord\n MyApp->>User: Toegang verlenen tot MyApp en toon gebruikersdata\n" }) }), "\n", _jsx(Note, { title: "Wist je dat?", children: _jsx(_components.p, { children: "Redirecten naar de IdP is een veelvoorkomend patroon in SSO-flows. Deze aanpak stelt de IdP in staat een centraal punt voor gebruikerssessies te behouden, terwijl ze authenticatie- en autorisatiediensten aan meerdere applicaties biedt." }) }), "\n", _jsxs(_components.h2, { id: "jwt", children: ["JWT", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#jwt", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://auth.wiki/jwt", children: "JSON Web Token (JWT)" }), " is een open standaard gedefinieerd in RFC 7519 die veilige communicatie tussen twee partijen mogelijk maakt. Het is het standaardformaat voor ID-tokens in OIDC en wordt veel gebruikt voor OAuth 2.0 toegangstokens."] }), "\n", _jsx(_components.p, { children: "Hier zijn de belangrijkste kenmerken van JWT:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Compact" }), ": JWT's zijn JSON-objecten die gecodeerd zijn in een compact formaat, waardoor ze gemakkelijk over te dragen en op te slaan zijn."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Zelfstandige" }), ": JWT's bevatten alle noodzakelijke informatie over de gebruiker en het token zelf."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Verifieerbaar en versleutelbaar" }), ": JWT's kunnen ondertekend en versleuteld worden om gegevensintegriteit en vertrouwelijkheid te verzekeren."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Een typisch JWT ziet er als volgt uit:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJmb28iLCJuYW1lIjoiSm9obiBEb2UifQ.XM-XSs2Lmp76IcTQ7tVdFcZzN4W_WcoKMNANp925Q9g\n" }) }), "\n", _jsx(_components.p, { children: "Dit JWT bestaat uit drie delen gescheiden door punten:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "{{header}}.{{payload}}.{{signature}}\n" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Header" }), ": Bevat metadata over het token, zoals het type token en het ondertekeningsalgoritme."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Payload" }), ": Bevat informatie over de identiteit en het token zelf."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Signature" }), ": Verifieert de integriteit van het token."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Zowel de header als de payload zijn base64-gecodeerde JSON-objecten. Het bovenstaande JWT kan als volgt worden gedecodeerd:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsonc", children: "// Header\n{\n \"alg\": \"HS256\",\n \"typ\": \"JWT\"\n}\n// Payload\n{\n \"sub\": \"foo\",\n \"name\": \"John Doe\"\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Met JWT kan de client het token decoderen en de gebruikersinformatie extraheren zonder aanvullende verzoeken aan de identiteitprovider in te dienen. Om meer te leren over JWT, bezoek ", _jsx(_components.a, { href: "https://auth.wiki/jwt", children: "JSON Web Token (JWT)" }), "."] }), "\n", _jsxs(_components.h2, { id: "samenvatting", children: ["Samenvatting", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#samenvatting", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "We hebben veel terrein behandeld in dit artikel. Laten we de belangrijkste punten samenvatten met een voorbeeld:" }), "\n", _jsxs(_components.p, { children: ["Stel je voor dat je een webapplicatie hebt, AppA, die een ", _jsx(_components.strong, { children: "identity- en access management (IAM)" }), "-oplossing vereist. Je kiest ", _jsx(_components.strong, { children: "Logto" }), ", een identity provider die ", _jsx(_components.strong, { children: "OpenID Connect (OIDC)" }), " gebruikt voor authenticatie. Omdat OIDC gebouwd is bovenop ", _jsx(_components.strong, { children: "OAuth 2.0" }), ", ondersteunt Logto ook autorisatie voor je applicatie."] }), "\n", _jsxs(_components.p, { children: ["Om wrijving voor je gebruikers te verminderen, stel je \"Log in met Google\" in binnen Logto. Dit gebruikt ", _jsx(_components.strong, { children: "OAuth 2.0" }), " om autorisatiegegevens en gebruikersinformatie uit te wisselen tussen Logto en Google."] }), "\n", _jsxs(_components.p, { children: ["Nadat de gebruiker inlogt op AppA via Logto, ontvangt AppA een ID-token, wat een ", _jsx(_components.strong, { children: "JSON Web Token (JWT)" }), " is dat informatie over de gebruiker bevat."] }), "\n", _jsxs(_components.p, { children: ["Naarmate je bedrijf groeit, lanceer je een nieuwe applicatie, AppB, die ook gebruikersauthenticatie nodig heeft. Aangezien Logto al is ingesteld, kun je dezelfde authenticatiestroom hergebruiken voor AppB. Je gebruikers kunnen nu inloggen op zowel AppA als AppB met één set inloggegevens, een functie die bekend staat als ", _jsx(_components.strong, { children: "single sign-on (SSO)" }), "."] }), "\n", _jsxs(_components.p, { children: ["Later vraagt een zakenpartner je om hun enterprise SSO-systeem te koppelen, dat ", _jsx(_components.strong, { children: "Security Assertion Markup Language (SAML)" }), " gebruikt. Je ontdekt dat Logto SAML-verbindingen ondersteunt, dus stel je een verbinding in tussen Logto en het SSO-systeem van de partner. Nu kunnen gebruikers van de organisatie van de partner ook inloggen op AppA en AppB met hun bestaande inloggegevens."] }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.p, { children: ["Ik hoop dat dit artikel deze concepten voor jou heeft verduidelijkt. Voor meer diepgaande uitleg en voorbeelden, bekijk ", _jsx(_components.a, { href: "https://auth.wiki", children: "Auth Wiki" }), ". Als je op zoek bent naar een IAM-oplossing voor je applicatie, overweeg dan een beheerde dienst zoals ", _jsx(_components.a, { href: "https://logto.io", children: "Logto" }), " te gebruiken om tijd en moeite te besparen."] }), "\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."); }