"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introduktion", "hProperties": { "id": "introduktion" } }, "depth": 2, "value": "Introduktion" }, { "data": { "id": "förutsättningar", "hProperties": { "id": "förutsättningar" } }, "depth": 2, "value": "Förutsättningar" }, { "data": { "id": "skapa-en-logto-applikation", "hProperties": { "id": "skapa-en-logto-applikation" } }, "depth": 2, "value": "Skapa en Logto-applikation" }, { "data": { "id": "integrera-med-logto-sdk", "hProperties": { "id": "integrera-med-logto-sdk" } }, "depth": 2, "value": "Integrera med Logto SDK" }, { "data": { "id": "installation", "hProperties": { "id": "installation" } }, "depth": 3, "value": "Installation" }, { "data": { "id": "lägg-till-logto-autentiseringsmiddleware", "hProperties": { "id": "lägg-till-logto-autentiseringsmiddleware" } }, "depth": 3, "value": "Lägg till Logto-autentiseringsmiddleware" }, { "data": { "id": "logga-in", "hProperties": { "id": "logga-in" } }, "depth": 3, "value": "Logga in" }, { "data": { "id": "logga-ut", "hProperties": { "id": "logga-ut" } }, "depth": 3, "value": "Logga ut" }, { "data": { "id": "implementera-inloggnings-utloggningsknappar-razor-pages", "hProperties": { "id": "implementera-inloggnings-utloggningsknappar-razor-pages" } }, "depth": 3, "value": "Implementera inloggnings-/utloggningsknappar (Razor Pages)" }, { "data": { "id": "kontrollpunkt-kör-webbapplikationen", "hProperties": { "id": "kontrollpunkt-kör-webbapplikationen" } }, "depth": 2, "value": "Kontrollpunkt: Kör webbapplikationen" }, { "data": { "id": "vidare-läsning", "hProperties": { "id": "vidare-läsning" } }, "depth": 2, "value": "Vidare läsning" }]; const readingTime = { "minutes": 3, "words": 930, "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: "introduktion", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduktion", children: _jsx(_components.span, { children: "#" }) }), "Introduktion"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://logto.io/", children: "Logto" }), " är ett modernt alternativ till Auth0 för att bygga kundidentitetsinfrastruktur med minimal ansträngning. Det stöder olika inloggningsmetoder, inklusive användarnamn, e-post, telefonnummer och populära sociala inloggningar som Google och GitHub."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://docs.microsoft.com/en-us/aspnet/core/", children: "ASP.NET Core" }), " är ett plattformsoberoende, högpresterande och öppen källkod-ramverk för att bygga moderna, molnbaserade, internetanslutna applikationer."] }), "\n"] }), "\n", _jsx(_components.p, { children: "I denna handledning kommer vi att visa hur du bygger ett användarautentiseringsflöde med ASP.NET Core genom att integrera Logto SDK. Handledningen använder C# som programmeringsspråk." }), "\n", _jsxs(_components.h2, { id: "förutsättningar", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#förutsättningar", children: _jsx(_components.span, { children: "#" }) }), "Förutsättningar"] }), "\n", _jsx(_components.p, { children: "Innan du börjar, se till att du har följande:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Ett Logto-konto. Om du inte har ett kan du ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "registrera dig gratis" }), "."] }), "\n", _jsxs(_components.li, { children: ["En .NET-utvecklingsmiljö och ett ASP.NET Core-projekt. Om du inte har ett kan du ", _jsx(_components.a, { href: "https://dotnet.microsoft.com/download", children: "installera .NET" }), " och följa ", _jsx(_components.a, { href: "https://dotnet.microsoft.com/en-us/apps/aspnet", children: "ASP.NET-handledningarna" }), " för att ställa in ditt projekt."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "skapa-en-logto-applikation", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#skapa-en-logto-applikation", children: _jsx(_components.span, { children: "#" }) }), "Skapa en Logto-applikation"] }), "\n", _jsx(_components.p, { children: "För att komma igång, skapa en Logto-applikation med typen \"Traditionell web\". Följ dessa steg för att skapa en Logto-applikation:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Logga in på ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "Logto Console" }), "."] }), "\n", _jsxs(_components.li, { children: ["I den vänstra navigeringslisten, klicka på ", _jsx(_components.strong, { children: "Applikationer" }), "."] }), "\n", _jsxs(_components.li, { children: ["Klicka på ", _jsx(_components.strong, { children: "Skapa applikation" }), "."] }), "\n", _jsx(_components.li, { children: "På den öppnade sidan, hitta sektionen \"Traditionell webbapplikation\" och leta upp \"ASP.NET Core\"-kortet." }), "\n", _jsxs(_components.li, { children: ["Klicka på ", _jsx(_components.strong, { children: "Börja bygga" }), " och ange namnet på din applikation."] }), "\n", _jsxs(_components.li, { children: ["Klicka på ", _jsx(_components.strong, { children: "Skapa" }), "."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Sedan bör du se en interaktiv handledning som vägleder dig genom processen att integrera Logto SDK med din ASP.NET Core-applikation. Följande innehåll kan användas som en referens för framtida bruk." }), "\n", _jsx(LogtoCloudButton, { children: "Prova Logto Clouds interaktiva handledning" }), "\n", _jsxs(_components.h2, { id: "integrera-med-logto-sdk", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#integrera-med-logto-sdk", children: _jsx(_components.span, { children: "#" }) }), "Integrera med 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: ["Observera att den minsta stödda versionen av ASP.NET Core är ", _jsx(_components.code, { children: "6.0" }), "."] }), "\n", _jsxs(_components.h3, { id: "lägg-till-logto-autentiseringsmiddleware", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#lägg-till-logto-autentiseringsmiddleware", children: _jsx(_components.span, { children: "#" }) }), "Lägg till Logto-autentiseringsmiddleware"] }), "\n", _jsxs(_components.p, { children: ["Öppna ", _jsx(_components.code, { children: "Startup.cs" }), " (eller ", _jsx(_components.code, { children: "Program.cs" }), ") och lägg till följande kod för att registrera Logto-autentiseringsmiddleware:"] }), "\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: ["Metoden ", _jsx(_components.code, { children: "AddLogtoAuthentication" }), " kommer att utföra följande saker:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Ställ in standardschemat för autentisering till ", _jsx(_components.code, { children: "LogtoDefaults.CookieScheme" }), "."] }), "\n", _jsxs(_components.li, { children: ["Ställ in standardutmaningsschemat till ", _jsx(_components.code, { children: "LogtoDefaults.AuthenticationScheme" }), "."] }), "\n", _jsxs(_components.li, { children: ["Ställ in standard utloggningsschemat till ", _jsx(_components.code, { children: "LogtoDefaults.AuthenticationScheme" }), "."] }), "\n", _jsx(_components.li, { children: "Lägg till cookie och OpenID Connect-autentiseringshanterare till autentiseringsschemat." }), "\n"] }), "\n", _jsxs(_components.h3, { id: "logga-in", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#logga-in", children: _jsx(_components.span, { children: "#" }) }), "Logga in"] }), "\n", _jsxs(_components.p, { children: ["Lägg till följande URI i listan över ", _jsx(_components.code, { children: "Omdirigerings-URI:er" }), " på Logto-applikationens detaljsida:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "http:///Callback\n" }) }), "\n", _jsxs(_components.p, { children: ["För att logga in med Logto, kan du använda metoden ", _jsx(_components.code, { children: "ChallengeAsync" }), ":"] }), "\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: ["Metoden ", _jsx(_components.code, { children: "ChallengeAsync" }), " kommer att omdirigera användaren till Logtos inloggningssida."] }), "\n", _jsxs(_components.p, { children: ["Egenskapen ", _jsx(_components.code, { children: "RedirectUri" }), " används för att omdirigera användaren tillbaka till din webbapplikation efter autentisering. Observera att den är annorlunda än den omdirigerings-URI du konfigurerade på Logto-applikationens detaljsida:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Omdirigerings-URI:n på Logto-applikationens detaljsida är den URI som Logto kommer att omdirigera användaren tillbaka till efter att användaren har loggat in." }), "\n", _jsxs(_components.li, { children: ["Egenskapen ", _jsx(_components.code, { children: "RedirectUri" }), " är den URI som kommer att omdirigeras till efter nödvändiga åtgärder har vidtagits i Logto-autentiseringsmiddleware."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Ordningen av åtgärderna är 1 -> 2. För tydlighetens skull, låt oss kalla omdirigerings-URI:n på Logto-applikationens detaljsida för ", _jsx(_components.strong, { children: "Logto omdirigerings-URI" }), " och egenskapen ", _jsx(_components.code, { children: "RedirectUri" }), " för ", _jsx(_components.strong, { children: "applikationsomdirigerings-URI" }), "."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Logto omdirigerings-URI" }), " har ett standardvärde på ", _jsx(_components.code, { children: "/Callback" }), ", som du kan lämna som den är om det inte finns något särskilt krav. Om du vill ändra det, kan du ställa in ", _jsx(_components.code, { children: "CallbackPath" }), "-egenskapen för ", _jsx(_components.code, { children: "LogtoOptions" }), ":"] }), "\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: "Kom ihåg att uppdatera värdet på Logto-applikationens detaljsida därefter." }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Inget behov av att ställa in ", _jsx(_components.strong, { children: "applikationsomdirigerings-URI" }), " på Logto-applikationens detaljsida."] }) }), "\n", _jsxs(_components.h3, { id: "logga-ut", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#logga-ut", children: _jsx(_components.span, { children: "#" }) }), "Logga ut"] }), "\n", _jsxs(_components.p, { children: ["Lägg till följande URI i listan över ", _jsx(_components.code, { children: "Omdirigerings-URI:er efter utloggning" }), " på Logto-applikationens detaljsida:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "http:///SignedOutCallback\n" }) }), "\n", _jsxs(_components.p, { children: ["För att logga ut med Logto, kan du använda metoden ", _jsx(_components.code, { children: "SignOutAsync" }), ":"] }), "\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: ["Metoden ", _jsx(_components.code, { children: "SignOutAsync" }), " kommer att rensa autentiseringscookien och omdirigera användaren till Logtos utloggningssida."] }), "\n", _jsxs(_components.p, { children: ["Egenskapen ", _jsx(_components.code, { children: "RedirectUri" }), " används för att omdirigera användaren tillbaka till din webbapplikation efter utloggning. Observera att den är annorlunda än omdirigerings-URI:n efter utloggning som du konfigurerade på Logto-applikationens detaljsida:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Omdirigerings-URI:n efter utloggning på Logto-applikationens detaljsida är den URI som Logto kommer att omdirigera användaren tillbaka till efter att användaren har loggat ut." }), "\n", _jsxs(_components.li, { children: ["Egenskapen ", _jsx(_components.code, { children: "RedirectUri" }), " är den URI som kommer att omdirigeras till efter nödvändiga åtgärder har vidtagits i Logto-autentiseringsmiddleware."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Ordningen av åtgärderna är 1 -> 2. För tydlighetens skull, låt oss kalla omdirigerings-URI:n efter utloggning på Logto-applikationens detaljsida för ", _jsx(_components.strong, { children: "Logto omdirigerings-URI efter utloggning" }), " och egenskapen ", _jsx(_components.code, { children: "RedirectUri" }), " för ", _jsx(_components.strong, { children: "applikationsomdirigerings-URI efter utloggning" }), "."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Logto omdirigerings-URI efter utloggning" }), " har ett standardvärde på ", _jsx(_components.code, { children: "/SignedOutCallback" }), ", som du kan lämna som den är om det inte finns något särskilt krav. Om du vill ändra det, kan du ställa in ", _jsx(_components.code, { children: "SignedOutCallbackPath" }), "-egenskapen för ", _jsx(_components.code, { children: "LogtoOptions" }), ":"] }), "\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: "Kom ihåg att uppdatera värdet på Logto-applikationens detaljsida därefter." }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Inget behov av att ställa in ", _jsx(_components.strong, { children: "applikationsomdirigerings-URI efter utloggning" }), " på Logto-applikationens detaljsida."] }) }), "\n", _jsxs(_components.h3, { id: "implementera-inloggnings-utloggningsknappar-razor-pages", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementera-inloggnings-utloggningsknappar-razor-pages", children: _jsx(_components.span, { children: "#" }) }), "Implementera inloggnings-/utloggningsknappar (Razor Pages)"] }), "\n", _jsxs(_components.p, { children: ["Först, lägg till hanteringsmetoderna till din ", _jsx(_components.code, { children: "PageModel" }), ", till exempel:"] }), "\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: "Sedan, lägg till knapparna på din Razor-sida (html):" }), "\n", _jsx("pre", { class: "language-html", children: _jsx("code", { children: `

