"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "prerequisiti", "hProperties": { "id": "prerequisiti" } }, "depth": 2, "value": "Prerequisiti" }, { "data": { "id": "implementare-larchiviazione-delle-sessioni-con-kv-di-vercel", "hProperties": { "id": "implementare-larchiviazione-delle-sessioni-con-kv-di-vercel" } }, "depth": 2, "value": "Implementare l'archiviazione delle sessioni con KV di Vercel" }, { "data": { "id": "configurazione-dello-storage-kv", "hProperties": { "id": "configurazione-dello-storage-kv" } }, "depth": 3, "value": "Configurazione dello storage KV" }, { "data": { "id": "implementare-le-funzioni-di-gestione-delle-sessioni", "hProperties": { "id": "implementare-le-funzioni-di-gestione-delle-sessioni" } }, "depth": 3, "value": "Implementare le funzioni di gestione delle sessioni" }, { "data": { "id": "implementare-il-database-degli-utenti-con-kv-di-vercel", "hProperties": { "id": "implementare-il-database-degli-utenti-con-kv-di-vercel" } }, "depth": 2, "value": "Implementare il database degli utenti con KV di Vercel" }, { "data": { "id": "preparazione-delle-funzioni-webauthn", "hProperties": { "id": "preparazione-delle-funzioni-webauthn" } }, "depth": 2, "value": "Preparazione delle funzioni WebAuthn" }, { "data": { "id": "costruire-la-pagina-web", "hProperties": { "id": "costruire-la-pagina-web" } }, "depth": 2, "value": "Costruire la pagina web" }, { "data": { "id": "conclusione", "hProperties": { "id": "conclusione" } }, "depth": 2, "value": "Conclusione" }, { "data": { "id": "considerazioni-chiave-per-il-deployment-in-produzione", "hProperties": { "id": "considerazioni-chiave-per-il-deployment-in-produzione" } }, "depth": 3, "value": "Considerazioni chiave per il deployment in produzione" }]; const readingTime = { "minutes": 5, "words": 1612, "text": "5 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", img: "img", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["Bentornati alla nostra serie su WebAuthn. Nei nostri articoli precedenti, abbiamo trattato ", _jsx(_components.a, { href: "https://blog.logto.io/webauthn-base-knowledge/", children: "le basi di WebAuthn" }), ", e una ", _jsx(_components.a, { href: "https://blog.logto.io/web-authn-and-passkey-101/", children: "guida 101" }), ". Se vi state unendo a noi per la prima volta, sentitevi liberi di controllare questi articoli fondamentali per mettervi al passo."] }), "\n", _jsx(_components.p, { children: "Oggi ci rimbocchiamo le maniche per mettere in pratica la teoria. Stiamo per sfruttare la potenza di Next.js con la nuova funzionalità \"Server Actions\". Il nostro obiettivo? Implementare WebAuthn in un'applicazione Next.js, e prepararci per WebAuthn." }), "\n", _jsxs(_components.p, { children: ["Prima di tuffarci nel mare del codice, ecco uno sguardo a ciò che ti aspetta alla fine del viaggio: un sito demo ", _jsx(_components.a, { href: "https://nextjs-webauthn-alpha.vercel.app/", children: "completamente funzionante" }), ". Esploralo per vedere WebAuthn in azione e avere un assaggio di ciò che costruirai. In questo sito demo, puoi registrare nuovi utenti e accedere con le chiavi di accesso appena registrate."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/preview_fe67ff2888.webp", alt: "Anteprima" }) }), "\n", _jsxs(_components.p, { children: ["E per coloro che preferiscono avere una mappa in mano, abbiamo pensato a voi! Tutto il codice di cui discuteremo è disponibile in un ", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-webauthn", children: "repository GitHub" }), " pubblico. Questo repository è il vostro compagno di viaggio, offrendo il codice sorgente completo della nostra implementazione."] }), "\n", _jsx(_components.p, { children: "Pronti a intraprendere questa emozionante avventura? Cominciamo!" }), "\n", _jsxs(_components.h2, { id: "prerequisiti", children: ["Prerequisiti", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#prerequisiti", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Prima di iniziare, assicuriamoci di avere tutto ciò di cui abbiamo bisogno:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Un progetto Next.js" }), ": Se non hai ancora configurato un progetto Next.js, ecco una ", _jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/installation", children: "guida rapida" }), " per iniziare."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.a, { href: "https://github.com/MasterKale/SimpleWebAuthn", children: "Libreria Simple WebAuthn" }) }), ": Diversi pacchetti per ridurre il lavoro necessario per incorporare WebAuthn in un sito. Usa il tuo gestore di pacchetti preferito per installare ", _jsx(_components.code, { children: "@simplewebauthn/browser" }), ", ", _jsx(_components.code, { children: "@simplewebauthn/server" }), " e ", _jsx(_components.code, { children: "@simplewebauthn/typescript-types" }), "."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Archiviazione delle sessioni" }), ": Useremo l'archiviazione delle sessioni per gestire le sfide WebAuthn. Utilizzeremo ", _jsx(_components.a, { href: "https://vercel.com/docs/storage/vercel-kv", children: "KV di Vercel" }), " per raggiungere questo scopo."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Un database utenti" }), ": Un luogo per memorizzare le chiavi di accesso registrate dai nostri utenti. Per semplificare, useremo anche KV di Vercel per dimostrare."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Ora, con i nostri strumenti e materiali a portata di mano, siamo pronti per iniziare a costruire." }), "\n", _jsxs(_components.h2, { id: "implementare-larchiviazione-delle-sessioni-con-kv-di-vercel", children: ["Implementare l'archiviazione delle sessioni con KV di Vercel", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementare-larchiviazione-delle-sessioni-con-kv-di-vercel", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "configurazione-dello-storage-kv", children: ["Configurazione dello storage KV", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configurazione-dello-storage-kv", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["È facile inizializzare uno storage KV sia in produzione che nello sviluppo locale, segui questa guida per collegare un archivio KV al tuo progetto e ottenere i valori dell'ambiente: ", _jsx(_components.a, { href: "https://vercel.com/docs/storage/vercel-kv/quickstart", children: "https://vercel.com/docs/storage/vercel-kv/quickstart" })] }), "\n", _jsxs(_components.h3, { id: "implementare-le-funzioni-di-gestione-delle-sessioni", children: ["Implementare le funzioni di gestione delle sessioni", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementare-le-funzioni-di-gestione-delle-sessioni", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { kv } from '@vercel/kv';\nimport { cookies } from 'next/headers';\n\nconst sessionPrefix = 'nextjs-webauthn-example-session-';\n\ntype SessionData = {\n currentChallenge?: string;\n email?: string;\n};\n\nconst getSession = async (id: string) => {\n return kv.get(`${sessionPrefix}${id}`);\n};\n\nconst createSession = async (id: string, data: SessionData) => {\n return kv.set(`${sessionPrefix}${id}`, JSON.stringify(data));\n};\n\nexport const getCurrentSession = async (): Promise<{\n sessionId: string;\n data: SessionData;\n}> => {\n const cookieStore = cookies();\n const sessionId = cookieStore.get('session-id');\n\n if (sessionId?.value) {\n const session = await getSession(sessionId.value);\n\n if (session) {\n return { sessionId: sessionId.value, data: session };\n }\n }\n\n const newSessionId = Math.random().toString(36).slice(2);\n const newSession = { currentChallenge: undefined };\n cookieStore.set('session-id', newSessionId);\n\n await createSession(newSessionId, newSession);\n\n return { sessionId: newSessionId, data: newSession };\n};\n\nexport const updateCurrentSession = async (data: SessionData): Promise => {\n const { sessionId, data: oldData } = await getCurrentSession();\n\n await createSession(sessionId, { ...oldData, ...data });\n};\n" }) }), "\n", _jsx(_components.p, { children: "Abbiamo esportato 2 funzioni:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "getCurrentSession" }), ": Usa l'aiuto dei cookie di Next.js per creare una sessione per la richiesta corrente e restituire il valore."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "updateCurrentSession" }), ": Salva i dati nella sessione corrente."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "implementare-il-database-degli-utenti-con-kv-di-vercel", children: ["Implementare il database degli utenti con KV di Vercel", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementare-il-database-degli-utenti-con-kv-di-vercel", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Allo stesso modo della nostra implementazione delle sessioni, implementiamo un semplice database utenti." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { AuthenticatorDevice } from '@simplewebauthn/typescript-types';\nimport { kv } from '@vercel/kv';\nimport { cookies } from 'next/headers';\n\nconst userPrefix = 'nextjs-webauthn-example-user-';\n\n// I tipi originali sono \"Buffer\" che non è supportato da KV\nexport type UserDevice = Omit & {\n credentialID: string;\n credentialPublicKey: string;\n};\n\ntype User = {\n email: string;\n devices: UserDevice[];\n};\n\nexport const findUser = async (email: string): Promise => {\n const user = await kv.get(`${userPrefix}${email}`);\n\n return user;\n};\n\nexport const createUser = async (email: string, devices: UserDevice[]): Promise => {\n const user = await findUser(email);\n\n if (user) {\n throw new Error('L'utente esiste già');\n }\n\n await kv.set(`${userPrefix}${email}`, { email, devices });\n return { email, devices };\n};\n" }) }), "\n", _jsx(_components.p, { children: "Abbiamo creato funzioni per trovare l'utente tramite email e aggiornare i dati dell'utente tramite email. Ricorda, questo è solo a scopo dimostrativo, nel prodotto reale solitamente i dati degli utenti vengono mantenuti in un database." }), "\n", _jsxs(_components.h2, { id: "preparazione-delle-funzioni-webauthn", children: ["Preparazione delle funzioni WebAuthn", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#preparazione-delle-funzioni-webauthn", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Prima di procedere, vediamo il diagramma del flusso di registrazione e autenticazione:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n\tparticipant User\n participant WebPage\n participant API Server\n\n User->>WebPage: Richiedi la registrazione di una nuova chiave d'accesso\n WebPage->>API Server: Ottieni opzioni di registrazione (generateWebAuthnRegistrationOptions)\n API Server->>WebPage: opzioni\n WebPage->>WebPage: Chiama API WebAuthn\n WebPage->>User: Chiede di autenticarsi\n User->>WebPage: Esegue l'autenticazione\n WebPage->>API Server: Invia risposta API WebAuthn\n API Server->>API Server: Verifica e salva (verifyWebAuthnRegistration)\n API Server->>WebPage: Restituisce risultato\n WebPage->>User: ✅\n" }) }), "\n", _jsx(_components.p, { children: "Come puoi vedere, dobbiamo preparare 2 funzioni:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "generateWebAuthnRegistrationOptions" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "verifyWebAuthnRegistration" }) }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n\tparticipant User\n participant WebPage\n participant API Server\n\n User->>WebPage: Richiedi accesso a un'email\n WebPage->>API Server: Ottieni opzioni di autenticazione (generateWebAuthnLoginOptions)\n API Server->>WebPage: opzioni\n WebPage->>WebPage: Chiama API WebAuthn\n WebPage->>User: Chiede di autenticarsi\n User->>WebPage: Esegue l'autenticazione\n WebPage->>API Server: Invia risposta API WebAuthn\n API Server->>API Server: Verifica (verifyWebAuthnLogin)\n API Server->>WebPage: Restituisce risultato\n WebPage->>User: ✅\n" }) }), "\n", _jsx(_components.p, { children: "Similmente alla registrazione, l'accesso richiede 2 funzioni:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "generateWebAuthnLoginOptions" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "verifyWebAuthnLogin" }) }), "\n"] }), "\n", _jsx(_components.p, { children: "Ecco il codice:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use server';\n\nimport {\n GenerateAuthenticationOptionsOpts,\n GenerateRegistrationOptionsOpts,\n VerifyAuthenticationResponseOpts,\n VerifyRegistrationResponseOpts,\n generateAuthenticationOptions,\n generateRegistrationOptions,\n verifyAuthenticationResponse,\n verifyRegistrationResponse,\n} from '@simplewebauthn/server';\nimport { UserDevice, createUser, findUser, getCurrentSession, updateCurrentSession } from './user';\nimport { origin, rpId } from './constants';\nimport {\n AuthenticationResponseJSON,\n RegistrationResponseJSON,\n} from '@simplewebauthn/typescript-types';\nimport { isoBase64URL } from '@simplewebauthn/server/helpers';\n\nexport const generateWebAuthnRegistrationOptions = async (email: string) => {\n const user = await findUser(email);\n\n if (user) {\n return {\n success: false,\n message: \"L'utente esiste già\",\n };\n }\n\n const opts: GenerateRegistrationOptionsOpts = {\n rpName: 'SimpleWebAuthn Example',\n rpID: rpId,\n userID: email,\n userName: email,\n timeout: 60000,\n attestationType: 'none',\n excludeCredentials: [],\n authenticatorSelection: {\n residentKey: 'discouraged',\n },\n /**\n * Supporta i due algoritmi più comuni: ES256 e RS256\n */\n supportedAlgorithmIDs: [-7, -257],\n };\n\n const options = await generateRegistrationOptions(opts);\n\n await updateCurrentSession({ currentChallenge: options.challenge, email });\n\n return {\n success: true,\n data: options,\n };\n};\n\nexport const verifyWebAuthnRegistration = async (data: RegistrationResponseJSON) => {\n const {\n data: { email, currentChallenge },\n } = await getCurrentSession();\n\n if (!email || !currentChallenge) {\n return {\n success: false,\n message: 'Sessione scaduta',\n };\n }\n\n const expectedChallenge = currentChallenge;\n\n const opts: VerifyRegistrationResponseOpts = {\n response: data,\n expectedChallenge: `${expectedChallenge}`,\n expectedOrigin: origin,\n expectedRPID: rpId,\n requireUserVerification: false,\n };\n const verification = await verifyRegistrationResponse(opts);\n\n const { verified, registrationInfo } = verification;\n\n if (!verified || !registrationInfo) {\n return {\n success: false,\n message: 'Registrazione fallita',\n };\n }\n\n const { credentialPublicKey, credentialID, counter } = registrationInfo;\n\n /**\n * Aggiungi il dispositivo restituito all'elenco dei dispositivi dell'utente\n */\n const newDevice: UserDevice = {\n credentialPublicKey: isoBase64URL.fromBuffer(credentialPublicKey),\n credentialID: isoBase64URL.fromBuffer(credentialID),\n counter,\n transports: data.response.transports,\n };\n\n await updateCurrentSession({});\n\n try {\n await createUser(email, [newDevice]);\n } catch {\n return {\n success: false,\n message: \"L'utente esiste già\",\n };\n }\n\n return {\n success: true,\n };\n};\n\nexport const generateWebAuthnLoginOptions = async (email: string) => {\n const user = await findUser(email);\n\n if (!user) {\n return {\n success: false,\n message: 'Utente inesistente',\n };\n }\n\n const opts: GenerateAuthenticationOptionsOpts = {\n timeout: 60000,\n allowCredentials: user.devices.map((dev) => ({\n id: isoBase64URL.toBuffer(dev.credentialID),\n type: 'public-key',\n transports: dev.transports,\n })),\n userVerification: 'required',\n rpID: rpId,\n };\n const options = await generateAuthenticationOptions(opts);\n\n await updateCurrentSession({ currentChallenge: options.challenge, email });\n\n return {\n success: true,\n data: options,\n };\n};\n\nexport const verifyWebAuthnLogin = async (data: AuthenticationResponseJSON) => {\n const {\n data: { email, currentChallenge },\n } = await getCurrentSession();\n\n if (!email || !currentChallenge) {\n return {\n success: false,\n message: 'Sessione scaduta',\n };\n }\n\n const user = await findUser(email);\n\n if (!user) {\n return {\n success: false,\n message: 'Utente inesistente',\n };\n }\n\n const dbAuthenticator = user.devices.find((dev) => dev.credentialID === data.rawId);\n\n if (!dbAuthenticator) {\n return {\n success: false,\n message: 'L'autenticatore non è registrato con questo sito',\n };\n }\n\n const opts: VerifyAuthenticationResponseOpts = {\n response: data,\n expectedChallenge: `${currentChallenge}`,\n expectedOrigin: origin,\n expectedRPID: rpId,\n authenticator: {\n ...dbAuthenticator,\n credentialID: isoBase64URL.toBuffer(dbAuthenticator.credentialID),\n credentialPublicKey: isoBase64URL.toBuffer(dbAuthenticator.credentialPublicKey),\n },\n requireUserVerification: true,\n };\n const verification = await verifyAuthenticationResponse(opts);\n\n await updateCurrentSession({});\n\n return {\n success: verification.verified,\n };\n};\n" }) }), "\n", _jsxs(_components.h2, { id: "costruire-la-pagina-web", children: ["Costruire la pagina web", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#costruire-la-pagina-web", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Abbiamo completato la preparazione, costruiamo la pagina:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use client';\n\nimport { startAuthentication, startRegistration } from '@simplewebauthn/browser';\nimport {\n generateWebAuthnLoginOptions,\n generateWebAuthnRegistrationOptions,\n verifyWebAuthnLogin,\n verifyWebAuthnRegistration,\n} from '@/libraries/webauthn';\nimport styles from './page.module.css';\n\nexport default function Home() {\n const handleSubmit = async (event: React.FormEvent) => {\n event.preventDefault();\n\n const formData = new FormData(event.currentTarget);\n const email = formData.get('email')?.toString();\n const type = formData.get('type')?.toString();\n\n if (!email) {\n return;\n }\n\n if (type === 'register') {\n const response = await generateWebAuthnRegistrationOptions(email);\n\n if (!response.success || !response.data) {\n alert(response.message ?? 'Qualcosa è andato storto!');\n return;\n }\n\n const localResponse = await startRegistration(response.data);\n const verifyResponse = await verifyWebAuthnRegistration(localResponse);\n\n if (!verifyResponse.success) {\n alert(verifyResponse.message ?? 'Qualcosa è andato storto!');\n return;\n }\n\n alert('Registrazione avvenuta con successo!');\n } else {\n const response = await generateWebAuthnLoginOptions(email);\n\n if (!response.success || !response.data) {\n alert(response.message ?? 'Qualcosa è andato storto!');\n return;\n }\n\n const localResponse = await startAuthentication(response.data);\n const verifyResponse = await verifyWebAuthnLogin(localResponse);\n\n if (!verifyResponse.success) {\n alert(verifyResponse.message ?? 'Qualcosa è andato storto!');\n return;\n }\n\n alert('Accesso avvenuto con successo!');\n }\n };\n\n return (\n

