"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "johdanto", "hProperties": { "id": "johdanto" } }, "depth": 2, "value": "Johdanto" }, { "data": { "id": "edellytykset", "hProperties": { "id": "edellytykset" } }, "depth": 2, "value": "Edellytykset" }, { "data": { "id": "luo-logto-sovellus", "hProperties": { "id": "luo-logto-sovellus" } }, "depth": 2, "value": "Luo Logto-sovellus" }, { "data": { "id": "integrointi-logto-sdklla", "hProperties": { "id": "integrointi-logto-sdklla" } }, "depth": 2, "value": "Integrointi Logto SDK:lla" }, { "data": { "id": "asennus", "hProperties": { "id": "asennus" } }, "depth": 3, "value": "Asennus" }, { "data": { "id": "lisää-logto-autentikointimiddleware", "hProperties": { "id": "lisää-logto-autentikointimiddleware" } }, "depth": 3, "value": "Lisää Logto autentikointimiddleware" }, { "data": { "id": "kirjaudu-sisään", "hProperties": { "id": "kirjaudu-sisään" } }, "depth": 3, "value": "Kirjaudu sisään" }, { "data": { "id": "kirjaudu-ulos", "hProperties": { "id": "kirjaudu-ulos" } }, "depth": 3, "value": "Kirjaudu ulos" }, { "data": { "id": "toteuta-kirjautumis-uloskirjautumispainikkeet-razor-pages", "hProperties": { "id": "toteuta-kirjautumis-uloskirjautumispainikkeet-razor-pages" } }, "depth": 3, "value": "Toteuta kirjautumis-/uloskirjautumispainikkeet (Razor Pages)" }, { "data": { "id": "tarkistuspiste-aja-web-sovellus", "hProperties": { "id": "tarkistuspiste-aja-web-sovellus" } }, "depth": 2, "value": "Tarkistuspiste: Aja web-sovellus" }, { "data": { "id": "lisälukemista", "hProperties": { "id": "lisälukemista" } }, "depth": 2, "value": "Lisälukemista" }]; const readingTime = { "minutes": 3, "words": 770, "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: "johdanto", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#johdanto", children: _jsx(_components.span, { children: "#" }) }), "Johdanto"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://logto.io/", children: "Logto" }), " on moderni Auth0-vaihtoehto, jonka avulla voidaan rakentaa asiakasidentiteetti-infrastruktuuri vähäisellä vaivalla. Se tukee useita kirjautumismenetelmiä, kuten käyttäjänimi, sähköposti, puhelinnumero ja suositut sosiaalisen median kirjautumiset kuten Google ja GitHub."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://docs.microsoft.com/en-us/aspnet/core/", children: "ASP.NET Core" }), " on monialustainen, korkean suorituskyvyn avoimen lähdekoodin kehys nykyaikaisten, pilvipohjaisten, Internet-yhteyksien omaavien sovellusten rakentamiseen."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Tässä ohjeessa näytämme, kuinka voit rakentaa käyttäjän autentikointiprosessin ASP.NET Core:ssa integroimalla Logto SDK:n. Ohjaus käyttää C#:aa ohjelmointikielenä." }), "\n", _jsxs(_components.h2, { id: "edellytykset", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#edellytykset", children: _jsx(_components.span, { children: "#" }) }), "Edellytykset"] }), "\n", _jsx(_components.p, { children: "Ennen kuin aloitat, varmista, että sinulla on seuraavat:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Logto-tili. Jos sinulla ei ole sellaista, voit ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "rekisteröityä ilmaiseksi" }), "."] }), "\n", _jsxs(_components.li, { children: [".NET-kehitysympäristö ja ASP.NET Core -projekti. Jos sinulla ei ole sellaista, voit ", _jsx(_components.a, { href: "https://dotnet.microsoft.com/download", children: "asentaa .NET:n" }), " ja seurata ", _jsx(_components.a, { href: "https://dotnet.microsoft.com/en-us/apps/aspnet", children: "ASP.NET-ohjeita" }), " projektisi perustamiseksi."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "luo-logto-sovellus", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#luo-logto-sovellus", children: _jsx(_components.span, { children: "#" }) }), "Luo Logto-sovellus"] }), "\n", _jsx(_components.p, { children: "Aloittaaksesi, luo Logto-sovellus \"Perinteinen web\" -tyypillä. Seuraa näitä vaiheita luodaksesi Logto-sovelluksen:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Kirjaudu ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "Logto Console" }), "."] }), "\n", _jsxs(_components.li, { children: ["Vasemmanpuoleisesta navigointipalkista klikkaa ", _jsx(_components.strong, { children: "Sovellukset" }), "."] }), "\n", _jsxs(_components.li, { children: ["Klikkaa ", _jsx(_components.strong, { children: "Luo sovellus" }), "."] }), "\n", _jsx(_components.li, { children: "Avautuvalla sivulla etsi \"Perinteinen web -sovellus\" -osio ja etsi \"ASP.NET Core\" -kortti." }), "\n", _jsxs(_components.li, { children: ["Klikkaa ", _jsx(_components.strong, { children: "Aloita rakentaminen" }), ", ja syötä sovelluksesi nimi."] }), "\n", _jsxs(_components.li, { children: ["Klikkaa ", _jsx(_components.strong, { children: "Luo" }), "."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Tämän jälkeen sinulle esitetään interaktiivinen opastus, joka ohjaa sinut Logto SDK:n integroimisessa ASP.NET Core -sovelluksesi kanssa. Seuraava sisältö voi toimia viitteenä tulevaisuudessa." }), "\n", _jsx(LogtoCloudButton, { children: "Kokeile Logto Cloud:n interaktiivista ohjetta" }), "\n", _jsxs(_components.h2, { id: "integrointi-logto-sdklla", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#integrointi-logto-sdklla", children: _jsx(_components.span, { children: "#" }) }), "Integrointi Logto SDK:lla"] }), "\n", _jsxs(_components.h3, { id: "asennus", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#asennus", children: _jsx(_components.span, { children: "#" }) }), "Asennus"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "dotnet add package Logto.AspNetCore.Authentication\n" }) }), "\n", _jsxs(_components.p, { children: ["Huomaa, että tuettu minimiversio ASP.NET Core:sta on ", _jsx(_components.code, { children: "6.0" }), "."] }), "\n", _jsxs(_components.h3, { id: "lisää-logto-autentikointimiddleware", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#lisää-logto-autentikointimiddleware", children: _jsx(_components.span, { children: "#" }) }), "Lisää Logto autentikointimiddleware"] }), "\n", _jsxs(_components.p, { children: ["Avaa ", _jsx(_components.code, { children: "Startup.cs" }), " (tai ", _jsx(_components.code, { children: "Program.cs" }), ") ja lisää seuraava koodi rekisteröidäksesi Logto autentikointimiddleware:"] }), "\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: [_jsx(_components.code, { children: "AddLogtoAuthentication" }), "-metodi suorittaa seuraavat asiat:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Asettaa oletusautentikointijärjestelmän ", _jsx(_components.code, { children: "LogtoDefaults.CookieScheme" }), ":ksi."] }), "\n", _jsxs(_components.li, { children: ["Asettaa oletushaastejärjestelmän ", _jsx(_components.code, { children: "LogtoDefaults.AuthenticationScheme" }), ":ksi."] }), "\n", _jsxs(_components.li, { children: ["Asettaa oletuskirjautumisjärjestelmän ", _jsx(_components.code, { children: "LogtoDefaults.AuthenticationScheme" }), ":ksi."] }), "\n", _jsx(_components.li, { children: "Lisää eväste- ja OpenID Connect -autentikointikäsittelijät autentikointijärjestelmään." }), "\n"] }), "\n", _jsxs(_components.h3, { id: "kirjaudu-sisään", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#kirjaudu-sisään", children: _jsx(_components.span, { children: "#" }) }), "Kirjaudu sisään"] }), "\n", _jsxs(_components.p, { children: ["Lisää seuraava URI ", _jsx(_components.code, { children: "Uudelleenohjaus URI:t" }), " -listaan Logto-sovelluksen yksityiskohtien sivulla:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "http:///Callback\n" }) }), "\n", _jsxs(_components.p, { children: ["Kirjautuaksesi sisään Logto:lla, voit käyttää ", _jsx(_components.code, { children: "ChallengeAsync" }), "-metodia:"] }), "\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: [_jsx(_components.code, { children: "ChallengeAsync" }), "-metodi uudelleenohjaa käyttäjän Logto-kirjautumissivulle."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "RedirectUri" }), "-ominaisuutta käytetään ohjaamaan käyttäjä takaisin web-sovellukseesi autentikoinnin jälkeen. Huomaa, että se on eri asia kuin uudelleenohjaus URI, jonka asetit Logto-sovelluksen yksityiskohtien sivulla:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Uudelleenohjaus URI Logto-sovelluksen yksityiskohtien sivulla on URI, johon Logto ohjaa käyttäjän takaisin sen jälkeen, kun käyttäjä on kirjautunut sisään." }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "RedirectUri" }), "-ominaisuus on URI, johon ohjataan sen jälkeen, kun tarvittavat toimet on suoritettu Logto-autentikointimiddleware:ssä."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Toimintojen järjestys on 1 -> 2. Selkeyden vuoksi nimitämme uudelleenohjaus URI:ta Logto-sovelluksen yksityiskohtien sivulla ", _jsx(_components.strong, { children: "Logto uudelleenohjaus URI" }), " ja ", _jsx(_components.code, { children: "RedirectUri" }), "-ominaisuutta ", _jsx(_components.strong, { children: "sovelluksen uudelleenohjaus URI" }), ":ksi."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Logto uudelleenohjaus URI" }), ":lla on oletusarvo ", _jsx(_components.code, { children: "/Callback" }), ", jonka voit jättää sellaiseksi, jos erityisiä vaatimuksia ei ole. Jos haluat muuttaa sen, voit asettaa ", _jsx(_components.code, { children: "CallbackPath" }), "-ominaisuuden ", _jsx(_components.code, { children: "LogtoOptions" }), "-kohdassa:"] }), "\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: "Muista päivittää arvo Logto-sovelluksen yksityiskohtien sivulla vastaavasti." }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Ei tarvitse asettaa ", _jsx(_components.strong, { children: "sovelluksen uudelleenohjaus URI" }), ":a Logto-sovelluksen yksityiskohtien sivulla."] }) }), "\n", _jsxs(_components.h3, { id: "kirjaudu-ulos", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#kirjaudu-ulos", children: _jsx(_components.span, { children: "#" }) }), "Kirjaudu ulos"] }), "\n", _jsxs(_components.p, { children: ["Lisää seuraava URI ", _jsx(_components.code, { children: "Kirjautumisen jälkeinen uudelleenohjaus URI:t" }), " -listaan Logto-sovelluksen yksityiskohtien sivulla:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "http:///SignedOutCallback\n" }) }), "\n", _jsxs(_components.p, { children: ["Kirjautuaksesi ulos Logto:lla, voit käyttää ", _jsx(_components.code, { children: "SignOutAsync" }), "-metodia:"] }), "\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: [_jsx(_components.code, { children: "SignOutAsync" }), "-metodi tyhjentää autentikointievästeen ja uudelleenohjaa käyttäjän Logto-kirjautumissivulle."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "RedirectUri" }), "-ominaisuutta käytetään ohjaamaan käyttäjä takaisin web-sovellukseesi uloskirjautumisen jälkeen. Huomaa, että se on eri asia kuin kirjautumisen jälkeinen uudelleenohjaus URI, jonka asetit Logto-sovelluksen yksityiskohtien sivulla:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Kirjautumisen jälkeinen uudelleenohjaus URI Logto-sovelluksen yksityiskohtien sivulla on URI, johon Logto ohjaa käyttäjän takaisin sen jälkeen, kun käyttäjä on kirjautunut ulos." }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "RedirectUri" }), "-ominaisuus on URI, johon ohjataan sen jälkeen, kun tarvittavat toimet on suoritettu Logto-autentikointimiddleware:ssä."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Toimintojen järjestys on 1 -> 2. Selkeyden vuoksi nimitämme kirjautumisen jälkeistä uudelleenohjaus URI:ta Logto-sovelluksen yksityiskohtien sivulla ", _jsx(_components.strong, { children: "Logto kirjautumisen jälkeinen uudelleenohjaus URI" }), " ja ", _jsx(_components.code, { children: "RedirectUri" }), "-ominaisuutta ", _jsx(_components.strong, { children: "sovelluksen kirjautumisen jälkeinen uudelleenohjaus URI" }), ":ksi."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Logto kirjautumisen jälkeinen uudelleenohjaus URI" }), ":lla on oletusarvo ", _jsx(_components.code, { children: "/SignedOutCallback" }), ", jonka voit jättää sellaiseksi, jos erityisiä vaatimuksia ei ole. Jos haluat muuttaa sen, voit asettaa ", _jsx(_components.code, { children: "SignedOutCallbackPath" }), "-ominaisuuden ", _jsx(_components.code, { children: "LogtoOptions" }), "-kohdassa:"] }), "\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: "Muista päivittää arvo Logto-sovelluksen yksityiskohtien sivulla vastaavasti." }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Ei tarvitse asettaa ", _jsx(_components.strong, { children: "sovelluksen kirjautumisen jälkeinen uudelleenohjaus URI" }), ":a Logto-sovelluksen yksityiskohtien sivulla."] }) }), "\n", _jsxs(_components.h3, { id: "toteuta-kirjautumis-uloskirjautumispainikkeet-razor-pages", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#toteuta-kirjautumis-uloskirjautumispainikkeet-razor-pages", children: _jsx(_components.span, { children: "#" }) }), "Toteuta kirjautumis-/uloskirjautumispainikkeet (Razor Pages)"] }), "\n", _jsxs(_components.p, { children: ["Lisää ensin käsittelijämenetelmät ", _jsx(_components.code, { children: "PageModel" }), ":iin, esimerkiksi:"] }), "\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: "Lisää sitten painikkeet Razor-sivuusi (html):" }), "\n", _jsx("pre", { class: "language-html", children: _jsx("code", { children: `

