"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "einleitung", "hProperties": { "id": "einleitung" } }, "depth": 2, "value": "Einleitung" }, { "data": { "id": "voraussetzungen", "hProperties": { "id": "voraussetzungen" } }, "depth": 2, "value": "Voraussetzungen" }, { "data": { "id": "erstellen-sie-eine-logto-anwendung", "hProperties": { "id": "erstellen-sie-eine-logto-anwendung" } }, "depth": 2, "value": "Erstellen Sie eine Logto-Anwendung" }, { "data": { "id": "integration-mit-logto-sdk", "hProperties": { "id": "integration-mit-logto-sdk" } }, "depth": 2, "value": "Integration mit Logto SDK" }, { "data": { "id": "installation", "hProperties": { "id": "installation" } }, "depth": 3, "value": "Installation" }, { "data": { "id": "fügen-sie-logto-authentifizierung-middleware-hinzu", "hProperties": { "id": "fügen-sie-logto-authentifizierung-middleware-hinzu" } }, "depth": 3, "value": "Fügen Sie Logto Authentifizierung Middleware hinzu" }, { "data": { "id": "anmeldung", "hProperties": { "id": "anmeldung" } }, "depth": 3, "value": "Anmeldung" }, { "data": { "id": "abmeldung", "hProperties": { "id": "abmeldung" } }, "depth": 3, "value": "Abmeldung" }, { "data": { "id": "implementieren-sie-anmelde-abmelde-buttons-razor-pages", "hProperties": { "id": "implementieren-sie-anmelde-abmelde-buttons-razor-pages" } }, "depth": 3, "value": "Implementieren Sie Anmelde-/Abmelde-Buttons (Razor Pages)" }, { "data": { "id": "kontrollpunkt-führen-sie-die-webanwendung-aus", "hProperties": { "id": "kontrollpunkt-führen-sie-die-webanwendung-aus" } }, "depth": 2, "value": "Kontrollpunkt: Führen Sie die Webanwendung aus" }, { "data": { "id": "weiterführende-literatur", "hProperties": { "id": "weiterführende-literatur" } }, "depth": 2, "value": "Weiterführende Literatur" }]; const readingTime = { "minutes": 3, "words": 1017, "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: "einleitung", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#einleitung", children: _jsx(_components.span, { children: "#" }) }), "Einleitung"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://logto.io/", children: "Logto" }), " ist eine moderne Alternative zu Auth0 für den Aufbau von kundenorientierter Identitätsinfrastruktur mit minimalem Aufwand. Es unterstützt verschiedene Anmeldemethoden, einschließlich Benutzername, E-Mail, Telefonnummer und beliebte soziale Anmeldungen wie Google und GitHub."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://docs.microsoft.com/de-de/aspnet/core/", children: "ASP.NET Core" }), " ist ein plattformübergreifendes, leistungsstarkes, Open-Source-Framework zum Erstellen moderner, cloudbasierter, internetverbundener Anwendungen."] }), "\n"] }), "\n", _jsx(_components.p, { children: "In diesem Tutorial zeigen wir Ihnen, wie Sie einen Benutzerauthentifizierungsfluss mit ASP.NET Core erstellen, indem Sie das Logto SDK integrieren. Das Tutorial verwendet C# als Programmiersprache." }), "\n", _jsxs(_components.h2, { id: "voraussetzungen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#voraussetzungen", children: _jsx(_components.span, { children: "#" }) }), "Voraussetzungen"] }), "\n", _jsx(_components.p, { children: "Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Ein Logto-Konto. Wenn Sie keins haben, können Sie sich ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "kostenlos anmelden" }), "."] }), "\n", _jsxs(_components.li, { children: ["Eine .NET-Entwicklungsumgebung und ein ASP.NET Core-Projekt. Wenn Sie keins haben, können Sie .NET ", _jsx(_components.a, { href: "https://dotnet.microsoft.com/download", children: "installieren" }), " und den ", _jsx(_components.a, { href: "https://dotnet.microsoft.com/de-de/apps/aspnet", children: "ASP.NET-Tutorials" }), " folgen, um Ihr Projekt einzurichten."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "erstellen-sie-eine-logto-anwendung", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#erstellen-sie-eine-logto-anwendung", children: _jsx(_components.span, { children: "#" }) }), "Erstellen Sie eine Logto-Anwendung"] }), "\n", _jsx(_components.p, { children: "Um zu beginnen, erstellen Sie eine Logto-Anwendung mit dem Typ \"Traditionelles Web\". Befolgen Sie diese Schritte, um eine Logto-Anwendung zu erstellen:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Melden Sie sich bei der ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "Logto-Konsole" }), " an."] }), "\n", _jsxs(_components.li, { children: ["Klicken Sie in der linken Navigationsleiste auf ", _jsx(_components.strong, { children: "Anwendungen" }), "."] }), "\n", _jsxs(_components.li, { children: ["Klicken Sie auf ", _jsx(_components.strong, { children: "Anwendung erstellen" }), "."] }), "\n", _jsx(_components.li, { children: "Auf der geöffneten Seite finden Sie den Abschnitt \"Traditionelle Web-App\" und sehen die Karte \"ASP.NET Core\"." }), "\n", _jsxs(_components.li, { children: ["Klicken Sie auf ", _jsx(_components.strong, { children: "Erstellen starten" }), " und geben Sie den Namen Ihrer Anwendung ein."] }), "\n", _jsxs(_components.li, { children: ["Klicken Sie auf ", _jsx(_components.strong, { children: "Erstellen" }), "."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Danach sollten Sie ein interaktives Tutorial sehen, das Sie durch den Prozess der Integration von Logto SDK in Ihre ASP.NET Core-Anwendung führt. Der folgende Inhalt kann für eine zukünftige Referenz dienen." }), "\n", _jsx(LogtoCloudButton, { children: "Versuchen Sie das interaktive Tutorial von Logto Cloud" }), "\n", _jsxs(_components.h2, { id: "integration-mit-logto-sdk", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#integration-mit-logto-sdk", children: _jsx(_components.span, { children: "#" }) }), "Integration mit Logto SDK"] }), "\n", _jsxs(_components.h3, { id: "installation", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#installation", children: _jsx(_components.span, { children: "#" }) }), "Installation"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "dotnet add package Logto.AspNetCore.Authentication\n" }) }), "\n", _jsxs(_components.p, { children: ["Hinweis: Die Mindestversion von ASP.NET Core, die unterstützt wird, ist ", _jsx(_components.code, { children: "6.0" }), "."] }), "\n", _jsxs(_components.h3, { id: "fügen-sie-logto-authentifizierung-middleware-hinzu", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#fügen-sie-logto-authentifizierung-middleware-hinzu", children: _jsx(_components.span, { children: "#" }) }), "Fügen Sie Logto Authentifizierung Middleware hinzu"] }), "\n", _jsxs(_components.p, { children: ["Öffnen Sie ", _jsx(_components.code, { children: "Startup.cs" }), " (oder ", _jsx(_components.code, { children: "Program.cs" }), ") und fügen Sie den folgenden Code hinzu, um die Logto Authentifizierung Middleware zu registrieren:"] }), "\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: ["Die ", _jsx(_components.code, { children: "AddLogtoAuthentication" }), " Methode wird folgendes tun:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Setzen Sie das Standard-Authentifierungsschema auf ", _jsx(_components.code, { children: "LogtoDefaults.CookieScheme" }), "."] }), "\n", _jsxs(_components.li, { children: ["Setzen Sie das Standard-Herausforderungsschema auf ", _jsx(_components.code, { children: "LogtoDefaults.AuthenticationScheme" }), "."] }), "\n", _jsxs(_components.li, { children: ["Setzen Sie das Standard-Abmelde-Schema auf ", _jsx(_components.code, { children: "LogtoDefaults.AuthenticationScheme" }), "."] }), "\n", _jsx(_components.li, { children: "Fügen Sie Cookie- und OpenID Connect-Authentifizierungshandlern dem Authentifizierungsschema hinzu." }), "\n"] }), "\n", _jsxs(_components.h3, { id: "anmeldung", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#anmeldung", children: _jsx(_components.span, { children: "#" }) }), "Anmeldung"] }), "\n", _jsxs(_components.p, { children: ["Fügen Sie die folgende URI zur Liste der ", _jsx(_components.code, { children: "Redirect URIs" }), " in der Detailseite der Logto-Anwendung hinzu:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "http:///Callback\n" }) }), "\n", _jsxs(_components.p, { children: ["Um sich mit Logto anzumelden, können Sie die ", _jsx(_components.code, { children: "ChallengeAsync" }), " Methode verwenden:"] }), "\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: ["Die ", _jsx(_components.code, { children: "ChallengeAsync" }), " Methode leitet den Benutzer zur Anmeldeseite von Logto um."] }), "\n", _jsxs(_components.p, { children: ["Die ", _jsx(_components.code, { children: "RedirectUri" }), " Eigenschaft wird verwendet, um den Benutzer nach der Authentifizierung zurück zu Ihrer Webanwendung zu leiten. Beachten Sie, dass es sich von der Weiterleitungs-URI unterscheidet, die Sie auf der Detailseite der Logto-Anwendung konfiguriert haben:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Die Weiterleitungs-URI auf der Detailseite der Logto-Anwendung ist die URI, zu der Logto den Benutzer nach der Anmeldung umleitet." }), "\n", _jsxs(_components.li, { children: ["Die ", _jsx(_components.code, { children: "RedirectUri" }), " Eigenschaft ist die URI, die umgeleitet wird, nachdem die notwendigen Aktionen in der Logto Authentifizierungs-Middleware durchgeführt wurden."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Die Reihenfolge der Aktionen ist 1 -> 2. Zur Klarheit nennen wir die Weiterleitungs-URI auf der Detailseite der Logto-Anwendung die ", _jsx(_components.strong, { children: "Logto Weiterleitungs-URI" }), " und die ", _jsx(_components.code, { children: "RedirectUri" }), " Eigenschaft die ", _jsx(_components.strong, { children: "Anwendungsweiterleitungs-URI" }), "."] }), "\n", _jsxs(_components.p, { children: ["Die ", _jsx(_components.strong, { children: "Logto Weiterleitungs-URI" }), " hat einen Standardwert von ", _jsx(_components.code, { children: "/Callback" }), ", den Sie so belassen können, wenn es keine besonderen Anforderungen gibt. Wenn Sie es ändern möchten, können Sie die ", _jsx(_components.code, { children: "CallbackPath" }), " Eigenschaft für ", _jsx(_components.code, { children: "LogtoOptions" }), " einstellen:"] }), "\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: "Vergessen Sie nicht, den Wert auf der Detailseite der Logto-Anwendung entsprechend zu aktualisieren." }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Es ist nicht notwendig, die ", _jsx(_components.strong, { children: "Anwendungsweiterleitungs-URI" }), " auf der Detailseite der Logto-Anwendung einzustellen."] }) }), "\n", _jsxs(_components.h3, { id: "abmeldung", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#abmeldung", children: _jsx(_components.span, { children: "#" }) }), "Abmeldung"] }), "\n", _jsxs(_components.p, { children: ["Fügen Sie die folgende URI zur Liste der ", _jsx(_components.code, { children: "Post sign-out redirect URIs" }), " auf der Detailseite der Logto-Anwendung hinzu:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "http:///SignedOutCallback\n" }) }), "\n", _jsxs(_components.p, { children: ["Um sich mit Logto abzumelden, können Sie die ", _jsx(_components.code, { children: "SignOutAsync" }), " Methode verwenden:"] }), "\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: ["Die ", _jsx(_components.code, { children: "SignOutAsync" }), " Methode löscht das Authentifizierungs-Cookie und leitet den Benutzer zur Abmeldeseite von Logto um."] }), "\n", _jsxs(_components.p, { children: ["Die ", _jsx(_components.code, { children: "RedirectUri" }), " Eigenschaft wird verwendet, um den Benutzer nach der Abmeldung zurück zu Ihrer Webanwendung zu leiten. Beachten Sie, dass es sich von der Umleitungs-URI nach Abmeldung unterscheidet, die Sie auf der Detailseite der Logto-Anwendung konfiguriert haben:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Die Weiterleitungs-URI nach Abmeldung auf der Detailseite der Logto-Anwendung ist die URI, zu der Logto den Benutzer nach der Abmeldung umleitet." }), "\n", _jsxs(_components.li, { children: ["Die ", _jsx(_components.code, { children: "RedirectUri" }), " Eigenschaft ist die URI, die umgeleitet wird, nachdem die notwendigen Aktionen in der Logto Authentifizierungs-Middleware durchgeführt wurden."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Die Reihenfolge der Aktionen ist 1 -> 2. Zur Klarheit nennen wir die Weiterleitungs-URI nach Abmeldung auf der Detailseite der Logto-Anwendung die ", _jsx(_components.strong, { children: "Logto Weiterleitungs-URI nach Abmeldung" }), " und die ", _jsx(_components.code, { children: "RedirectUri" }), " Eigenschaft die ", _jsx(_components.strong, { children: "Anwendungs-Weiterleitungs-URI nach Abmeldung" }), "."] }), "\n", _jsxs(_components.p, { children: ["Die ", _jsx(_components.strong, { children: "Logto Weiterleitungs-URI nach Abmeldung" }), " hat einen Standardwert von ", _jsx(_components.code, { children: "/SignedOutCallback" }), ", den Sie so belassen können, wenn es keine besonderen Anforderungen gibt. Wenn Sie es ändern möchten, können Sie die ", _jsx(_components.code, { children: "SignedOutCallbackPath" }), " Eigenschaft für ", _jsx(_components.code, { children: "LogtoOptions" }), " einstellen:"] }), "\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: "Vergessen Sie nicht, den Wert auf der Detailseite der Logto-Anwendung entsprechend zu aktualisieren." }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Es ist nicht notwendig, die ", _jsx(_components.strong, { children: "Anwendungs-Weiterleitungs-URI nach Abmeldung" }), " auf der Detailseite der Logto-Anwendung einzustellen."] }) }), "\n", _jsxs(_components.h3, { id: "implementieren-sie-anmelde-abmelde-buttons-razor-pages", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementieren-sie-anmelde-abmelde-buttons-razor-pages", children: _jsx(_components.span, { children: "#" }) }), "Implementieren Sie Anmelde-/Abmelde-Buttons (Razor Pages)"] }), "\n", _jsxs(_components.p, { children: ["Zunächst fügen Sie die Handler-Methoden zu Ihrem ", _jsx(_components.code, { children: "PageModel" }), " hinzu, zum Beispiel:"] }), "\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: "Dann fügen Sie die Buttons zu Ihrer Razor-Seite (html) hinzu:" }), "\n", _jsx("pre", { class: "language-html", children: _jsx("code", { children: `