\n \n

\n );\n}\n" }) }), "\n", _jsxs(_components.h2, { id: "conclusione", children: ["Conclusione", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusione", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Congratulazioni per aver navigato attraverso le complessità dell'implementazione di WebAuthn in un'applicazione Next.js. Mentre concludiamo, è importante affrontare alcune considerazioni cruciali per il suo deployment in un ambiente di produzione." }), "\n", _jsxs(_components.h3, { id: "considerazioni-chiave-per-il-deployment-in-produzione", children: ["Considerazioni chiave per il deployment in produzione", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#considerazioni-chiave-per-il-deployment-in-produzione", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Regolazione dell'Identificatore Utente" }), ": In questo tutorial, abbiamo utilizzato un indirizzo email come identificatore utente. Tuttavia, in uno scenario di produzione, potrebbe essere necessario utilizzare un identificatore diverso, come un ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "userId" }) }), " o ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "username" }) }), "."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Integrazione del Database" }), ": Mentre abbiamo utilizzato KV di Vercel come semplice dimostrazione di gestione dei dati delle sessioni e degli utenti, un'applicazione del mondo reale dovrebbe integrare un sistema di database più robusto (come PostgreSQL, MongoDB, ecc.)"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Personalizzazione delle Opzioni WebAuthn" }), ": Le opzioni WebAuthn che abbiamo esplorato sono un punto di partenza. A seconda delle esigenze della tua applicazione e delle politiche di sicurezza, potresti dover regolare queste impostazioni. Consulta la ", _jsx(_components.a, { href: "https://www.w3.org/TR/webauthn/", children: "documentazione WebAuthn" }), " e la ", _jsx(_components.a, { href: "https://github.com/MasterKale/SimpleWebAuthn", children: "documentazione della libreria Simple WebAuthn" }), " per ricevere guida sulla personalizzazione di queste opzioni per soddisfare le tue esigenze specifiche."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Grazie per averci seguito in questa avventura educativa. Anche in questo esempio minimale, integrare WebAuthn non è un compito semplice. C'è un'altra opzione, prova WebAuthn nel MFA di Logto:" }), "\n", _jsx(LogtoCloudButton, { children: "Prova l'autenticazione a più fattori di Logto" })] }); } 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."); }