"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "gereksinimler", "hProperties": { "id": "gereksinimler" } }, "depth": 2, "value": "Gereksinimler" }, { "data": { "id": "vercelın-kv-ile-oturum-depolaması-uygulaması", "hProperties": { "id": "vercelın-kv-ile-oturum-depolaması-uygulaması" } }, "depth": 2, "value": "Vercel’ın KV ile oturum depolaması uygulaması" }, { "data": { "id": "kv-depolamasını-kurma", "hProperties": { "id": "kv-depolamasını-kurma" } }, "depth": 3, "value": "KV depolamasını kurma" }, { "data": { "id": "oturum-yönetim-fonksiyonlarını-uygulayın", "hProperties": { "id": "oturum-yönetim-fonksiyonlarını-uygulayın" } }, "depth": 3, "value": "Oturum yönetim fonksiyonlarını uygulayın" }, { "data": { "id": "vercelın-kv-ile-bir-kullanıcı-veritabanı-uygulaması", "hProperties": { "id": "vercelın-kv-ile-bir-kullanıcı-veritabanı-uygulaması" } }, "depth": 2, "value": "Vercel’ın KV ile bir kullanıcı veritabanı uygulaması" }, { "data": { "id": "webauthn-fonksiyonlarını-hazırlamak", "hProperties": { "id": "webauthn-fonksiyonlarını-hazırlamak" } }, "depth": 2, "value": "WebAuthn fonksiyonlarını hazırlamak" }, { "data": { "id": "web-sayfasını-oluşturun", "hProperties": { "id": "web-sayfasını-oluşturun" } }, "depth": 2, "value": "Web sayfasını oluşturun" }, { "data": { "id": "sonuç", "hProperties": { "id": "sonuç" } }, "depth": 2, "value": "Sonuç" }, { "data": { "id": "üretime-dağıtım-i̇çin-önemli-hususlar", "hProperties": { "id": "üretime-dağıtım-i̇çin-önemli-hususlar" } }, "depth": 3, "value": "Üretime Dağıtım İçin Önemli Hususlar" }]; const readingTime = { "minutes": 5, "words": 1436, "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: ["WebAuthn serimize tekrar hoş geldiniz. Önceki makalelerimizde ", _jsx(_components.a, { href: "https://blog.logto.io/webauthn-base-knowledge/", children: "WebAuthn'in temellerini" }), " ve ", _jsx(_components.a, { href: "https://blog.logto.io/web-authn-and-passkey-101/", children: "101 kılavuzunu" }), " ele aldık. Eğer bize yeni katılıyorsan, hızlanmak için bu temel parçaları incelemekten çekinme."] }), "\n", _jsx(_components.p, { children: "Bugün, teoriyi pratiğe dökme zamanı. Next.js'in yeni bir özelliği olan “Sunucu Eylemleri”nin gücünden yararlanacağız. Amacımız? Next.js uygulamasında WebAuthn'i uygulamak ve WebAuthn'e hazır hale gelmek." }), "\n", _jsxs(_components.p, { children: ["Kod denizine dalmadan önce, yolculuğun sonundaki seni bekleyen şeye bir bakış atalım - tam işlevli bir ", _jsx(_components.a, { href: "https://nextjs-webauthn-alpha.vercel.app/", children: "demo web sitesi" }), ". WebAuthn'in nasıl çalıştığını görmek ve inşa edeceğin şeyin bir tadına bakmak için keşfet. Bu demo web sitesinde, yeni kullanıcılar kaydedebilir ve yeni kayıt edilen geçiş anahtarlarıyla giriş yapabilirsin."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/preview_fe67ff2888.webp", alt: "Önizleme" }) }), "\n", _jsxs(_components.p, { children: ["Ve elinde bir harita olmasını tercih edenler için, seni temin ettik! Tartışacağımız tüm kodlar herkese açık bir ", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-webauthn", children: "GitHub deposunda" }), " mevcut. Bu depo, uygulamamızın tam kaynak kodunu sunarak rehberin olacak."] }), "\n", _jsx(_components.p, { children: "Bu heyecan verici maceraya çıkmaya hazır mısın? Hadi başlayalım!" }), "\n", _jsxs(_components.h2, { id: "gereksinimler", children: ["Gereksinimler", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#gereksinimler", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Başlamadan önce, ihtiyacımız olan her şeye sahip olduğumuzdan emin olalım:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Bir Next.js Projesi" }), ": Henüz bir Next.js projesi kurmadıysan, başlangıç için ", _jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/installation", children: "hızlı bir kılavuz" }), " burada."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.a, { href: "https://github.com/MasterKale/SimpleWebAuthn", children: "Basit WebAuthn Kütüphanesi" }) }), ": WebAuthn'i bir web sitesine entegre etmek için gereken işi azaltmaya yardımcı olan çeşitli paketler. ", _jsx(_components.code, { children: "@simplewebauthn/browser" }), ", ", _jsx(_components.code, { children: "@simplewebauthn/server" }), " ve ", _jsx(_components.code, { children: "@simplewebauthn/typescript-types" }), " yüklemek için favori paket yöneticini kullan."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Oturum Depolama" }), ": WebAuthn zorluklarını yönetmek için oturum depolama kullanacağız. Bunu gerçekleştirmek için ", _jsx(_components.a, { href: "https://vercel.com/docs/storage/vercel-kv", children: "vercel’ın KV’sini" }), " kullanacağız."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Bir Kullanıcı Veritabanı" }), ": Kullanıcılarımızın kayıtlı geçiş anahtarlarını saklamak için bir yer. Basit tutmak adına, demostrasyon için vercel’ın KV’sini kullanacağız."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Artık elimizde araçlarımız ve materyallerimiz var, inşa etmeye hazırız." }), "\n", _jsxs(_components.h2, { id: "vercelın-kv-ile-oturum-depolaması-uygulaması", children: ["Vercel’ın KV ile oturum depolaması uygulaması", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#vercelın-kv-ile-oturum-depolaması-uygulaması", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "kv-depolamasını-kurma", children: ["KV depolamasını kurma", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#kv-depolamasını-kurma", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Bir KV depolamasını hem üretimde hem de yerel geliştirmede başlatmak kolaydır, projene bir KV deposu bağlamak ve çevre değerlerini çekmek için bu kılavuzu takip et: ", _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: "oturum-yönetim-fonksiyonlarını-uygulayın", children: ["Oturum yönetim fonksiyonlarını uygulayın", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#oturum-yönetim-fonksiyonlarını-uygulayın", 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: "İki işlev aktardık:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "getCurrentSession" }), ": Next.js çerez yardımcısını kullanarak mevcut istek için bir oturum oluşturur ve değeri döndürür."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "updateCurrentSession" }), ": Veriyi mevcut oturuma kaydeder."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "vercelın-kv-ile-bir-kullanıcı-veritabanı-uygulaması", children: ["Vercel’ın KV ile bir kullanıcı veritabanı uygulaması", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#vercelın-kv-ile-bir-kullanıcı-veritabanı-uygulaması", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Oturum uygulamamız gibi, basit bir kullanıcı veritabanı uygulayalım." }), "\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// Orijinal türler \"Buffer\" dır ve KV tarafından desteklenmez\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('Kullanıcı zaten var');\n }\n\n await kv.set(`${userPrefix}${email}`, { email, devices });\n return { email, devices };\n};\n" }) }), "\n", _jsx(_components.p, { children: "E-posta ile kullanıcı bulmak ve kullanıcı verilerini e-posta ile güncellemek için işlevler oluşturduk. Unutma, bu sadece bir gösterimdir, gerçek bir üründe kullanıcı verileri genellikle veritabanında tutulur." }), "\n", _jsxs(_components.h2, { id: "webauthn-fonksiyonlarını-hazırlamak", children: ["WebAuthn fonksiyonlarını hazırlamak", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#webauthn-fonksiyonlarını-hazırlamak", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "İlerlemeye başlamadan önce, kayıt ve kimlik doğrulama akışının diyagramını inceleyelim:" }), "\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: Yeni bir geçiş anahtarı kaydetme isteği\n WebPage->>API Server: Kayıt seçeneklerini al (generateWebAuthnRegistrationOptions)\n API Server->>WebPage: seçenekler\n WebPage->>WebPage: WebAuthn API'sını çağır\n WebPage->>User: Kimlik doğrulama istemi\n User->>WebPage: Kimlik doğrulama gerçekleştirme\n WebPage->>API Server: WebAuthn API yanıtını gönder\n API Server->>API Server: Doğrula ve kaydet (verifyWebAuthnRegistration)\n API Server->>WebPage: Sonucu döndür\n WebPage->>User: ✅\n" }) }), "\n", _jsx(_components.p, { children: "Gördüğün gibi, iki işlev hazırlamamız gerekiyor:" }), "\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: Bir e-posta ile giriş yapma isteği\n WebPage->>API Server: Kimlik doğrulama seçeneklerini al (generateWebAuthnLoginOptions)\n API Server->>WebPage: seçenekler\n WebPage->>WebPage: WebAuthn API'sını çağır\n WebPage->>User: Kimlik doğrulama istemi\n User->>WebPage: Kimlik doğrulama gerçekleştir\n WebPage->>API Server: WebAuthn API yanıtını gönder\n API Server->>API Server: Doğrula (verifyWebAuthnLogin)\n API Server->>WebPage: Sonucu döndür\n WebPage->>User: ✅\n" }) }), "\n", _jsx(_components.p, { children: "Kayıt gibi, giriş de 2 işlev gerektirir:" }), "\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: "İşte kod:" }), "\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: 'Kullanıcı zaten var',\n };\n }\n\n const opts: GenerateRegistrationOptionsOpts = {\n rpName: 'Basit WebAuthn Örneği',\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 * ES256 ve RS256: En yaygın iki algoritmayı destekle.\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: 'Oturum süresi doldu',\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: 'Kayıt başarısız',\n };\n }\n\n const { credentialPublicKey, credentialID, counter } = registrationInfo;\n\n /**\n * Döndürülen cihazı kullanıcının cihaz listesine ekle\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: 'Kullanıcı zaten var',\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: 'Kullanıcı mevcut değil',\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: 'Oturum süresi doldu',\n };\n }\n\n const user = await findUser(email);\n\n if (!user) {\n return {\n success: false,\n message: 'Kullanıcı mevcut değil',\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: 'Kimlik doğrulayıcı bu sitede kayıtlı değil',\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: "web-sayfasını-oluşturun", children: ["Web sayfasını oluşturun", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#web-sayfasını-oluşturun", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Hazırlığı tamamladık, sayfayı oluşturalım:" }), "\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 ?? 'Bir şeyler yanlış gitti!');\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 ?? 'Bir şeyler yanlış gitti!');\n return;\n }\n\n alert('Kayıt başarılı!');\n } else {\n const response = await generateWebAuthnLoginOptions(email);\n\n if (!response.success || !response.data) {\n alert(response.message ?? 'Bir şeyler yanlış gitti!');\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 ?? 'Bir şeyler yanlış gitti!');\n return;\n }\n\n alert('Giriş başarılı!');\n }\n };\n\n return (\n

\n \n

\n );\n}\n" }) }), "\n", _jsxs(_components.h2, { id: "sonuç", children: ["Sonuç", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sonuç", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Next.js uygulamanızda WebAuthn uygulamanın karmaşıklıklarının üzerinden geçerken tebrikler. Tamamlarken, bunu üretim ortamına dağıtırken bazı önemli değerlendirmeleri ele almak önemli." }), "\n", _jsxs(_components.h3, { id: "üretime-dağıtım-i̇çin-önemli-hususlar", children: ["Üretime Dağıtım İçin Önemli Hususlar", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#üretime-dağıtım-i̇çin-önemli-hususlar", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Kullanıcı Tanımlayıcı Düzenlemesi" }), ": Bu öğreticide, kullanıcı tanımlayıcı olarak bir e-posta adresi kullandık. Ancak, bir üretim senaryosunda, farklı bir tanımlayıcı kullanmanız gerekebilir, örneğin ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "userId" }) }), " veya ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "kullanıcıadı" }) }), "."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Veritabanı Entegrasyonu" }), ": Oturum ve kullanıcı verileri yönetimi için basit bir demostrasyon olarak Vercel’ın KV kullandık, gerçek dünyadaki bir uygulama daha sağlam bir veritabanı sistemine (PostgreSQL, MongoDB, vb.) entegre edilmelidir."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "WebAuthn Seçeneklerini Özelleştirme" }), ": Araştırdığımız WebAuthn seçenekleri bir başlangıç noktasıdır. Uygulamanızın gereksinimlerine ve güvenlik politikalarına bağlı olarak, bu ayarları ayarlamanız gerekebilir. Bu seçenekleri belirli ihtiyaçlarınıza uyacak şekilde özelleştirme konusunda kılavuzluk almak için ", _jsx(_components.a, { href: "https://www.w3.org/TR/webauthn/", children: "WebAuthn belgeleri" }), " ve ", _jsx(_components.a, { href: "https://github.com/MasterKale/SimpleWebAuthn", children: "Basit WebAuthn kütüphanesi belgeleri" }), " başvurun."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Bu eğitici maceraya katıldığınız için teşekkür ederiz. Bu minimal örnekte bile, WebAuthn entegrasyonu basit bir görev değil, başka bir seçenek var, Logto’nun MFA’sinde WebAuthn'i deneyin:" }), "\n", _jsx(LogtoCloudButton, { children: "Logto çok faktörlü kimlik doğrulamayı deneyin" })] }); } 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."); }