"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "voraussetzungen", "hProperties": { "id": "voraussetzungen" } }, "depth": 2, "value": "Voraussetzungen" }, { "data": { "id": "implementierung-der-session-speicherung-mit-vercels-kv", "hProperties": { "id": "implementierung-der-session-speicherung-mit-vercels-kv" } }, "depth": 2, "value": "Implementierung der Session-Speicherung mit Vercels KV" }, { "data": { "id": "einrichtung-der-kv-speicherung", "hProperties": { "id": "einrichtung-der-kv-speicherung" } }, "depth": 3, "value": "Einrichtung der KV-Speicherung" }, { "data": { "id": "implementiere-sitzungsverwaltungsfunktionen", "hProperties": { "id": "implementiere-sitzungsverwaltungsfunktionen" } }, "depth": 3, "value": "Implementiere Sitzungsverwaltungsfunktionen" }, { "data": { "id": "implementierung-der-benutzerdatenbank-mit-vercels-kv", "hProperties": { "id": "implementierung-der-benutzerdatenbank-mit-vercels-kv" } }, "depth": 2, "value": "Implementierung der Benutzerdatenbank mit Vercels KV" }, { "data": { "id": "vorbereitung-der-webauthn-funktionen", "hProperties": { "id": "vorbereitung-der-webauthn-funktionen" } }, "depth": 2, "value": "Vorbereitung der WebAuthn-Funktionen" }, { "data": { "id": "baue-die-webseite", "hProperties": { "id": "baue-die-webseite" } }, "depth": 2, "value": "Baue die Webseite" }, { "data": { "id": "fazit", "hProperties": { "id": "fazit" } }, "depth": 2, "value": "Fazit" }, { "data": { "id": "wichtige-überlegungen-für-den-produktionseinsatz", "hProperties": { "id": "wichtige-überlegungen-für-den-produktionseinsatz" } }, "depth": 3, "value": "Wichtige Überlegungen für den Produktionseinsatz" }]; const readingTime = { "minutes": 5, "words": 1576, "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: ["Willkommen zurück zu unserer WebAuthn-Serie. In unseren vorherigen Artikeln haben wir ", _jsx(_components.a, { href: "https://blog.logto.io/webauthn-base-knowledge/", children: "die Grundlagen von WebAuthn" }), " und einen ", _jsx(_components.a, { href: "https://blog.logto.io/web-authn-and-passkey-101/", children: "101-Leitfaden" }), " behandelt. Wenn du gerade erst zu uns stößt, schau dir diese grundlegenden Artikel an, um auf dem neuesten Stand zu sein."] }), "\n", _jsx(_components.p, { children: "Heute krempeln wir die Ärmel hoch, um Theorie in die Praxis umzusetzen. Wir nutzen die Kraft von Next.js mit der neuen Funktion „Serveraktionen“. Unser Ziel? WebAuthn in einer Next.js-Anwendung implementieren und bereit für WebAuthn sein." }), "\n", _jsxs(_components.p, { children: ["Bevor wir in die Code-Tiefe eintauchen, hier ein Vorgeschmack darauf, was dich am Ende der Reise erwartet - eine vollständig funktionale ", _jsx(_components.a, { href: "https://nextjs-webauthn-alpha.vercel.app/", children: "Demo-Website" }), ". Erkunde sie, um WebAuthn in Aktion zu sehen und einen Vorgeschmack darauf zu bekommen, was du bauen wirst. Auf dieser Demo-Website kannst du neue Benutzer registrieren und dich mit den gerade registrierten Passkeys einloggen."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/preview_fe67ff2888.webp", alt: "Vorschau" }) }), "\n", _jsxs(_components.p, { children: ["Und für diejenigen, die lieber eine Karte zur Hand haben, haben wir dich abgesichert! Der gesamte Code, den wir besprechen werden, ist in einem öffentlichen ", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-webauthn", children: "GitHub-Repository" }), " verfügbar. Dieses Repository ist dein Begleiter, der den vollständigen Quellcode unserer Implementierung bietet."] }), "\n", _jsx(_components.p, { children: "Bereit für dieses spannende Abenteuer? Lass uns beginnen!" }), "\n", _jsxs(_components.h2, { id: "voraussetzungen", children: ["Voraussetzungen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#voraussetzungen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Bevor wir beginnen, stellen wir sicher, dass wir alles haben, was wir brauchen:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Ein Next.js-Projekt" }), ": Wenn du noch kein Next.js-Projekt eingerichtet hast, hier ist ein ", _jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/installation", children: "schneller Leitfaden" }), ", um loszulegen."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.a, { href: "https://github.com/MasterKale/SimpleWebAuthn", children: "Simple WebAuthn Library" }) }), ": Mehrere Pakete, um den Aufwand zur Integration von WebAuthn in eine Website zu reduzieren. Verwende deinen bevorzugten Paketmanager, um ", _jsx(_components.code, { children: "@simplewebauthn/browser" }), ", ", _jsx(_components.code, { children: "@simplewebauthn/server" }), " und ", _jsx(_components.code, { children: "@simplewebauthn/typescript-types" }), " zu installieren."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Session Storage" }), ": Wir verwenden Session Storage, um WebAuthn-Challenges zu verwalten. Wir nutzen ", _jsx(_components.a, { href: "https://vercel.com/docs/storage/vercel-kv", children: "vercels KV" }), ", um dies zu erreichen."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Eine Benutzerdatenbank" }), ": Ein Ort, um die registrierten Passkeys unserer Benutzer zu speichern. Um es einfach zu halten, verwenden wir vercels KV zu Demonstrationszwecken."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Mit unseren Werkzeugen und Materialien in der Hand sind wir bereit, mit dem Bau zu beginnen." }), "\n", _jsxs(_components.h2, { id: "implementierung-der-session-speicherung-mit-vercels-kv", children: ["Implementierung der Session-Speicherung mit Vercels KV", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementierung-der-session-speicherung-mit-vercels-kv", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "einrichtung-der-kv-speicherung", children: ["Einrichtung der KV-Speicherung", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#einrichtung-der-kv-speicherung", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Es ist einfach, eine KV-Speicherung sowohl in der Produktion als auch in der lokalen Entwicklung zu initialisieren. Folge diesem Leitfaden, um einen KV-Speicher mit deinem Projekt zu verbinden und die Umgebungswerte abzurufen: ", _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: "implementiere-sitzungsverwaltungsfunktionen", children: ["Implementiere Sitzungsverwaltungsfunktionen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementiere-sitzungsverwaltungsfunktionen", 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: "Wir haben zwei Funktionen exportiert:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "getCurrentSession" }), ": Verwende den Cookie-Helfer von Next.js, um eine Sitzung für die aktuelle Anfrage zu erstellen und den Wert zurückzugeben."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "updateCurrentSession" }), ": Speichert Daten in der aktuellen Sitzung."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "implementierung-der-benutzerdatenbank-mit-vercels-kv", children: ["Implementierung der Benutzerdatenbank mit Vercels KV", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementierung-der-benutzerdatenbank-mit-vercels-kv", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Ähnlich wie bei unserer Sitzung-Implementierung, lass uns eine einfache Benutzerdatenbank implementieren." }), "\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// Die ursprünglichen Typen sind \"Buffer\", die von KV nicht unterstützt werden\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: "Wir haben Funktionen erstellt, um Benutzer nach E-Mail zu finden und Benutzerdaten nach E-Mail zu aktualisieren. Denke daran, dass dies nur zur Demonstration dient. Im echten Produkt werden die Benutzerdaten normalerweise in einer Datenbank gespeichert." }), "\n", _jsxs(_components.h2, { id: "vorbereitung-der-webauthn-funktionen", children: ["Vorbereitung der WebAuthn-Funktionen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#vorbereitung-der-webauthn-funktionen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Bevor wir fortfahren, sehen wir uns das Diagramm des Registrierungs- und Authentifizierungsflusses an:" }), "\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: Anforderung, einen neuen Passkey zu registrieren\n WebPage->>API Server: Registrierungseinstellungen abrufen (generateWebAuthnRegistrationOptions)\n API Server->>WebPage: Optionen\n WebPage->>WebPage: WebAuthn-API aufrufen\n WebPage->>User: Aufforderung zur Authentifizierung\n User->>WebPage: Auth durchführen\n WebPage->>API Server: WebAuthn-API-Antwort senden\n API Server->>API Server: Überprüfen und speichern (verifyWebAuthnRegistration)\n API Server->>WebPage: Ergebnis zurückgeben\n WebPage->>User: ✅\n" }) }), "\n", _jsx(_components.p, { children: "Wie du siehst, müssen wir 2 Funktionen vorbereiten:" }), "\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: Anfrage zum Einloggen in eine E-Mail\n WebPage->>API Server: Authentifizierungsoptionen abrufen (generateWebAuthnLoginOptions)\n API Server->>WebPage: Optionen\n WebPage->>WebPage: WebAuthn-API aufrufen\n WebPage->>User: Aufforderung zur Authentifizierung\n User->>WebPage: Auth durchführen\n WebPage->>API Server: WebAuthn-API-Antwort senden\n API Server->>API Server: Überprüfen (verifyWebAuthnLogin)\n API Server->>WebPage: Ergebnis zurückgeben\n WebPage->>User: ✅\n" }) }), "\n", _jsx(_components.p, { children: "Ähnlich wie bei der Registrierung benötigt auch der Login 2 Funktionen:" }), "\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: "Hier ist der Code:" }), "\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 * Unterstütze die zwei häufigsten Algorithmen: ES256 und 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 abgelaufen',\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: 'Registrierung fehlgeschlagen',\n };\n }\n\n const { credentialPublicKey, credentialID, counter } = registrationInfo;\n\n /**\n * Füge das zurückgegebene Gerät zur Geräteliste des Benutzers hinzu\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 abgelaufen',\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 ist bei dieser Seite nicht registriert',\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: "baue-die-webseite", children: ["Baue die Webseite", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#baue-die-webseite", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Wir haben die Vorbereitung abgeschlossen, lass uns die Seite bauen:" }), "\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 ?? 'Etwas ist schief gelaufen!');\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 ?? 'Etwas ist schief gelaufen!');\n return;\n }\n\n alert('Registrierung erfolgreich!');\n } else {\n const response = await generateWebAuthnLoginOptions(email);\n\n if (!response.success || !response.data) {\n alert(response.message ?? 'Etwas ist schief gelaufen!');\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 ?? 'Etwas ist schief gelaufen!');\n return;\n }\n\n alert('Login erfolgreich!');\n }\n };\n\n return (\n

\n \n

\n );\n}\n" }) }), "\n", _jsxs(_components.h2, { id: "fazit", children: ["Fazit", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#fazit", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Herzlichen Glückwunsch, dass du die Komplexität der Implementierung von WebAuthn in einer Next.js-Anwendung gemeistert hast. Wenn wir zum Schluss kommen, ist es wichtig, einige entscheidende Überlegungen für den Einsatz in einer Produktionsumgebung anzusprechen." }), "\n", _jsxs(_components.h3, { id: "wichtige-überlegungen-für-den-produktionseinsatz", children: ["Wichtige Überlegungen für den Produktionseinsatz", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#wichtige-überlegungen-für-den-produktionseinsatz", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Anpassung der Benutzerkennung" }), ": In diesem Tutorial haben wir eine E-Mail-Adresse als Benutzerkennung verwendet. In einer Produktionssituation könntest du jedoch eine andere Kennung verwenden, wie z .", _jsx(_components.strong, { children: _jsx(_components.code, { children: "userId" }) }), " oder ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "username" }) }), "."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Datenbankintegration" }), ": Während wir Vercels KV als einfache Demonstration des Session- und Benutzerdatenmanagements genutzt haben, sollte eine realistische Anwendung ein robusteres Datenbanksystem integrieren (wie PostgreSQL, MongoDB usw.)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Anpassung der WebAuthn-Optionen" }), ": Die WebAuthn-Optionen, die wir untersucht haben, sind ein Ausgangspunkt. Abhängig von den Anforderungen und Sicherheitsrichtlinien deiner Anwendung musst du möglicherweise diese Einstellungen anpassen. Konsultiere die ", _jsx(_components.a, { href: "https://www.w3.org/TR/webauthn/", children: "WebAuthn-Dokumentation" }), " und die ", _jsx(_components.a, { href: "https://github.com/MasterKale/SimpleWebAuthn", children: "Dokumentation der Simple WebAuthn Bibliothek" }), " für Hinweise zur Anpassung dieser Optionen an deine spezifischen Bedürfnisse."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Vielen Dank, dass du uns auf diesem Bildungsabenteuer begleitet hast. Auch in diesem minimalen Beispiel ist die Integration von WebAuthn keine einfache Aufgabe, es gibt eine andere Möglichkeit, versuche WebAuthn in Logto's MFA:" }), "\n", _jsx(LogtoCloudButton, { children: "Versuche Logto Multi-Faktor-Authentifizierung" })] }); } 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."); }