"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": "vereisten", "hProperties": { "id": "vereisten" } }, "depth": 2, "value": "Vereisten" }, { "data": { "id": "maak-een-logto-applicatie", "hProperties": { "id": "maak-een-logto-applicatie" } }, "depth": 2, "value": "Maak een Logto applicatie" }, { "data": { "id": "integreren-met-logto-sdk", "hProperties": { "id": "integreren-met-logto-sdk" } }, "depth": 2, "value": "Integreren met Logto SDK" }, { "data": { "id": "installatie", "hProperties": { "id": "installatie" } }, "depth": 3, "value": "Installatie" }, { "data": { "id": "voeg-logto-authenticatiemiddleware-toe", "hProperties": { "id": "voeg-logto-authenticatiemiddleware-toe" } }, "depth": 3, "value": "Voeg Logto authenticatiemiddleware toe" }, { "data": { "id": "aanmelden", "hProperties": { "id": "aanmelden" } }, "depth": 3, "value": "Aanmelden" }, { "data": { "id": "afmelden", "hProperties": { "id": "afmelden" } }, "depth": 3, "value": "Afmelden" }, { "data": { "id": "implementeer-aanmeld-afmeldknoppen-razor-pages", "hProperties": { "id": "implementeer-aanmeld-afmeldknoppen-razor-pages" } }, "depth": 3, "value": "Implementeer aanmeld-/afmeldknoppen (Razor Pages)" }, { "data": { "id": "controlepunt-voer-de-webapplicatie-uit", "hProperties": { "id": "controlepunt-voer-de-webapplicatie-uit" } }, "depth": 2, "value": "Controlepunt: Voer de webapplicatie uit" }, { "data": { "id": "verdere-lectuur", "hProperties": { "id": "verdere-lectuur" } }, "depth": 2, "value": "Verdere lectuur" }]; const readingTime = { "minutes": 3, "words": 1046, "text": "3 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", ol: "ol", 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.h2, { id: "inleiding", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#inleiding", children: _jsx(_components.span, { children: "#" }) }), "Inleiding"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://logto.io/", children: "Logto" }), " is een modern Auth0-alternatief voor het bouwen van klantidentiteitsinfrastructuur met minimale inspanning. Het ondersteunt verschillende aanmeldmethoden, waaronder gebruikersnaam, e-mail, telefoonnummer en populaire sociale aanmeldingen zoals Google en GitHub."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://docs.microsoft.com/en-us/aspnet/core/", children: "ASP.NET Core" }), " is een cross-platform, high-performance, open-source framework voor het bouwen van moderne, cloud-gebaseerde, internet-verbonden applicaties."] }), "\n"] }), "\n", _jsx(_components.p, { children: "In deze handleiding laten we je zien hoe je een gebruikersauthenticatiestroom opzet met ASP.NET Core door de Logto SDK te integreren. De handleiding gebruikt C# als programmeertaal." }), "\n", _jsxs(_components.h2, { id: "vereisten", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#vereisten", children: _jsx(_components.span, { children: "#" }) }), "Vereisten"] }), "\n", _jsx(_components.p, { children: "Voordat je begint, zorg ervoor dat je het volgende hebt:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Een Logto-account. Als je er geen hebt, kun je ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "gratis aanmelden" }), "."] }), "\n", _jsxs(_components.li, { children: ["Een .NET-ontwikkelomgeving en een ASP.NET Core-project. Als je er geen hebt, kun je ", _jsx(_components.a, { href: "https://dotnet.microsoft.com/download", children: ".NET installeren" }), " en de ", _jsx(_components.a, { href: "https://dotnet.microsoft.com/en-us/apps/aspnet", children: "ASP.NET-tutorials" }), " volgen om je project in te stellen."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "maak-een-logto-applicatie", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#maak-een-logto-applicatie", children: _jsx(_components.span, { children: "#" }) }), "Maak een Logto applicatie"] }), "\n", _jsx(_components.p, { children: "Om te beginnen, maak een Logto applicatie aan met het type \"Traditionele webapp\". Volg deze stappen om een Logto applicatie aan te maken:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Meld je aan bij de ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "Logto Console" }), "."] }), "\n", _jsxs(_components.li, { children: ["Klik in de linkernavigatiebalk op ", _jsx(_components.strong, { children: "Applicaties" }), "."] }), "\n", _jsxs(_components.li, { children: ["Klik op ", _jsx(_components.strong, { children: "Maak applicatie aan" }), "."] }), "\n", _jsx(_components.li, { children: "Op de geopende pagina, vind de sectie \"Traditionele webapp\" en zoek de \"ASP.NET Core\"-kaart." }), "\n", _jsxs(_components.li, { children: ["Klik op ", _jsx(_components.strong, { children: "Start bouwen" }), " en voer de naam van je applicatie in."] }), "\n", _jsxs(_components.li, { children: ["Klik op ", _jsx(_components.strong, { children: "Maak aan" }), "."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Vervolgens zou je een interactieve tutorial moeten zien die je door het proces van het integreren van de Logto SDK met je ASP.NET Core-applicatie begeleidt. De volgende inhoud kan als referentie voor toekomstig gebruik dienen." }), "\n", _jsx(LogtoCloudButton, { children: "Probeer de interactieve tutorial van Logto Cloud" }), "\n", _jsxs(_components.h2, { id: "integreren-met-logto-sdk", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#integreren-met-logto-sdk", children: _jsx(_components.span, { children: "#" }) }), "Integreren met Logto SDK"] }), "\n", _jsxs(_components.h3, { id: "installatie", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#installatie", children: _jsx(_components.span, { children: "#" }) }), "Installatie"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "dotnet add package Logto.AspNetCore.Authentication\n" }) }), "\n", _jsxs(_components.p, { children: ["Let op, de minimaal ondersteunde versie van ASP.NET Core is ", _jsx(_components.code, { children: "6.0" }), "."] }), "\n", _jsxs(_components.h3, { id: "voeg-logto-authenticatiemiddleware-toe", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#voeg-logto-authenticatiemiddleware-toe", children: _jsx(_components.span, { children: "#" }) }), "Voeg Logto authenticatiemiddleware toe"] }), "\n", _jsxs(_components.p, { children: ["Open ", _jsx(_components.code, { children: "Startup.cs" }), " (of ", _jsx(_components.code, { children: "Program.cs" }), ") en voeg de volgende code toe om Logto authenticatiemiddleware te registreren:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-csharp", children: "using Logto.AspNetCore.Authentication;\n\nvar builder = WebApplication.CreateBuilder(args);\n\nbuilder.Services.AddLogtoAuthentication(options =>\n{\n options.Endpoint = builder.Configuration[\"Logto:Endpoint\"]!;\n options.AppId = builder.Configuration[\"Logto:AppId\"]!;\n options.AppSecret = builder.Configuration[\"Logto:AppSecret\"];\n});\n\napp.UseAuthentication();\n" }) }), "\n", _jsxs(_components.p, { children: ["De ", _jsx(_components.code, { children: "AddLogtoAuthentication" }), "-methode zal het volgende doen:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["De standaard authenticatieregel instellen op ", _jsx(_components.code, { children: "LogtoDefaults.CookieScheme" }), "."] }), "\n", _jsxs(_components.li, { children: ["De standaard uitdaging regel instellen op ", _jsx(_components.code, { children: "LogtoDefaults.AuthenticationScheme" }), "."] }), "\n", _jsxs(_components.li, { children: ["De standaard uitlog regel instellen op ", _jsx(_components.code, { children: "LogtoDefaults.AuthenticationScheme" }), "."] }), "\n", _jsx(_components.li, { children: "Cookie- en OpenID Connect-authenticatiehandlers toevoegen aan de authenticatieregel." }), "\n"] }), "\n", _jsxs(_components.h3, { id: "aanmelden", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#aanmelden", children: _jsx(_components.span, { children: "#" }) }), "Aanmelden"] }), "\n", _jsxs(_components.p, { children: ["Voeg de volgende URI toe aan de lijst ", _jsx(_components.code, { children: "Redirect URIs" }), " op de Logto applicatie details pagina:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "http:///Callback\n" }) }), "\n", _jsxs(_components.p, { children: ["Om aan te melden met Logto, kun je de ", _jsx(_components.code, { children: "ChallengeAsync" }), "-methode gebruiken:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-csharp", children: "await HttpContext.ChallengeAsync(new AuthenticationProperties\n{\n RedirectUri = \"/\"\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["De ", _jsx(_components.code, { children: "ChallengeAsync" }), "-methode zal de gebruiker naar de Logto aanmeldpagina leiden."] }), "\n", _jsxs(_components.p, { children: ["De ", _jsx(_components.code, { children: "RedirectUri" }), "-eigenschap wordt gebruikt om de gebruiker terug naar je webapplicatie te leiden na authenticatie. Let op, het is verschillend van de redirect URI die je geconfigureerd hebt op de Logto applicatie details pagina:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "De redirect URI op de Logto applicatie details pagina is de URI waar Logto de gebruiker naar terugleidt nadat de gebruiker zich heeft aangemeld." }), "\n", _jsxs(_components.li, { children: ["De ", _jsx(_components.code, { children: "RedirectUri" }), "-eigenschap is de URI waar naar teruggeleid wordt nadat de benodigde acties in de Logto authenticatiemiddleware zijn uitgevoerd."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["De volgorde van de acties is 1 -> 2. Voor de duidelijkheid noemen we de redirect URI op de Logto applicatie details pagina de ", _jsx(_components.strong, { children: "Logto redirect URI" }), " en de ", _jsx(_components.code, { children: "RedirectUri" }), "-eigenschap de ", _jsx(_components.strong, { children: "applicatie redirect URI" }), "."] }), "\n", _jsxs(_components.p, { children: ["De ", _jsx(_components.strong, { children: "Logto redirect URI" }), " heeft een standaardwaarde van ", _jsx(_components.code, { children: "/Callback" }), ", die je kunt laten zoals die is als er geen speciale vereiste is. Als je het wilt wijzigen, kun je de ", _jsx(_components.code, { children: "CallbackPath" }), "-eigenschap voor ", _jsx(_components.code, { children: "LogtoOptions" }), " instellen:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-csharp", children: "builder.Services.AddLogtoAuthentication(options =>\n{\n options.CallbackPath = \"/SomeOtherCallbackPath\";\n});\n" }) }), "\n", _jsx(_components.p, { children: "Denk eraan de waarde op de Logto applicatie details pagina dienovereenkomstig bij te werken." }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Het is niet nodig de ", _jsx(_components.strong, { children: "applicatie redirect URI" }), " in te stellen op de Logto applicatie details pagina."] }) }), "\n", _jsxs(_components.h3, { id: "afmelden", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#afmelden", children: _jsx(_components.span, { children: "#" }) }), "Afmelden"] }), "\n", _jsxs(_components.p, { children: ["Voeg de volgende URI toe aan de lijst ", _jsx(_components.code, { children: "Post sign-out redirect URIs" }), " op de Logto applicatie details pagina:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "http:///SignedOutCallback\n" }) }), "\n", _jsxs(_components.p, { children: ["Om af te melden met Logto, kun je de ", _jsx(_components.code, { children: "SignOutAsync" }), "-methode gebruiken:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-csharp", children: "await HttpContext.SignOutAsync(new AuthenticationProperties\n{\n RedirectUri = \"/\"\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["De ", _jsx(_components.code, { children: "SignOutAsync" }), "-methode zal de authenticatiecookie wissen en de gebruiker naar de Logto afmeldpagina leiden."] }), "\n", _jsxs(_components.p, { children: ["De ", _jsx(_components.code, { children: "RedirectUri" }), "-eigenschap wordt gebruikt om de gebruiker terug naar je webapplicatie te leiden na afmelding. Let op, het is verschillend van de post sign-out redirect URI die je hebt geconfigureerd op de Logto applicatie details pagina:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "De post sign-out redirect URI op de Logto applicatie details pagina is de URI waar Logto de gebruiker naar terugleidt nadat de gebruiker zich heeft afgemeld." }), "\n", _jsxs(_components.li, { children: ["De ", _jsx(_components.code, { children: "RedirectUri" }), "-eigenschap is de URI waar naar teruggeleid wordt nadat de benodigde acties in de Logto authenticatiemiddleware zijn uitgevoerd."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["De volgorde van de acties is 1 -> 2. Voor de duidelijkheid noemen we de post sign-out redirect URI op de Logto applicatie details pagina de ", _jsx(_components.strong, { children: "Logto post sign-out redirect URI" }), " en de ", _jsx(_components.code, { children: "RedirectUri" }), "-eigenschap de ", _jsx(_components.strong, { children: "applicatie post sign-out redirect URI" }), "."] }), "\n", _jsxs(_components.p, { children: ["De ", _jsx(_components.strong, { children: "Logto post sign-out redirect URI" }), " heeft een standaardwaarde van ", _jsx(_components.code, { children: "/SignedOutCallback" }), ", die je kunt laten zoals die is als er geen speciale vereiste is. Als je het wilt wijzigen, kun je de ", _jsx(_components.code, { children: "SignedOutCallbackPath" }), "-eigenschap voor ", _jsx(_components.code, { children: "LogtoOptions" }), " instellen:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-csharp", children: "builder.Services.AddLogtoAuthentication(options =>\n{\n options.SignedOutCallbackPath = \"/SomeOtherSignedOutCallbackPath\";\n});\n" }) }), "\n", _jsx(_components.p, { children: "Denk eraan de waarde op de Logto applicatie details pagina dienovereenkomstig bij te werken." }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Het is niet nodig de ", _jsx(_components.strong, { children: "applicatie post sign-out redirect URI" }), " in te stellen op de Logto applicatie details pagina."] }) }), "\n", _jsxs(_components.h3, { id: "implementeer-aanmeld-afmeldknoppen-razor-pages", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementeer-aanmeld-afmeldknoppen-razor-pages", children: _jsx(_components.span, { children: "#" }) }), "Implementeer aanmeld-/afmeldknoppen (Razor Pages)"] }), "\n", _jsxs(_components.p, { children: ["Voeg eerst de handler-methodes toe aan je ", _jsx(_components.code, { children: "PageModel" }), ", bijvoorbeeld:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-csharp", children: "public class IndexModel : PageModel\n{\n public async Task OnPostSignInAsync()\n {\n await HttpContext.ChallengeAsync(new AuthenticationProperties\n {\n RedirectUri = \"/\"\n });\n }\n\n public async Task OnPostSignOutAsync()\n {\n await HttpContext.SignOutAsync(new AuthenticationProperties\n {\n RedirectUri = \"/\"\n });\n }\n}\n" }) }), "\n", _jsx(_components.p, { children: "Voeg vervolgens de knoppen toe aan je Razor-pagina (html):" }), "\n", _jsx("pre", { class: "language-html", children: _jsx("code", { children: `

Is authenticated: @User.Identity?.IsAuthenticated

` }) }), "\n", _jsx(_components.p, { children: "Het toont de knop \"Log in\" als de gebruiker niet is geauthenticeerd, en toont de knop \"Log uit\" als de gebruiker is geauthenticeerd." }), "\n", _jsxs(_components.h2, { id: "controlepunt-voer-de-webapplicatie-uit", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#controlepunt-voer-de-webapplicatie-uit", children: _jsx(_components.span, { children: "#" }) }), "Controlepunt: Voer de webapplicatie uit"] }), "\n", _jsx(_components.p, { children: "Nu kun je de webapplicatie uitvoeren en proberen aan te melden/af te melden met Logto:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Open de webapplicatie in je browser, je zou \"Is authenticated: False\" en de \"Log in\"-knop moeten zien." }), "\n", _jsx(_components.li, { children: "Klik op de \"Log in\"-knop, en je zou naar de Logto aanmeldpagina moeten worden geleid." }), "\n", _jsx(_components.li, { children: "Nadat je je hebt aangemeld, zou je terug naar de webapplicatie moeten worden geleid, en je zou \"Is authenticated: True\" en de \"Log uit\"-knop moeten zien." }), "\n", _jsx(_components.li, { children: "Klik op de \"Log uit\"-knop, en je zou naar de Logto afmeldpagina moeten worden geleid, en vervolgens terug naar de webapplicatie worden geleid." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Als je problemen ondervindt tijdens de integratie, aarzel dan niet om contact met ons op te nemen via e-mail op ", _jsx(_components.a, { href: "mailto:contact@logto.io", children: "contact@logto.io" }), " of ", _jsx(_components.a, { href: "https://discord.gg/UEPaF3j5e6", children: "word lid van onze Discord-server" }), "!"] }), "\n", _jsxs(_components.h2, { id: "verdere-lectuur", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#verdere-lectuur", children: _jsx(_components.span, { children: "#" }) }), "Verdere lectuur"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/customize-sie/", children: "Pas aanmeldervaring aan" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/configure-connectors/", children: "Configureer connectors" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/protect-your-api/", children: "Bescherm je API" }) }), "\n"] }), "\n", _jsx(LogtoCloudButton, { children: "Probeer Logto Vandaag" })] }); } 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."); }