On autentikoitu: @User.Identity?.IsAuthenticated

` }) }), "\n", _jsx(_components.p, { children: "Se näyttää \"Kirjaudu sisään\"-painikkeen, jos käyttäjä ei ole autentikoitu, ja \"Kirjaudu ulos\"-painikkeen, jos käyttäjä on autentikoitu." }), "\n", _jsxs(_components.h2, { id: "tarkistuspiste-aja-web-sovellus", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#tarkistuspiste-aja-web-sovellus", children: _jsx(_components.span, { children: "#" }) }), "Tarkistuspiste: Aja web-sovellus"] }), "\n", _jsx(_components.p, { children: "Nyt voit ajaa web-sovelluksen ja yrittää kirjautua sisään/ulos Logto:lla:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Avaa web-sovellus selaimessasi, sinun tulisi nähdä \"On autentikoitu: False\" ja \"Kirjaudu sisään\"-painike." }), "\n", _jsx(_components.li, { children: "Klikkaa \"Kirjaudu sisään\"-painiketta, ja sinut pitäisi ohjata Logto-kirjautumissivulle." }), "\n", _jsx(_components.li, { children: "Kirjauduttuasi sisään, sinut pitäisi ohjata takaisin web-sovellukseen, ja sinun pitäisi nähdä \"On autentikoitu: True\" ja \"Kirjaudu ulos\"-painike." }), "\n", _jsx(_components.li, { children: "Klikkaa \"Kirjaudu ulos\"-painiketta, ja sinut pitäisi ohjata Logto-kirjautumissivulle, ja sitten takaisin web-sovellukseen." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Jos kohtaat ongelmia integroinnin aikana, älä epäröi ottaa meihin yhteyttä sähköpostitse osoitteeseen ", _jsx(_components.a, { href: "mailto:contact@logto.io", children: "contact@logto.io" }), " tai ", _jsx(_components.a, { href: "https://discord.gg/UEPaF3j5e6", children: "liity Discord-palvelimeemme" }), "!"] }), "\n", _jsxs(_components.h2, { id: "lisälukemista", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#lisälukemista", children: _jsx(_components.span, { children: "#" }) }), "Lisälukemista"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/customize-sie/", children: "Mukauta sisäänkirjautumiskokemusta" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/configure-connectors/", children: "Määritä yhdistäjät" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/protect-your-api/", children: "Suojaa API:si" }) }), "\n"] }), "\n", _jsx(LogtoCloudButton, { children: "Kokeile Logtoa jo tänään" })] }); } 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."); }