"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "esivaatimukset", "hProperties": { "id": "esivaatimukset" } }, "depth": 2, "value": "Esivaatimukset" }, { "data": { "id": "istunnon-tallentaminen-vercelin-kvllä", "hProperties": { "id": "istunnon-tallentaminen-vercelin-kvllä" } }, "depth": 2, "value": "Istunnon tallentaminen Vercelin KV:llä" }, { "data": { "id": "kv-tallennuksen-asettaminen", "hProperties": { "id": "kv-tallennuksen-asettaminen" } }, "depth": 3, "value": "KV-tallennuksen asettaminen" }, { "data": { "id": "istunnonhallintafunktioiden-toteuttaminen", "hProperties": { "id": "istunnonhallintafunktioiden-toteuttaminen" } }, "depth": 3, "value": "Istunnonhallintafunktioiden toteuttaminen" }, { "data": { "id": "käyttäjä-tietokannan-toteuttaminen-vercelin-kvllä", "hProperties": { "id": "käyttäjä-tietokannan-toteuttaminen-vercelin-kvllä" } }, "depth": 2, "value": "Käyttäjä tietokannan toteuttaminen Vercelin KV:llä" }, { "data": { "id": "webauthn-funktioiden-valmistelu", "hProperties": { "id": "webauthn-funktioiden-valmistelu" } }, "depth": 2, "value": "WebAuthn-funktioiden valmistelu" }, { "data": { "id": "rakenna-verkkosivu", "hProperties": { "id": "rakenna-verkkosivu" } }, "depth": 2, "value": "Rakenna verkkosivu" }, { "data": { "id": "yhteenveto", "hProperties": { "id": "yhteenveto" } }, "depth": 2, "value": "Yhteenveto" }, { "data": { "id": "keskeiset-näkökohta-tuotantokäyttöön", "hProperties": { "id": "keskeiset-näkökohta-tuotantokäyttöön" } }, "depth": 3, "value": "Keskeiset näkökohta tuotantokäyttöön" }]; const readingTime = { "minutes": 4, "words": 1337, "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 }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["Tervetuloa takaisin WebAuthn-sarjaamme. Aiemmissa artikkeleissamme olemme käsitelleet ", _jsx(_components.a, { href: "https://blog.logto.io/webauthn-base-knowledge/", children: "WebAuthnin perusteita" }), " ja ", _jsx(_components.a, { href: "https://blog.logto.io/web-authn-and-passkey-101/", children: "101 opasta" }), ". Jos liityt mukaan vasta nyt, voit katsoa nämä perustavanlaatuiset osat päästäksesi ajan tasalle."] }), "\n", _jsx(_components.p, { children: "Tänään käärimme hihat ja laitamme teorian käytäntöön. Hyödynnämme Next.js:n voimaa uuden \"Server Actions\"-ominaisuuden avulla. Tavoitteemme? Toteuttaa WebAuthn Next.js-sovelluksessa ja valmistautua WebAuthniin." }), "\n", _jsxs(_components.p, { children: ["Ennen kuin sukellamme koodin maailmaan, tässä on katsaus siihen, mitä odottaa matkan päässä - täysin toimiva ", _jsx(_components.a, { href: "https://nextjs-webauthn-alpha.vercel.app/", children: "demo-sivusto" }), ". Tutustu siihen nähdäksesi WebAuthnin toiminnassa ja saadaksesi maistaa siitä, mitä olet rakentamassa. Tässä demo-sivustossa voit rekisteröidä uusia käyttäjiä ja kirjautua juuri rekisteröidyillä pääsyavaimilla."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/preview_fe67ff2888.webp", alt: "Esikatselu" }) }), "\n", _jsxs(_components.p, { children: ["Ja niille, jotka pitävät kartasta kädessään, olemme turvanasi! Kaikki koodi, jota käsittelemme, on saatavilla julkisessa ", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-webauthn", children: "GitHub-repositoriossa" }), ". Tämä repositorio on kumppanioppaasi, joka tarjoaa koko lähdekoodin toteutuksestamme."] }), "\n", _jsx(_components.p, { children: "Valmis lähtemään tälle jännittävälle seikkailulle? Aloitetaan!" }), "\n", _jsxs(_components.h2, { id: "esivaatimukset", children: ["Esivaatimukset", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#esivaatimukset", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Ennen kuin aloitamme, varmistetaan, että meillä on kaikki tarvittava:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Next.js-projekti" }), ": Jos et ole vielä perustanut Next.js-projektia, tässä on ", _jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/installation", children: "nopea opas" }), " aloittamiseen."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.a, { href: "https://github.com/MasterKale/SimpleWebAuthn", children: "Yksinkertainen WebAuthn-kirjasto" }) }), ": Useita paketteja, jotka auttavat vähentämään työtä, jota tarvitaan WebAuthnin sisällyttämiseksi verkkosivustoon. Käytä suosikkipaketinhallintaasi asentaaksesi ", _jsx(_components.code, { children: "@simplewebauthn/browser" }), ", ", _jsx(_components.code, { children: "@simplewebauthn/server" }), " ja ", _jsx(_components.code, { children: "@simplewebauthn/typescript-types" })] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Istuntosäilytys" }), ": Käytämme istuntosäilytystä hallitaksemme WebAuthn-haasteita. Käytämme ", _jsx(_components.a, { href: "https://vercel.com/docs/storage/vercel-kv", children: "Vercelin KV:tä" }), " tämän saavuttamiseksi."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Käyttäjätietokanta" }), ": Paikka säilyttää rekisteröityjen pääsyavaimien käyttäjät. Yksinkertaistamiseksi käytämme myös Vercelin KV:tä esittelyyn."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Nyt kun työkalut ja materiaalit ovat käsillä, olemme valmiita aloittamaan rakentamisen." }), "\n", _jsxs(_components.h2, { id: "istunnon-tallentaminen-vercelin-kvllä", children: ["Istunnon tallentaminen Vercelin KV:llä", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#istunnon-tallentaminen-vercelin-kvllä", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "kv-tallennuksen-asettaminen", children: ["KV-tallennuksen asettaminen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#kv-tallennuksen-asettaminen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["On helppoa alustaa KV-tallennus sekä tuotannossa että paikallisessa kehityksessä, noudata tätä ohjetta liittääksesi KV-kauppa projektiisi ja vetääksesi ympäristöarvot: ", _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: "istunnonhallintafunktioiden-toteuttaminen", children: ["Istunnonhallintafunktioiden toteuttaminen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#istunnonhallintafunktioiden-toteuttaminen", 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: "Veimme ulos 2 funktiota:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "getCurrentSession" }), ": Käytä Next.js:n evästeavustajaa luomaan istunto nykyiselle pyynnölle ja palauttamaan arvo."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "updateCurrentSession" }), ": Tallenna tiedot nykyiseen istuntoon."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "käyttäjä-tietokannan-toteuttaminen-vercelin-kvllä", children: ["Käyttäjä tietokannan toteuttaminen Vercelin KV:llä", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#käyttäjä-tietokannan-toteuttaminen-vercelin-kvllä", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Samoin kuin istuntojen toteutuksessa, toteutetaan yksinkertainen käyttäjätietokanta." }), "\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// Alkuperäiset tyypit ovat \"Buffer\" joita KV ei tue\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('User already exists');\n }\n\n await kv.set(`${userPrefix}${email}`, { email, devices });\n return { email, devices };\n};\n" }) }), "\n", _jsx(_components.p, { children: "Luoimme funktioita käyttäjän löytämiseksi sähköpostin perusteella ja käyttäjätietojen päivittämiseen sähköpostin perusteella. Muista, että tämä on vain esittelytarkoituksiin, oikeassa tuotteessa käyttäjätiedot pidetään yleensä tietokannassa." }), "\n", _jsxs(_components.h2, { id: "webauthn-funktioiden-valmistelu", children: ["WebAuthn-funktioiden valmistelu", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#webauthn-funktioiden-valmistelu", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Ennen kuin jatkamme, katsotaan rekisteröinnin ja todennuksen kulun kaaviota:" }), "\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: Pyydä uuden pääsyavaimen rekisteröinti\n WebPage->>API Server: Hanki rekisteröintivaihtoehdot (generateWebAuthnRegistrationOptions)\n API Server->>WebPage: vaihtoehdot\n WebPage->>WebPage: Kutsu WebAuthn API\n WebPage->>User: Kehotus todentamiseen\n User->>WebPage: Suorita todentaminen\n WebPage->>API Server: Lähetä WebAuthn API vastaus\n API Server->>API Server: Vahvista ja tallenna (verifyWebAuthnRegistration)\n API Server->>WebPage: Palauta tulos\n WebPage->>User: ✅\n" }) }), "\n", _jsx(_components.p, { children: "Kuten näet, meidän on valmistettava 2 funktiota:" }), "\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: Pyydä kirjautumista sähköpostiin\n WebPage->>API Server: Hanki todennushyvinkinnot (generateWebAuthnLoginOptions)\n API Server->>WebPage: vaihtoehdot\n WebPage->>WebPage: Kutsu WebAuthn API\n WebPage->>User: Kehotus todentamiseen\n User->>WebPage: Suorita todentaminen\n WebPage->>API Server: Lähetä WebAuthn API vastaus\n API Server->>API Server: Vahvista (verifyWebAuthnLogin)\n API Server->>WebPage: Palauta tulos\n WebPage->>User: ✅\n" }) }), "\n", _jsx(_components.p, { children: "Rekisteröinnin tavoin kirjautumiseen tarvitaan 2 funktiota:" }), "\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: "Tässä on koodi:" }), "\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: 'User already exists',\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 * Tue kahta yleisintä algoritmia: ES256 ja 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: 'Session expired',\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: 'Registration failed',\n };\n }\n\n const { credentialPublicKey, credentialID, counter } = registrationInfo;\n\n /**\n * Lisää palautettu laite käyttäjän laitelistalle\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: 'User already exists',\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: 'User does not exist',\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: 'Session expired',\n };\n }\n\n const user = await findUser(email);\n\n if (!user) {\n return {\n success: false,\n message: 'User does not exist',\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: 'Authenticator is not registered with this site',\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: "rakenna-verkkosivu", children: ["Rakenna verkkosivu", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#rakenna-verkkosivu", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Olemme suorittaneet valmistelut, rakennetaan sivu:" }), "\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 ?? 'Jotain meni pieleen!');\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 ?? 'Jotain meni pieleen!');\n return;\n }\n\n alert('Rekisteröinti onnistui!');\n } else {\n const response = await generateWebAuthnLoginOptions(email);\n\n if (!response.success || !response.data) {\n alert(response.message ?? 'Jotain meni pieleen!');\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 ?? 'Jotain meni pieleen!');\n return;\n }\n\n alert('Kirjautuminen onnistui!');\n }\n };\n\n return (\n

\n \n

\n );\n}\n" }) }), "\n", _jsxs(_components.h2, { id: "yhteenveto", children: ["Yhteenveto", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#yhteenveto", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Onnittelut navigoitua WebAuthnin toteutuksen monimutkaisuuksien läpi Next.js-sovelluksessa. Kun lopetamme, on tärkeää käsitellä joitain keskeisiä näkökohtia sen käyttöönotosta tuotantoympäristössä." }), "\n", _jsxs(_components.h3, { id: "keskeiset-näkökohta-tuotantokäyttöön", children: ["Keskeiset näkökohta tuotantokäyttöön", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#keskeiset-näkökohta-tuotantokäyttöön", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Käyttäjätunnisteen säätäminen" }), ": Tässä oppaassa käytimme sähköpostiosoitetta käyttäjän tunnisteena. Tuotantotilanteessa saattaa olla tarpeen käyttää erilaista tunnistetta, kuten ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "userId" }) }), " tai ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "username" }) }), "."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Tietokantaintegraatio" }), ": Vaikka käytimme Vercelin KV:tä yksinkertaisena esimerkkinä istunto- ja käyttäjätietojen hallinnasta, todellisen maailman sovelluksen tulisi integroida tehokkaampi tietokantajärjestelmä (kuten PostgreSQL, MongoDB, jne.)"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "WebAuthn-vaihtoehtojen mukauttaminen" }), ": WebAuthn-vaihtoehdot, joita tutkimme, ovat aloituspiste. Sovelluksesi vaatimuksista ja tietoturvakäytännöistä riippuen saatat joutua säätämään näitä asetuksia. Katso ", _jsx(_components.a, { href: "https://www.w3.org/TR/webauthn/", children: "WebAuthn-dokumentointi" }), " ja ", _jsx(_components.a, { href: "https://github.com/MasterKale/SimpleWebAuthn", children: "Yksinkertainen WebAuthn-kirjaston dokumentointi" }), " ohjeistaaksesi näiden vaihtoehtojen mukauttamista tarpeidesi mukaan."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Kiitos, että liityit tämän opettavan seikkailun pariin. Vaikka tämä minimaalinen esimerkki olisi, WebAuthnin integrointi ei ole yksinkertainen tehtävä, on toinen vaihtoehto, kokeile WebAuthnia Logton MFA:ssa:" }), "\n", _jsx(LogtoCloudButton, { children: "Koe Logton monivaiheinen todennus" })] }); } 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."); }