Ist authentifiziert: @User.Identity?.IsAuthenticated

` }) }), "\n", _jsx(_components.p, { children: "Es zeigt den \"Anmelden\"-Button an, wenn der Benutzer nicht authentifiziert ist, und den \"Abmelden\"-Button, wenn der Benutzer authentifiziert ist." }), "\n", _jsxs(_components.h2, { id: "kontrollpunkt-führen-sie-die-webanwendung-aus", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#kontrollpunkt-führen-sie-die-webanwendung-aus", children: _jsx(_components.span, { children: "#" }) }), "Kontrollpunkt: Führen Sie die Webanwendung aus"] }), "\n", _jsx(_components.p, { children: "Jetzt können Sie die Webanwendung ausführen und versuchen, sich mit Logto an- und abzumelden:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Öffnen Sie die Webanwendung in Ihrem Browser, Sie sollten \"Ist authentifiziert: False\" und den \"Anmelden\"-Button sehen." }), "\n", _jsx(_components.li, { children: "Klicken Sie auf den \"Anmelden\"-Button und Sie sollten zur Anmeldeseite von Logto umgeleitet werden." }), "\n", _jsx(_components.li, { children: "Nachdem Sie sich angemeldet haben, sollten Sie zurück zur Webanwendung umgeleitet werden und Sie sollten \"Ist authentifiziert: True\" und den \"Abmelden\"-Button sehen." }), "\n", _jsx(_components.li, { children: "Klicken Sie auf den \"Abmelden\"-Button und Sie sollten zur Abmeldeseite von Logto umgeleitet werden und dann zurück zur Webanwendung." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Wenn Sie während der Integration auf Probleme stoßen, zögern Sie nicht, uns per E-Mail unter ", _jsx(_components.a, { href: "mailto:contact@logto.io", children: "contact@logto.io" }), " zu kontaktieren oder ", _jsx(_components.a, { href: "https://discord.gg/UEPaF3j5e6", children: "unserem Discord-Server beizutreten" }), "!"] }), "\n", _jsxs(_components.h2, { id: "weiterführende-literatur", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#weiterführende-literatur", children: _jsx(_components.span, { children: "#" }) }), "Weiterführende Literatur"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/customize-sie/", children: "Anmeldungserlebnis anpassen" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/configure-connectors/", children: "Konfigurieren von Connectors" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/protect-your-api/", children: "Schützen Sie Ihre API" }) }), "\n"] }), "\n", _jsx(LogtoCloudButton, { children: "Versuchen Sie noch heute Logto" })] }); } 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."); }