Is authenticated: @User.Identity?.IsAuthenticated

` }) }), "\n", _jsx(_components.p, { children: "Det kommer visa \"Sign in\"-knappen om användaren inte är autentiserad, och visa \"Sign out\"-knappen om användaren är autentiserad." }), "\n", _jsxs(_components.h2, { id: "kontrollpunkt-kör-webbapplikationen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#kontrollpunkt-kör-webbapplikationen", children: _jsx(_components.span, { children: "#" }) }), "Kontrollpunkt: Kör webbapplikationen"] }), "\n", _jsx(_components.p, { children: "Nu kan du köra webbapplikationen och försöka logga in/logga ut med Logto:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Öppna webbapplikationen i din webbläsare, du bör se \"Is authenticated: False\" och \"Sign in\"-knappen." }), "\n", _jsx(_components.li, { children: "Klicka på \"Sign in\"-knappen, och du bör bli omdirigerad till Logtos inloggningssida." }), "\n", _jsx(_components.li, { children: "Efter att du har loggat in bör du bli omdirigerad tillbaka till webbapplikationen, och du bör se \"Is authenticated: True\" och \"Sign out\"-knappen." }), "\n", _jsx(_components.li, { children: "Klicka på \"Sign out\"-knappen, och du bör bli omdirigerad till Logtos utloggningssida, och sedan omdirigerad tillbaka till webbapplikationen." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Om du stöter på några problem under integrationen, tveka inte att kontakta oss via e-post på ", _jsx(_components.a, { href: "mailto:contact@logto.io", children: "contact@logto.io" }), " eller ", _jsx(_components.a, { href: "https://discord.gg/UEPaF3j5e6", children: "gå med i vår Discord-server" }), "!"] }), "\n", _jsxs(_components.h2, { id: "vidare-läsning", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#vidare-läsning", children: _jsx(_components.span, { children: "#" }) }), "Vidare läsning"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/customize-sie/", children: "Anpassa inloggningsupplevelse" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/configure-connectors/", children: "Konfigurera anslutare" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/protect-your-api/", children: "Skydda ditt API" }) }), "\n"] }), "\n", _jsx(LogtoCloudButton, { children: "Prova Logto idag" })] }); } 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."); }