"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": "crea-unapplicazione-logto", "hProperties": { "id": "crea-unapplicazione-logto" } }, "depth": 2, "value": "Crea un'applicazione Logto" }, { "data": { "id": "configura-la-tua-estensione-chrome", "hProperties": { "id": "configura-la-tua-estensione-chrome" } }, "depth": 2, "value": "Configura la tua estensione Chrome" }, { "data": { "id": "installa-logto-sdk", "hProperties": { "id": "installa-logto-sdk" } }, "depth": 3, "value": "Installa Logto SDK" }, { "data": { "id": "aggiorna-manifestjson", "hProperties": { "id": "aggiorna-manifestjson" } }, "depth": 3, "value": "Aggiorna manifest.json" }, { "data": { "id": "configura-uno-script-in-background-service-worker", "hProperties": { "id": "configura-uno-script-in-background-service-worker" } }, "depth": 3, "value": "Configura uno script in background (service worker)" }, { "data": { "id": "aggiorna-le-impostazioni-dellapplicazione-logto", "hProperties": { "id": "aggiorna-le-impostazioni-dellapplicazione-logto" } }, "depth": 2, "value": "Aggiorna le impostazioni dell'applicazione Logto" }, { "data": { "id": "aggiungi-pulsanti-di-accesso-e-disconnessione-al-popup", "hProperties": { "id": "aggiungi-pulsanti-di-accesso-e-disconnessione-al-popup" } }, "depth": 2, "value": "Aggiungi pulsanti di accesso e disconnessione al popup" }, { "data": { "id": "punto-di-controllo-testa-il-flusso-di-autenticazione", "hProperties": { "id": "punto-di-controllo-testa-il-flusso-di-autenticazione" } }, "depth": 2, "value": "Punto di controllo: Testa il flusso di autenticazione" }, { "data": { "id": "verifica-lo-stato-di-autenticazione", "hProperties": { "id": "verifica-lo-stato-di-autenticazione" } }, "depth": 2, "value": "Verifica lo stato di autenticazione" }, { "data": { "id": "altre-considerazioni", "hProperties": { "id": "altre-considerazioni" } }, "depth": 2, "value": "Altre considerazioni" }, { "data": { "id": "conclusione", "hProperties": { "id": "conclusione" } }, "depth": 2, "value": "Conclusione" }]; const readingTime = { "minutes": 4, "words": 1339, "text": "4 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 }, {Info, LogtoCloudButton, Note} = _components; if (!Info) _missingMdxReference("Info", true); if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); if (!Note) _missingMdxReference("Note", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Le estensioni Chrome sono un ottimo modo per estendere la funzionalità del browser Chrome. Quando hai un'estensione popolare, potresti volerla monetizzare offrendo funzionalità pro agli utenti che le pagano. L'autenticazione utente è indispensabile per questo scopo:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Identificazione utente" }), ": Devi sapere chi è l'utente per fornire funzionalità personalizzate."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Controllo accessi" }), ": Devi controllare chi può accedere alle funzionalità a pagamento."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Gestione degli abbonamenti" }), ": Devi fornire un modo per permettere agli utenti di iscriversi e gestire i propri abbonamenti."] }), "\n"] }), "\n", _jsx(_components.p, { children: "D'altra parte, non vogliamo rimanere bloccati sul sistema di account Google, poiché i tuoi utenti potrebbero preferire utilizzare altri account, o potresti avere più servizi che vuoi integrare con lo stesso sistema di identità." }), "\n", _jsx(_components.p, { children: "Un rapido riepilogo dei vantaggi dell'utilizzo di OpenID Connect (OIDC) per l'autenticazione:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Nessun lock-in del fornitore" }), ": I tuoi utenti possono utilizzare diversi metodi per accedere, piuttosto che essere costretti a Google."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Single Sign-On (SSO)" }), ": Gli utenti possono accedere una volta e accedere a più servizi o applicazioni."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Standardizzato" }), ": OIDC è uno standard aperto ampiamente adottato e supportato, ed è anche sicuro."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["In questo tutorial, utilizzeremo ", _jsx(_components.a, { href: "https://logto.io/", children: "Logto" }), " come provider OIDC, che è un'alternativa a Auth0 per costruire infrastrutture di identità."] }), "\n", _jsx(_components.p, { children: "Iniziamo!" }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Puoi trovare un progetto di esempio per questo tutorial nel ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/HEAD/packages/chrome-extension-sample", children: "nostro repository GitHub\n" }), "."] }) }), "\n", _jsxs(_components.h2, { id: "introduzione", children: ["Introduzione", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduzione", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Supponendo di avere inserito un pulsante \"Accedi\" nel popup della tua estensione Chrome, il flusso di autenticazione sarà simile a questo:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant A as Popup dell'estensione\n participant B as Service worker dell'estensione\n participant C as Esperienza di accesso Logto\n\n A->>B: Invoca l'accesso\n B->>C: Reindirizza a Logto\n C->>C: L'utente accede\n C->>B: Reindirizza nuovamente all'estensione\n B->>A: Notifica il popup\n" }) }), "\n", _jsxs(_components.p, { children: ["Per altre pagine interattive della tua estensione, devi solo sostituire il partecipante ", _jsx(_components.code, { children: "Popup dell'estensione" }), " con il nome della pagina. In questo tutorial, ci concentreremo sulla pagina del popup."] }), "\n", _jsxs(_components.h2, { id: "crea-unapplicazione-logto", children: ["Crea un'applicazione Logto", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#crea-unapplicazione-logto", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Per iniziare, crea un'applicazione Logto con il tipo \"Applicazione a pagina singola\". Segui questi passaggi per creare un'applicazione Logto:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Accedi al ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "Logto Console" }), "."] }), "\n", _jsxs(_components.li, { children: ["Clicca su ", _jsx(_components.strong, { children: "Crea applicazione" }), "."] }), "\n", _jsx(_components.li, { children: "Nella pagina aperta, trova il pulsante \"Crea app senza framework\" in fondo e clicca su di esso." }), "\n", _jsx(_components.li, { children: "Scegli il tipo \"Applicazione a pagina singola\" e inserisci il nome della tua applicazione." }), "\n", _jsxs(_components.li, { children: ["Clicca su ", _jsx(_components.strong, { children: "Crea" }), "."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "configura-la-tua-estensione-chrome", children: ["Configura la tua estensione Chrome", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configura-la-tua-estensione-chrome", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "installa-logto-sdk", children: ["Installa Logto SDK", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#installa-logto-sdk", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Installa Logto SDK nel progetto della tua estensione Chrome:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# o pnpm, yarn, ecc.\nnpm i @logto/chrome-extension\n" }) }), "\n", _jsxs(_components.h3, { id: "aggiorna-manifestjson", children: ["Aggiorna ", _jsx(_components.code, { children: "manifest.json" }), _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#aggiorna-manifestjson", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Logto SDK richiede i seguenti permessi in ", _jsx(_components.code, { children: "manifest.json" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-json", children: "{\n \"permissions\": [\"identity\", \"storage\"],\n \"host_permissions\": [\"https://*.logto.app/*\"]\n}\n" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "permissions.identity" }), ": Richiesto per l'API Identity di Chrome, usata per l'accesso e la disconnessione."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "permissions.storage" }), ": Richiesto per memorizzare la sessione dell'utente."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "host_permissions" }), ": Richiesto affinché Logto SDK possa comunicare con le API Logto."] }), "\n"] }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Se stai utilizzando un dominio personalizzato su Logto Cloud, devi aggiornare il ", _jsx(_components.code, { children: "host_permissions" }), " per corrispondere al tuo dominio."] }) }), "\n", _jsxs(_components.h3, { id: "configura-uno-script-in-background-service-worker", children: ["Configura uno script in background (service worker)", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configura-uno-script-in-background-service-worker", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Nello script in background della tua estensione Chrome, inizializza Logto SDK:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// service-worker.js\nimport LogtoClient from '@logto/chrome-extension';\n\nexport const client = new LogtoClient({\n endpoint: ''\n appId: '',\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Sostituisci ", _jsx(_components.code, { children: "" }), " e ", _jsx(_components.code, { children: "" }), " con i valori effettivi. Puoi trovare questi valori nella pagina dell'applicazione appena creata nel Logto Console."] }), "\n", _jsxs(_components.p, { children: ["Se non hai uno script in background, puoi seguire la ", _jsx(_components.a, { href: "https://developer.chrome.com/docs/extensions/develop/concepts/service-workers/basics", children: "guida ufficiale" }), " per crearne uno."] }), "\n", _jsxs(Info, { children: [_jsx(_components.p, { children: _jsx(_components.strong, { children: "Perché abbiamo bisogno di uno script in background?" }) }), _jsx(_components.p, { children: "Le pagine normali dell'estensione come il popup o la pagina delle opzioni non possono funzionare in background e possono essere chiuse durante il processo di autenticazione. Uno script in background garantisce che il processo di autenticazione possa essere gestito correttamente." })] }), "\n", _jsx(_components.p, { children: "Quindi, dobbiamo ascoltare il messaggio dalle altre pagine dell'estensione e gestire il processo di autenticazione:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// service-worker.js\nchrome.runtime.onMessage.addListener((message, sender, sendResponse) => {\n // Nel codice seguente, poiché restituiamo `true` per ogni azione, dobbiamo chiamare `sendResponse`\n // per notificare il mittente. Puoi anche gestire gli errori qui, o usare altri modi per notificare il mittente.\n\n if (message.action === 'signIn') {\n const redirectUri = chrome.identity.getRedirectURL('/callback');\n client.signIn(redirectUri).finally(sendResponse);\n return true;\n }\n\n if (message.action === 'signOut') {\n const redirectUri = chrome.identity.getRedirectURL();\n client.signOut(redirectUri).finally(sendResponse);\n return true;\n }\n\n return false;\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Potresti notare che ci sono due URI di reindirizzamento usati nel codice sopra. Entrambi sono creati da ", _jsx(_components.code, { children: "chrome.identity.getRedirectURL" }), ", che è un ", _jsx(_components.a, { href: "https://developer.chrome.com/docs/extensions/reference/api/identity#method-getRedirectURL", children: "API integrata di Chrome" }), " per generare un URL di reindirizzamento per i flussi di autenticazione. I due URI saranno:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "https://.chromiumapp.org/callback" }), " per l'accesso."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "https://.chromiumapp.org/" }), " per la disconnessione."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Nota che questi URI non sono accessibili e sono utilizzati solo per Chrome per attivare azioni specifiche per il processo di autenticazione." }), "\n", _jsxs(_components.h2, { id: "aggiorna-le-impostazioni-dellapplicazione-logto", children: ["Aggiorna le impostazioni dell'applicazione Logto", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#aggiorna-le-impostazioni-dellapplicazione-logto", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Ora dobbiamo aggiornare le impostazioni dell'applicazione Logto per consentire gli URI di reindirizzamento che abbiamo appena creato." }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Vai alla pagina dell'applicazione nel Logto Console." }), "\n", _jsxs(_components.li, { children: ["Nella sezione \"URI di reindirizzamento\", aggiungi l'URI: ", _jsx(_components.code, { children: "https://.chromiumapp.org/callback" }), "."] }), "\n", _jsxs(_components.li, { children: ["Nella sezione \"URI di reindirizzamento post disconnessione\", aggiungi l'URI: ", _jsx(_components.code, { children: "https://.chromiumapp.org/" }), "."] }), "\n", _jsxs(_components.li, { children: ["Nella sezione \"Origini consentite dal CORS\", aggiungi l'URI: ", _jsx(_components.code, { children: "chrome-extension://" }), ". L'SDK nell'estensione Chrome userà questa origine per comunicare con le API Logto."] }), "\n", _jsxs(_components.li, { children: ["Clicca su ", _jsx(_components.strong, { children: "Salva modifiche" }), "."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Ricordati di sostituire ", _jsx(_components.code, { children: "" }), " con il tuo ID effettivo dell'estensione. Puoi trovare l'ID dell'estensione nella pagina ", _jsx(_components.code, { children: "chrome://extensions" }), "."] }), "\n", _jsx(_components.p, { children: "Dopo aver aggiornato le impostazioni, le impostazioni dell'applicazione Logto dovrebbero apparire così:" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/app_settings_f30c24be38.webp", alt: "Impostazioni dell'applicazione" }) }), "\n", _jsxs(_components.h2, { id: "aggiungi-pulsanti-di-accesso-e-disconnessione-al-popup", children: ["Aggiungi pulsanti di accesso e disconnessione al popup", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#aggiungi-pulsanti-di-accesso-e-disconnessione-al-popup", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Ci siamo quasi! Aggiungiamo i pulsanti di accesso e disconnessione e altra logica necessaria alla pagina del popup." }), "\n", _jsxs(_components.p, { children: ["Nel file ", _jsx(_components.code, { children: "popup.html" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n" }) }), "\n", _jsxs(_components.p, { children: ["Nel file ", _jsx(_components.code, { children: "popup.js" }), " (supponendo che ", _jsx(_components.code, { children: "popup.js" }), " sia incluso in ", _jsx(_components.code, { children: "popup.html" }), "):"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// popup.js\ndocument.getElementById('sign-in').addEventListener('click', async () => {\n await chrome.runtime.sendMessage({ action: 'signIn' });\n // L'accesso è completato (o fallito), puoi aggiornare l'interfaccia utente qui.\n});\n\ndocument.getElementById('sign-out').addEventListener('click', async () => {\n await chrome.runtime.sendMessage({ action: 'signOut' });\n // La disconnessione è completata (o fallita), puoi aggiornare l'interfaccia utente qui.\n});\n" }) }), "\n", _jsxs(_components.h2, { id: "punto-di-controllo-testa-il-flusso-di-autenticazione", children: ["Punto di controllo: Testa il flusso di autenticazione", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#punto-di-controllo-testa-il-flusso-di-autenticazione", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Ora puoi testare il flusso di autenticazione nella tua estensione Chrome:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Apri il popup dell'estensione." }), "\n", _jsx(_components.li, { children: "Clicca sul pulsante \"Accedi\"." }), "\n", _jsx(_components.li, { children: "Verrai reindirizzato alla pagina di accesso Logto." }), "\n", _jsx(_components.li, { children: "Accedi con il tuo account Logto." }), "\n", _jsx(_components.li, { children: "Verrai reindirizzato nuovamente a Chrome." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "verifica-lo-stato-di-autenticazione", children: ["Verifica lo stato di autenticazione", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#verifica-lo-stato-di-autenticazione", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Poiché Chrome fornisce API di archiviazione unificate, piuttosto che il flusso di accesso e disconnessione, tutti gli altri metodi di Logto SDK possono essere utilizzati direttamente nella pagina del popup." }), "\n", _jsxs(_components.p, { children: ["Nel tuo ", _jsx(_components.code, { children: "popup.js" }), ", puoi riutilizzare l'istanza di ", _jsx(_components.code, { children: "LogtoClient" }), " creata nello script in background o crearne una nuova con la stessa configurazione:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// popup.js\nimport LogtoClient from '@logto/chrome-extension';\n\nconst client = new LogtoClient({\n endpoint: ''\n appId: '',\n});\n\n// Oppure riutilizza l'istanza del client creata nello script in background\nimport { client } from './service-worker.js';\n" }) }), "\n", _jsx(_components.p, { children: "Quindi puoi creare una funzione per caricare lo stato di autenticazione e il profilo utente:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// popup.js\nconst loadAuthenticationState = async () => {\n const isAuthenticated = await client.isAuthenticated();\n // Aggiorna l'interfaccia utente in base allo stato di autenticazione\n\n if (isAuthenticated) {\n const user = await client.getIdTokenClaims(); // { sub: '...', email: '...', ... }\n // Aggiorna l'interfaccia utente con il profilo utente\n }\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Puoi anche combinare la funzione ", _jsx(_components.code, { children: "loadAuthenticationState" }), " con la logica di accesso e disconnessione:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// popup.js\ndocument.getElementById('sign-in').addEventListener('click', async () => {\n await chrome.runtime.sendMessage({ action: 'signIn' });\n await loadAuthenticationState();\n});\n\ndocument.getElementById('sign-out').addEventListener('click', async () => {\n await chrome.runtime.sendMessage({ action: 'signOut' });\n await loadAuthenticationState();\n});\n" }) }), "\n", _jsx(_components.p, { children: "Ecco un esempio della pagina popup con lo stato di autenticazione:" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/extension_popup_03b2ad10b2.webp", alt: "Pagina del popup" }) }), "\n", _jsxs(_components.p, { children: ["Per ulteriori informazioni sull'SDK, puoi fare riferimento alla ", _jsx(_components.a, { href: "https://docs.logto.io/sdk/vanilla-js/", children: "documentazione ufficiale del browser SDK" }), ". L'SDK del browser condivide le stesse API con l'SDK dell'estensione Chrome."] }), "\n", _jsxs(_components.h2, { id: "altre-considerazioni", children: ["Altre considerazioni", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#altre-considerazioni", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Raggruppamento del service worker" }), ": Se utilizzi un bundler come Webpack o Rollup, devi impostare esplicitamente il target su ", _jsx(_components.code, { children: "browser" }), " o simile per evitare raggruppamenti non necessari dei moduli Node.js."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Risoluzione dei moduli" }), ": Logto Chrome extension SDK è un modulo solo ESM."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Consulta il nostro ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/HEAD/packages/chrome-extension-sample", children: "progetto di esempio" }), " per un esempio completo con TypeScript, Rollup e altre configurazioni."] }), "\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: "Con gli utenti autenticati, ora puoi offrire in modo sicuro funzionalità a pagamento nella tua estensione Chrome. Ad esempio, puoi memorizzare lo stato di abbonamento dell'utente nel profilo utente e verificarlo quando l'utente apre l'estensione." }), "\n", _jsx(_components.p, { children: "Combinando la potenza delle estensioni Chrome e Logto, puoi costruire un'estensione più flessibile e personalizzabile che sia amata sia da te che dai tuoi utenti." }), "\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."); }