"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introduzione", "hProperties": { "id": "introduzione" } }, "depth": 2, "value": "Introduzione" }, { "data": { "id": "prerequisiti", "hProperties": { "id": "prerequisiti" } }, "depth": 2, "value": "Prerequisiti" }, { "data": { "id": "creare-unapplicazione-logto", "hProperties": { "id": "creare-unapplicazione-logto" } }, "depth": 2, "value": "Creare un'applicazione Logto" }, { "data": { "id": "integrare-con-lsdk-logto", "hProperties": { "id": "integrare-con-lsdk-logto" } }, "depth": 2, "value": "Integrare con l'SDK Logto" }, { "data": { "id": "installazione", "hProperties": { "id": "installazione" } }, "depth": 3, "value": "Installazione" }, { "data": { "id": "aggiungi-il-middleware-di-autenticazione-logto", "hProperties": { "id": "aggiungi-il-middleware-di-autenticazione-logto" } }, "depth": 3, "value": "Aggiungi il middleware di autenticazione Logto" }, { "data": { "id": "accesso", "hProperties": { "id": "accesso" } }, "depth": 3, "value": "Accesso" }, { "data": { "id": "disconnessione", "hProperties": { "id": "disconnessione" } }, "depth": 3, "value": "Disconnessione" }, { "data": { "id": "implementa-i-pulsanti-di-accessodisconnessione-pagine-razor", "hProperties": { "id": "implementa-i-pulsanti-di-accessodisconnessione-pagine-razor" } }, "depth": 3, "value": "Implementa i pulsanti di accesso/disconnessione (Pagine Razor)" }, { "data": { "id": "punto-di-controllo-esegui-lapplicazione-web", "hProperties": { "id": "punto-di-controllo-esegui-lapplicazione-web" } }, "depth": 2, "value": "Punto di controllo: Esegui l'applicazione web" }, { "data": { "id": "letture-ulteriori", "hProperties": { "id": "letture-ulteriori" } }, "depth": 2, "value": "Letture ulteriori" }]; const readingTime = { "minutes": 3, "words": 1045, "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: "introduzione", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduzione", children: _jsx(_components.span, { children: "#" }) }), "Introduzione"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://logto.io/", children: "Logto" }), " è un'alternativa moderna ad Auth0 per la costruzione dell'infrastruttura di identità del cliente con minimo sforzo. Supporta vari metodi di accesso, compresi username, email, numero di telefono e accessi social popolari come Google e GitHub."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://docs.microsoft.com/it-it/aspnet/core/", children: "ASP.NET Core" }), " è un framework open source, ad alte prestazioni e multi piattaforma per la costruzione di applicazioni moderne, basate su cloud e connesse a Internet."] }), "\n"] }), "\n", _jsx(_components.p, { children: "In questo tutorial, ti mostreremo come costruire un flusso di autenticazione utente con ASP.NET Core integrando l'SDK Logto. Il tutorial utilizza C# come linguaggio di programmazione." }), "\n", _jsxs(_components.h2, { id: "prerequisiti", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#prerequisiti", children: _jsx(_components.span, { children: "#" }) }), "Prerequisiti"] }), "\n", _jsx(_components.p, { children: "Prima di iniziare, assicurati di avere quanto segue:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Un account Logto. Se non ne hai uno, puoi ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "registrarti gratuitamente" }), "."] }), "\n", _jsxs(_components.li, { children: ["Un ambiente di sviluppo .NET e un progetto ASP.NET Core. Se non ne hai uno, puoi ", _jsx(_components.a, { href: "https://dotnet.microsoft.com/download", children: "installare .NET" }), " e seguire i ", _jsx(_components.a, { href: "https://dotnet.microsoft.com/it-it/apps/aspnet", children: "tutorial di ASP.NET" }), " per impostare il tuo progetto."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "creare-unapplicazione-logto", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#creare-unapplicazione-logto", children: _jsx(_components.span, { children: "#" }) }), "Creare un'applicazione Logto"] }), "\n", _jsx(_components.p, { children: "Per iniziare, crea un'applicazione Logto con il tipo \"Web tradizionale\". Segui questi passaggi per creare un'applicazione Logto:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Accedi alla ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "Console Logto" }), "."] }), "\n", _jsxs(_components.li, { children: ["Nella barra di navigazione a sinistra, fai clic su ", _jsx(_components.strong, { children: "Applicazioni" }), "."] }), "\n", _jsxs(_components.li, { children: ["Fai clic su ", _jsx(_components.strong, { children: "Crea applicazione" }), "."] }), "\n", _jsx(_components.li, { children: "Nella pagina aperta, trova la sezione \"App web tradizionale\" e localizza la scheda \"ASP.NET Core\"." }), "\n", _jsxs(_components.li, { children: ["Fai clic su ", _jsx(_components.strong, { children: "Inizia a costruire" }), ", e inserisci il nome della tua applicazione."] }), "\n", _jsxs(_components.li, { children: ["Fai clic su ", _jsx(_components.strong, { children: "Crea" }), "."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Quindi dovresti vedere un tutorial interattivo che ti guida nel processo di integrazione dell'SDK Logto con la tua applicazione ASP.NET Core. Il contenuto seguente può essere un riferimento per un uso futuro." }), "\n", _jsx(LogtoCloudButton, { children: "Prova il tutorial interattivo di Logto Cloud" }), "\n", _jsxs(_components.h2, { id: "integrare-con-lsdk-logto", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#integrare-con-lsdk-logto", children: _jsx(_components.span, { children: "#" }) }), "Integrare con l'SDK Logto"] }), "\n", _jsxs(_components.h3, { id: "installazione", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#installazione", children: _jsx(_components.span, { children: "#" }) }), "Installazione"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "dotnet add package Logto.AspNetCore.Authentication\n" }) }), "\n", _jsxs(_components.p, { children: ["Nota che la versione minima supportata di ASP.NET Core è ", _jsx(_components.code, { children: "6.0" }), "."] }), "\n", _jsxs(_components.h3, { id: "aggiungi-il-middleware-di-autenticazione-logto", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#aggiungi-il-middleware-di-autenticazione-logto", children: _jsx(_components.span, { children: "#" }) }), "Aggiungi il middleware di autenticazione Logto"] }), "\n", _jsxs(_components.p, { children: ["Apri ", _jsx(_components.code, { children: "Startup.cs" }), " (o ", _jsx(_components.code, { children: "Program.cs" }), ") e aggiungi il seguente codice per registrare il middleware di autenticazione Logto:"] }), "\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: ["Il metodo ", _jsx(_components.code, { children: "AddLogtoAuthentication" }), " farà le seguenti cose:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Imposterà lo schema di autenticazione predefinito su ", _jsx(_components.code, { children: "LogtoDefaults.CookieScheme" }), "."] }), "\n", _jsxs(_components.li, { children: ["Imposterà lo schema di sfida predefinito su ", _jsx(_components.code, { children: "LogtoDefaults.AuthenticationScheme" }), "."] }), "\n", _jsxs(_components.li, { children: ["Imposterà lo schema di disconnessione predefinito su ", _jsx(_components.code, { children: "LogtoDefaults.AuthenticationScheme" }), "."] }), "\n", _jsx(_components.li, { children: "Aggiungerà i gestori di autenticazione dei cookie e OpenID Connect allo schema di autenticazione." }), "\n"] }), "\n", _jsxs(_components.h3, { id: "accesso", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#accesso", children: _jsx(_components.span, { children: "#" }) }), "Accesso"] }), "\n", _jsxs(_components.p, { children: ["Aggiungi il seguente URI alla lista ", _jsx(_components.code, { children: "Redirect URIs" }), " nella pagina dei dettagli dell'applicazione Logto:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "http:///Callback\n" }) }), "\n", _jsxs(_components.p, { children: ["Per accedere con Logto, puoi usare il metodo ", _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: ["Il metodo ", _jsx(_components.code, { children: "ChallengeAsync" }), " reindirizzerà l'utente alla pagina di accesso di Logto."] }), "\n", _jsxs(_components.p, { children: ["La proprietà ", _jsx(_components.code, { children: "RedirectUri" }), " viene utilizzata per reindirizzare l'utente alla tua applicazione web dopo l'autenticazione. Nota che è diverso dall'URI di reindirizzamento che hai configurato nella pagina dei dettagli dell'applicazione Logto:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "L'URI di reindirizzamento nella pagina dei dettagli dell'applicazione Logto è l'URI a cui Logto reindirizzerà l'utente dopo che l'utente ha effettuato l'accesso." }), "\n", _jsxs(_components.li, { children: ["La proprietà ", _jsx(_components.code, { children: "RedirectUri" }), " è l'URI che verrà reindirizzato dopo che sono state prese le azioni necessarie nel middleware di autenticazione Logto."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["L'ordine delle azioni è 1 -> 2. Per chiarezza, chiamiamo l'URI di reindirizzamento nella pagina dei dettagli dell'applicazione Logto l'", _jsx(_components.strong, { children: "URI di reindirizzamento Logto" }), " e la proprietà ", _jsx(_components.code, { children: "RedirectUri" }), " l'", _jsx(_components.strong, { children: "URI di reindirizzamento dell'applicazione" }), "."] }), "\n", _jsxs(_components.p, { children: ["L'", _jsx(_components.strong, { children: "URI di reindirizzamento Logto" }), " ha un valore predefinito di ", _jsx(_components.code, { children: "/Callback" }), ", che puoi lasciare tale quale se non ci sono requisiti speciali. Se vuoi cambiarlo, puoi impostare la proprietà ", _jsx(_components.code, { children: "CallbackPath" }), " per ", _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 = \"/UnAltroPercorsoDiRitorno\";\n});\n" }) }), "\n", _jsx(_components.p, { children: "Ricorda di aggiornare il valore nella pagina dei dettagli dell'applicazione Logto di conseguenza." }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Non è necessario impostare l'", _jsx(_components.strong, { children: "URI di reindirizzamento dell'applicazione" }), " nella pagina dei dettagli dell'applicazione Logto."] }) }), "\n", _jsxs(_components.h3, { id: "disconnessione", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#disconnessione", children: _jsx(_components.span, { children: "#" }) }), "Disconnessione"] }), "\n", _jsxs(_components.p, { children: ["Aggiungi il seguente URI alla lista ", _jsx(_components.code, { children: "Post sign-out redirect URIs" }), " nella pagina dei dettagli dell'applicazione Logto:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "http:///RitornoDopoDisconnessione\n" }) }), "\n", _jsxs(_components.p, { children: ["Per disconnettersi con Logto, puoi usare il metodo ", _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: ["Il metodo ", _jsx(_components.code, { children: "SignOutAsync" }), " cancellerà il cookie di autenticazione e reindirizzerà l'utente alla pagina di disconnessione di Logto."] }), "\n", _jsxs(_components.p, { children: ["La proprietà ", _jsx(_components.code, { children: "RedirectUri" }), " viene utilizzata per reindirizzare l'utente alla tua applicazione web dopo la disconnessione. Nota che è diverso dall'URI di reindirizzamento post disconnessione che hai configurato nella pagina dei dettagli dell'applicazione Logto:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "L'URI di reindirizzamento post disconnessione nella pagina dei dettagli dell'applicazione Logto è l'URI a cui Logto reindirizzerà l'utente dopo che l'utente si è disconnesso." }), "\n", _jsxs(_components.li, { children: ["La proprietà ", _jsx(_components.code, { children: "RedirectUri" }), " è l'URI che verrà reindirizzato dopo che sono state prese le azioni necessarie nel middleware di autenticazione Logto."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["L'ordine delle azioni è 1 -> 2. Per chiarezza, chiamiamo l'URI di reindirizzamento post disconnessione nella pagina dei dettagli dell'applicazione Logto l'", _jsx(_components.strong, { children: "URI di reindirizzamento post disconnessione Logto" }), " e la proprietà ", _jsx(_components.code, { children: "RedirectUri" }), " l'", _jsx(_components.strong, { children: "URI di reindirizzamento post disconnessione dell'applicazione" }), "."] }), "\n", _jsxs(_components.p, { children: ["L'", _jsx(_components.strong, { children: "URI di reindirizzamento post disconnessione Logto" }), " ha un valore predefinito di ", _jsx(_components.code, { children: "/RitornoDopoDisconnessione" }), ", che puoi lasciare tale quale se non ci sono requisiti speciali. Se vuoi cambiarlo, puoi impostare la proprietà ", _jsx(_components.code, { children: "SignedOutCallbackPath" }), " per ", _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 = \"/UnAltroPercorsoDiRitornoDopoDisconnessione\";\n});\n" }) }), "\n", _jsx(_components.p, { children: "Ricorda di aggiornare il valore nella pagina dei dettagli dell'applicazione Logto di conseguenza." }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Non è necessario impostare l'", _jsx(_components.strong, { children: "URI di reindirizzamento post disconnessione dell'applicazione" }), " nella pagina dei dettagli dell'applicazione Logto."] }) }), "\n", _jsxs(_components.h3, { id: "implementa-i-pulsanti-di-accessodisconnessione-pagine-razor", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementa-i-pulsanti-di-accessodisconnessione-pagine-razor", children: _jsx(_components.span, { children: "#" }) }), "Implementa i pulsanti di accesso/disconnessione (Pagine Razor)"] }), "\n", _jsxs(_components.p, { children: ["Per prima cosa, aggiungi i metodi gestore al tuo ", _jsx(_components.code, { children: "PageModel" }), ", ad esempio:"] }), "\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: "Poi, aggiungi i pulsanti alla tua pagina Razor (html):" }), "\n", _jsx("pre", { class: "language-html", children: _jsx("code", { children: `

