"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "sfondo", "hProperties": { "id": "sfondo" } }, "depth": 2, "value": "Sfondo" }, { "data": { "id": "prerequisiti", "hProperties": { "id": "prerequisiti" } }, "depth": 2, "value": "Prerequisiti" }, { "data": { "id": "crea-la-tua-interfaccia-di-accesso-personalizzata", "hProperties": { "id": "crea-la-tua-interfaccia-di-accesso-personalizzata" } }, "depth": 2, "value": "Crea la tua interfaccia di accesso personalizzata" }, { "data": { "id": "configura-logto-tunnel-cli", "hProperties": { "id": "configura-logto-tunnel-cli" } }, "depth": 2, "value": "Configura Logto tunnel CLI" }, { "data": { "id": "attiva-laccesso-dalla-tua-applicazione", "hProperties": { "id": "attiva-laccesso-dalla-tua-applicazione" } }, "depth": 2, "value": "Attiva l'accesso dalla tua applicazione" }, { "data": { "id": "interagisci-con-lapi-di-logto-experience", "hProperties": { "id": "interagisci-con-lapi-di-logto-experience" } }, "depth": 2, "value": "Interagisci con l'API di Logto Experience" }, { "data": { "id": "testa-la-tua-pagina-di-accesso-personalizzata", "hProperties": { "id": "testa-la-tua-pagina-di-accesso-personalizzata" } }, "depth": 2, "value": "Testa la tua pagina di accesso personalizzata" }, { "data": { "id": "distribuisci-la-tua-interfaccia-di-accesso-personalizzata-su-logto-cloud", "hProperties": { "id": "distribuisci-la-tua-interfaccia-di-accesso-personalizzata-su-logto-cloud" } }, "depth": 2, "value": "Distribuisci la tua interfaccia di accesso personalizzata su Logto Cloud" }, { "data": { "id": "conclusione", "hProperties": { "id": "conclusione" } }, "depth": 2, "value": "Conclusione" }]; const readingTime = { "minutes": 4, "words": 1081, "text": "4 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "sfondo", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sfondo", children: _jsx(_components.span, { children: "#" }) }), "Sfondo"] }), "\n", _jsx(_components.p, { children: "Logto fornisce un'interfaccia di accesso pronta per l'uso che copre tutte le funzionalità di Logto, inclusi accesso, registrazione, recupero password, single sign-on (SSO) e altro ancora.\nGli utenti possono anche personalizzare l'aspetto dell'interfaccia di accesso utilizzando la nostra funzione \"Custom CSS\"." }), "\n", _jsx(_components.p, { children: "Tuttavia, alcuni utenti desiderano ancora personalizzare profondamente la loro esperienza di accesso (sia l'interfaccia che i flussi di autenticazione) per adattarsi al loro branding e alle specifiche esigenze aziendali.\nVi abbiamo ascoltato! E siamo entusiasti di annunciare che la funzione \"Porta la tua interfaccia\" è ora disponibile su Logto Cloud." }), "\n", _jsx(_components.p, { children: "In questo tutorial, ti guideremo attraverso i passaggi per creare e distribuire la tua interfaccia di accesso personalizzata su Logto Cloud." }), "\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 ", _jsx(_components.a, { href: "http://cloud.logto.io/?sign_up=true", children: "Logto Cloud" }), " con un piano di abbonamento"] }), "\n", _jsxs(_components.li, { children: ["Un'applicazione integrata con Logto (", _jsx(_components.a, { href: "https://docs.logto.io/quick-starts", children: "Quick-starts" }), ")"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://docs.logto.io/docs/references/tunnel-cli/", children: "Logto tunnel CLI" }), " installato"] }), "\n", _jsx(_components.li, { children: "Conoscenze di base di HTML, CSS e JavaScript" }), "\n"] }), "\n", _jsx(_components.p, { children: "Per semplicità, utilizzeremo il classico metodo di accesso \"username e password\" nei passaggi seguenti. Ricorda di cambiare il tuo metodo di accesso nel Logto Console." }), "\n", _jsx("center", { children: _jsx("img", { width: "600", src: "https://uploads.strapi.logto.io/1/username_password_sign_in_78a7d8588c.webp", alt: "Accesso con nome utente e password" }) }), "\n", _jsxs(_components.h2, { id: "crea-la-tua-interfaccia-di-accesso-personalizzata", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#crea-la-tua-interfaccia-di-accesso-personalizzata", children: _jsx(_components.span, { children: "#" }) }), "Crea la tua interfaccia di accesso personalizzata"] }), "\n", _jsxs(_components.p, { children: ["Il requisito minimo per un'interfaccia di accesso è avere un file ", _jsx(_components.code, { children: "index.html" }), ", con un modulo di accesso che includa almeno un input per il nome utente, un input per la password e un pulsante di invio.\nHo usato ChatGPT per generare un esempio di HTML, e ho creato questa adorabile pagina di accesso rosa."] }), "\n", _jsx("center", { children: _jsx("img", { width: "600", src: "https://uploads.strapi.logto.io/1/pinky_sign_in_page_b11e43251d.webp", alt: "Pagina di accesso personalizzata" }) }), "\n", _jsx(_components.p, { children: "Ho omesso gli stili CSS per semplicità, ed ecco come appare l'HTML:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n \n \n \n Pagina di accesso divertente\n \n \n

