"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "inizia", "hProperties": { "id": "inizia" } }, "depth": 2, "value": "Inizia" }, { "data": { "id": "integra-con-logto-sdk", "hProperties": { "id": "integra-con-logto-sdk" } }, "depth": 2, "value": "Integra con Logto SDK" }, { "data": { "id": "installazione", "hProperties": { "id": "installazione" } }, "depth": 3, "value": "Installazione" }, { "data": { "id": "aggiungi-logto-hook", "hProperties": { "id": "aggiungi-logto-hook" } }, "depth": 3, "value": "Aggiungi Logto hook" }, { "data": { "id": "implementa-laccesso-e-la-disconnessione", "hProperties": { "id": "implementa-laccesso-e-la-disconnessione" } }, "depth": 2, "value": "Implementa l'accesso e la disconnessione" }, { "data": { "id": "visualizza-le-informazioni-dellutente", "hProperties": { "id": "visualizza-le-informazioni-dellutente" } }, "depth": 3, "value": "Visualizza le informazioni dell'utente" }, { "data": { "id": "controllo-esegui-lapplicazione", "hProperties": { "id": "controllo-esegui-lapplicazione" } }, "depth": 2, "value": "Controllo: Esegui l'applicazione" }, { "data": { "id": "ulteriori-letture", "hProperties": { "id": "ulteriori-letture" } }, "depth": 2, "value": "Ulteriori letture" }]; const readingTime = { "minutes": 1, "words": 365, "text": "less than a minute read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }, {Checkpoint, ConfigureRedirectUris, GetStarted, LogtoCloudButton} = _components; if (!Checkpoint) _missingMdxReference("Checkpoint", true); if (!ConfigureRedirectUris) _missingMdxReference("ConfigureRedirectUris", true); if (!GetStarted) _missingMdxReference("GetStarted", true); if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "inizia", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#inizia", children: _jsx(_components.span, { children: "#" }) }), "Inizia"] }), "\n", _jsx(GetStarted, { framework: { name: 'SvelteKit', url: 'https://kit.svelte.dev/', description: 'è un framework per lo sviluppo rapido di potenti applicazioni web performanti utilizzando Svelte.' }, programmingLanguage: "TypeScript", applicationType: "Web tradizionale" }), "\n", _jsxs(_components.h2, { id: "integra-con-logto-sdk", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#integra-con-logto-sdk", children: _jsx(_components.span, { children: "#" }) }), "Integra con Logto SDK"] }), "\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.p, { children: "Installa Logto SDK tramite il tuo gestore di pacchetti preferito:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# oppure pnpm, yarn, etc.\nnpm i @logto/sveltekit\n" }) }), "\n", _jsxs(_components.h3, { id: "aggiungi-logto-hook", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#aggiungi-logto-hook", children: _jsx(_components.span, { children: "#" }) }), "Aggiungi Logto hook"] }), "\n", _jsxs(_components.p, { children: ["Nel tuo file ", _jsx(_components.code, { children: "hooks.server.ts" }), ", aggiungi il seguente codice per iniettare il Logto hook nel tuo server:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "importa { handleLogto } da '@logto/sveltekit';\n\nexporta il manico = handleLogto(\n {\n endpoint: '',\n appId: '',\n appSecret: '',\n },\n {\n encryptionKey: '',\n }\n);\n" }) }), "\n", _jsx(_components.p, { children: "Poiché queste informazioni sono sensibili, è consigliato utilizzare le variabili di ambiente:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "importa { handleLogto } da '@logto/sveltekit';\nimporta { env } da '$env/dynamic/private';\n\nexporta il manico = handleLogto(\n {\n endpoint: env.LOGTO_ENDPOINT,\n appId: env.LOGTO_APP_ID,\n appSecret: env.LOGTO_APP_SECRET,\n },\n {\n encryptionKey: env.LOGTO_COOKIE_ENCRYPTION_KEY,\n }\n);\n" }) }), "\n", _jsxs(_components.p, { children: ["Se hai più hook, puoi usare la funzione helper [sequence()] (", _jsx(_components.a, { href: "https://kit.svelte.dev/docs/modules#sveltejs-kit-hooks", children: "https://kit.svelte.dev/docs/modules#sveltejs-kit-hooks" }), ") per concatenarli:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "importa { sequence } da '@sveltejs/kit/hooks';\n\nexporta il manico = sequence(handleLogto, handleOtherHook);\n" }) }), "\n", _jsxs(_components.p, { children: ["Ora puoi accedere al cliente Logto nell'oggetto ", _jsx(_components.code, { children: "locals" }), ". Per TypeScript, puoi aggiungere il tipo a ", _jsx(_components.code, { children: "app.d.ts" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "importa tipo { LogtoClient, UserInfoResponse } da '@logto/sveltekit';\n\ndichiara globale {\n namespace App {\n interface Locals {\n logtoClient: LogtoClient;\n utente?: UserInfoResponse;\n }\n }\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Discuteremo dell'oggetto ", _jsx(_components.code, { children: "utente" }), " più tardi."] }), "\n", _jsxs(_components.h2, { id: "implementa-laccesso-e-la-disconnessione", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementa-laccesso-e-la-disconnessione", children: _jsx(_components.span, { children: "#" }) }), "Implementa l'accesso e la disconnessione"] }), "\n", _jsx(ConfigureRedirectUris, {}), "\n", _jsx(_components.p, { children: "Torna alla tua app, nella pagina in cui vuoi implementare l'accesso e la disconnessione, definisci le seguenti azioni:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// +page.server.ts\nimporta tipo { Actions } da './$types';\n\nexporta le azioni: Actions = {\n accesso: async ({ locals }) => {\n aspetta locals.logtoClient.signIn('http://localhost:3000/callback');\n },\n logout: async ({ locals }) => {\n aspetta locals.logtoClient.signOut('http://localhost:3000/');\n },\n};\n" }) }), "\n", _jsx(_components.p, { children: "Quindi usa queste azioni nel tuo componente Svelte:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "{/* +page.svelte */}\n\n Accedi {data.utente ? 'fuori' : 'in'}\n\n" }) }), "\n", _jsxs(_components.h3, { id: "visualizza-le-informazioni-dellutente", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#visualizza-le-informazioni-dellutente", children: _jsx(_components.span, { children: "#" }) }), "Visualizza le informazioni dell'utente"] }), "\n", _jsxs(_components.p, { children: ["Per visualizzare le informazioni dell'utente, puoi iniettare l'oggetto ", _jsx(_components.code, { children: "locals.utente" }), " nel layout, rendendolo disponibile a tutte le pagine:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "importa tipo { LayoutServerLoad } da './$types';\n\nexporta il carico: LayoutServerLoad = async ({ locals }) => {\n ritorno { utente: locals.utente };\n};\n" }) }), "\n", _jsx(_components.p, { children: "Nel tuo componente Svelte:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n{#if data.utente}\n

{key}: {value}

\n{/if}\n" }) }), "\n", _jsxs(_components.h2, { id: "controllo-esegui-lapplicazione", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#controllo-esegui-lapplicazione", children: _jsx(_components.span, { children: "#" }) }), "Controllo: Esegui l'applicazione"] }), "\n", _jsx(Checkpoint, {}), "\n", _jsxs(_components.h2, { id: "ulteriori-letture", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ulteriori-letture", children: _jsx(_components.span, { children: "#" }) }), "Ulteriori letture"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["[Personalizza l'esperienza di accesso] (", _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/customize-sie/", children: "https://docs.logto.io/docs/recipes/customize-sie/" }), ")"] }), "\n", _jsxs(_components.li, { children: ["[Configura i connettori] (", _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/configure-connectors/", children: "https://docs.logto.io/docs/recipes/configure-connectors/" }), ")"] }), "\n", _jsxs(_components.li, { children: ["[Proteggi la tua API] (", _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/protect-your-api/", children: "https://docs.logto.io/docs/recipes/protect-your-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."); }