Autenticato: @User.Identity?.IsAuthenticated

` }) }), "\n", _jsx(_components.p, { children: "Mostrerà il pulsante \"Accedi\" se l'utente non è autenticato, e mostrerà il pulsante \"Disconnetti\" se l'utente è autenticato." }), "\n", _jsxs(_components.h2, { id: "punto-di-controllo-esegui-lapplicazione-web", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#punto-di-controllo-esegui-lapplicazione-web", children: _jsx(_components.span, { children: "#" }) }), "Punto di controllo: Esegui l'applicazione web"] }), "\n", _jsx(_components.p, { children: "Ora puoi eseguire l'applicazione web e provare ad accedere/disconnettersi con Logto:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Apri l'applicazione web nel tuo browser, dovresti vedere \"Autenticato: False\" e il pulsante \"Accedi\"." }), "\n", _jsx(_components.li, { children: "Fai clic sul pulsante \"Accedi\", e dovresti essere reindirizzato alla pagina di accesso di Logto." }), "\n", _jsx(_components.li, { children: "Dopo che ti sei autenticato, dovresti essere reindirizzato all'applicazione web, e dovresti vedere \"Autenticato: True\" e il pulsante \"Disconnetti\"." }), "\n", _jsx(_components.li, { children: "Fai clic sul pulsante \"Disconnetti\", e dovresti essere reindirizzato alla pagina di disconnessione di Logto, e poi reindirizzato all'applicazione web." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Se incontri problemi durante l'integrazione, non esitare a contattarci via email a ", _jsx(_components.a, { href: "mailto:contact@logto.io", children: "contact@logto.io" }), " o ", _jsx(_components.a, { href: "https://discord.gg/UEPaF3j5e6", children: "unisciti al nostro server Discord" }), "!"] }), "\n", _jsxs(_components.h2, { id: "letture-ulteriori", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#letture-ulteriori", children: _jsx(_components.span, { children: "#" }) }), "Letture ulteriori"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/customize-sie/", children: "Personalizza l'esperienza di accesso" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/configure-connectors/", children: "Configura i connettori" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/protect-your-api/", children: "Proteggi la tua API" }) }), "\n"] }), "\n", _jsx(LogtoCloudButton, { children: "Prova Logto Oggi" })] }); } 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."); }