Bentornato

\n \n

\n \n\n" }) }), "\n", _jsx(_components.p, { children: "Puoi anche iniziare con un boilerplate dal tuo framework front-end preferito, come Create React App, Next.js o Vue CLI." }), "\n", _jsxs(_components.p, { children: ["Poiché Logto è open source, un'altra raccomandazione è clonare il ", _jsx(_components.a, { href: "https://github.com/logto-io/logto/tree/master/packages/experience", children: "progetto Logto Experience" }), " e modificare il codice per adattarlo alle tue esigenze. Questa è l'interfaccia di accesso completa integrata di Logto, scritta in React e TypeScript."] }), "\n", _jsxs(_components.h2, { id: "configura-logto-tunnel-cli", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configura-logto-tunnel-cli", children: _jsx(_components.span, { children: "#" }) }), "Configura Logto tunnel CLI"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://docs.logto.io/docs/references/tunnel-cli/", children: "Logto tunnel CLI" }), " è uno strumento che non solo serve le tue pagine HTML, ma ti permette anche di interagire con l'API di Logto Experience dalle tue pagine HTML in ambiente di sviluppo locale."] }), "\n", _jsxs(_components.p, { children: ["Supponendo che la tua pagina ", _jsx(_components.code, { children: "index.html" }), " si trovi in ", _jsx(_components.code, { children: "/path/to/your/custom-ui" }), ", e che il tuo ID tenant di Logto sia ", _jsx(_components.code, { children: "foobar" }), ", puoi eseguire il comando in questo modo:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npx @logto/tunnel --path /path/to/your/custom-ui --endpoint https://foobar.logto.app/ -p 9000\n" }) }), "\n", _jsxs(_components.p, { children: ["Oppure, se stai utilizzando un framework UI che ha un server di sviluppo integrato, e la tua pagina è servita su ", _jsx(_components.code, { children: "http://localhost:4000" }), ", puoi eseguire il comando in questo modo:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npx @logto/tunnel --uri http://localhost:4000 --endpoint https://foobar.logto.app/ -p 9000\n" }) }), "\n", _jsxs(_components.p, { children: ["Dopo aver eseguito il comando, il servizio tunnel sarà avviato sulla tua macchina locale ", _jsx(_components.code, { children: "http://localhost:9000/" }), "."] }), "\n", _jsxs(_components.h2, { id: "attiva-laccesso-dalla-tua-applicazione", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#attiva-laccesso-dalla-tua-applicazione", children: _jsx(_components.span, { children: "#" }) }), "Attiva l'accesso dalla tua applicazione"] }), "\n", _jsxs(_components.p, { children: ["Vai all'applicazione che hai creato in precedenza, e cambia l'endpoint di Logto da ", _jsx(_components.code, { children: "https://foobar.logto.app/" }), " a ", _jsx(_components.code, { children: "http://localhost:9000/" }), " nella tua configurazione SDK di Logto."] }), "\n", _jsx(_components.p, { children: "Prendiamo come esempio il nostro progetto React:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", title: "src/App.tsx", children: "import { LogtoProvider, LogtoConfig } from '@logto/react';\n\nconst config: LogtoConfig = {\n // endpoint: 'https://foobar.logto.app/', // endpoint originale di Logto Cloud\n endpoint: 'http://localhost:9000/', // indirizzo del servizio tunnel\n appId: '',\n};\n\nconst App = () => (\n \n \n \n);\n" }) }), "\n", _jsx(_components.p, { children: "Clicca il pulsante \"Accedi\" nella tua applicazione. Invece di vedere l'interfaccia di accesso integrata di Logto, dovresti ora essere reindirizzato alla tua pagina di accesso personalizzata." }), "\n", _jsxs(_components.h2, { id: "interagisci-con-lapi-di-logto-experience", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#interagisci-con-lapi-di-logto-experience", children: _jsx(_components.span, { children: "#" }) }), "Interagisci con l'API di Logto Experience"] }), "\n", _jsxs(_components.p, { children: ["In questo passaggio, interagiremo con l'API di Logto Experience nella tua interfaccia personalizzata. Per prima cosa, creiamo un file ", _jsx(_components.code, { children: "script.js" }), " e aggiungiamo il riferimento nel tuo ", _jsx(_components.code, { children: "index.html" }), "."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", title: "index.html", children: "\n \n \n \n \n \n\n" }) }), "\n", _jsxs(_components.p, { children: ["Inserisci il seguente codice nel tuo file ", _jsx(_components.code, { children: "script.js" }), "."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", title: "script.js", children: "window.onload = function () {\n const form = document.getElementById('loginForm');\n form.addEventListener('submit', async function (event) {\n event.preventDefault();\n const formData = new FormData(event.target);\n \n try {\n await fetch('/api/experience', {\n method: 'PUT',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ interactionEvent: 'SignIn' }),\n });\n\n const verificationResponse = await fetch('/api/experience/verification/password', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n identifier: { type: 'username', value: formData.get('username') },\n password: formData.get('password'),\n }),\n });\n\n const { verificationId } = await verificationResponse.json();\n\n await fetch('/api/experience/identification', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ verificationId }),\n });\n\n const submitReponse = await fetch('/api/experience/submit', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n });\n\n const { redirectTo } = await submitReponse.json();\n window.location.replace(redirectTo);\n\n } catch (error) {\n console.error('Ops!', error);\n }\n });\n};\n" }) }), "\n", _jsx(_components.p, { children: "Questo script completerà il flusso di accesso con nome utente e password con l'aiuto di queste API:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "PUT /api/experience" }), " - Avvia l'interazione di accesso"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "POST /api/experience/verification/password" }), " - Verifica il nome utente e la password"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "POST /api/experience/identification" }), " - Identifica l'utente per l'interazione corrente"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "POST /api/experience/submit" }), " - Invia l'interazione di accesso"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Consulta la ", _jsx(_components.a, { href: "https://openapi.logto.io/group/endpoint-experience", children: "documentazione dell'API di Logto Experience" }), " per maggiori dettagli."] }), "\n", _jsxs(_components.h2, { id: "testa-la-tua-pagina-di-accesso-personalizzata", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#testa-la-tua-pagina-di-accesso-personalizzata", children: _jsx(_components.span, { children: "#" }) }), "Testa la tua pagina di accesso personalizzata"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Vai alla tua applicazione e clicca il pulsante \"Accedi\"." }), "\n", _jsxs(_components.li, { children: ["Dovresti essere reindirizzato alla tua pagina di accesso personalizzata su ", _jsx(_components.code, { children: "http://localhost:9000/" }), "."] }), "\n", _jsx(_components.li, { children: "Inserisci nome utente e password, e clicca il pulsante \"Invia\"." }), "\n", _jsx(_components.li, { children: "Se tutto è configurato correttamente, dovresti essere reindirizzato alla tua applicazione, con le informazioni dell'utente autenticato." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "distribuisci-la-tua-interfaccia-di-accesso-personalizzata-su-logto-cloud", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#distribuisci-la-tua-interfaccia-di-accesso-personalizzata-su-logto-cloud", children: _jsx(_components.span, { children: "#" }) }), "Distribuisci la tua interfaccia di accesso personalizzata su Logto Cloud"] }), "\n", _jsx(_components.p, { children: "Una volta che hai terminato di sviluppare e testare la tua interfaccia di accesso personalizzata localmente, puoi distribuirla su Logto Cloud.\nCrea semplicemente un file zip della tua cartella UI personalizzata e caricalo nella sezione \"Custom UI\" nel tuo Logto Console." }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/upload_custom_ui_assets_d5d99b43d9.webp", alt: "Carica UI personalizzata" }) }), "\n", _jsx(_components.p, { children: "Dopo il caricamento, salva le modifiche, e la tua interfaccia di accesso personalizzata sarà attiva sul tuo tenant Logto Cloud, sostituendo l'esperienza di accesso integrata di Logto." }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/sie_custom_ui_enabled_53f4445188.webp", alt: "UI personalizzata attivata" }) }), "\n", _jsxs(_components.p, { children: ["Infine, torna alla tua applicazione e cambia l'URI dell'endpoint al tuo endpoint di Logto cloud: ", _jsx(_components.code, { children: "https://foobar.logto.app/" }), ".\nQuesta volta, puoi interrompere il servizio tunnel di Logto, e la tua applicazione dovrebbe ora funzionare direttamente con l'UI personalizzata ospitata online."] }), "\n", _jsxs(_components.h2, { id: "conclusione", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusione", children: _jsx(_components.span, { children: "#" }) }), "Conclusione"] }), "\n", _jsx(_components.p, { children: "In questo tutorial, ti abbiamo guidato attraverso il processo di implementazione e distribuzione della tua interfaccia di accesso personalizzata su Logto Cloud." }), "\n", _jsx(_components.p, { children: "Con questa funzione, ora puoi personalizzare a fondo la tua interfaccia di accesso e i flussi di autenticazione per adattarli al tuo branding e alle tue specifiche esigenze aziendali." }), "\n", _jsx(_components.p, { children: "Buona programmazione! 🚀" }), "\n", _jsx(LogtoCloudButton, {})] }); } 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."); }