Türkçe

webauthn
geçiş anahtarı
mfa
nextjs

Next.js ile WebAuthn Uygulaması: Uygulamalı Bir Kılavuz

Canlı kod örnekleri ile WebAuthn'in Next.js'de uygulanmasına yönelik uygulamalı bir kılavuz.

Sijie

Developer

11/15/2023

Kullanıcı kimlik doğrulamasına haftalar harcamayı bırakın

Logto ile güvenli uygulamaları daha hızlı yayınlayın. Kullanıcı kimlik doğrulamasını dakikalar içinde entegre edin ve temel ürününüze odaklanın.

Başlayın

WebAuthn serimize tekrar hoş geldiniz. Önceki makalelerimizde WebAuthn'in temellerini ve 101 kılavuzunu ele aldık. Eğer bize yeni katılıyorsan, hızlanmak için bu temel parçaları incelemekten çekinme.

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.

Kod denizine dalmadan önce, yolculuğun sonundaki seni bekleyen şeye bir bakış atalım - tam işlevli bir 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.

Önizleme

Ve elinde bir harita olmasını tercih edenler için, seni temin ettik! Tartışacağımız tüm kodlar herkese açık bir GitHub deposunda mevcut. Bu depo, uygulamamızın tam kaynak kodunu sunarak rehberin olacak.

Bu heyecan verici maceraya çıkmaya hazır mısın? Hadi başlayalım!

Gereksinimler

Başlamadan önce, ihtiyacımız olan her şeye sahip olduğumuzdan emin olalım:

Bir Next.js Projesi: Henüz bir Next.js projesi kurmadıysan, başlangıç için hızlı bir kılavuz burada.
Basit WebAuthn Kütüphanesi: WebAuthn'i bir web sitesine entegre etmek için gereken işi azaltmaya yardımcı olan çeşitli paketler. @simplewebauthn/browser, @simplewebauthn/server ve @simplewebauthn/typescript-types yüklemek için favori paket yöneticini kullan.
Oturum Depolama: WebAuthn zorluklarını yönetmek için oturum depolama kullanacağız. Bunu gerçekleştirmek için vercel’ın KV’sini kullanacağız.
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.

Artık elimizde araçlarımız ve materyallerimiz var, inşa etmeye hazırız.

Vercel’ın KV ile oturum depolaması uygulaması

KV depolamasını kurma

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: https://vercel.com/docs/storage/vercel-kv/quickstart

Oturum yönetim fonksiyonlarını uygulayın

İki işlev aktardık:

getCurrentSession: Next.js çerez yardımcısını kullanarak mevcut istek için bir oturum oluşturur ve değeri döndürür.
updateCurrentSession: Veriyi mevcut oturuma kaydeder.

Vercel’ın KV ile bir kullanıcı veritabanı uygulaması

Oturum uygulamamız gibi, basit bir kullanıcı veritabanı uygulayalım.

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.

WebAuthn fonksiyonlarını hazırlamak

İlerlemeye başlamadan önce, kayıt ve kimlik doğrulama akışının diyagramını inceleyelim:

Gördüğün gibi, iki işlev hazırlamamız gerekiyor:

generateWebAuthnRegistrationOptions
verifyWebAuthnRegistration

Kayıt gibi, giriş de 2 işlev gerektirir:

generateWebAuthnLoginOptions
verifyWebAuthnLogin

İşte kod:

Web sayfasını oluşturun

Hazırlığı tamamladık, sayfayı oluşturalım:

Sonuç

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.

Üretime Dağıtım İçin Önemli Hususlar

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 userId veya kullanıcıadı.
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.
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 WebAuthn belgeleri ve Basit WebAuthn kütüphanesi belgeleri başvurun.

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:

Logto çok faktörlü kimlik doğrulamayı deneyin

Gereksinimler#

Vercel’ın KV ile oturum depolaması uygulaması#

KV depolamasını kurma#

Oturum yönetim fonksiyonlarını uygulayın#

Vercel’ın KV ile bir kullanıcı veritabanı uygulaması#

WebAuthn fonksiyonlarını hazırlamak#

Web sayfasını oluşturun#

Sonuç#

Üretime Dağıtım İçin Önemli Hususlar#

Gereksinimler#

Vercel’ın KV ile oturum depolaması uygulaması#

KV depolamasını kurma#

Oturum yönetim fonksiyonlarını uygulayın#

Vercel’ın KV ile bir kullanıcı veritabanı uygulaması#

WebAuthn fonksiyonlarını hazırlamak#

Web sayfasını oluşturun#

Sonuç#

Üretime Dağıtım İçin Önemli Hususlar#

Gereksinimler

Vercel’ın KV ile oturum depolaması uygulaması

KV depolamasını kurma

Oturum yönetim fonksiyonlarını uygulayın

Vercel’ın KV ile bir kullanıcı veritabanı uygulaması

WebAuthn fonksiyonlarını hazırlamak

Web sayfasını oluşturun

Sonuç

Üretime Dağıtım İçin Önemli Hususlar

Gereksinimler

Vercel’ın KV ile oturum depolaması uygulaması

KV depolamasını kurma

Oturum yönetim fonksiyonlarını uygulayın

Vercel’ın KV ile bir kullanıcı veritabanı uygulaması

WebAuthn fonksiyonlarını hazırlamak

Web sayfasını oluşturun

Sonuç

Üretime Dağıtım İçin Önemli Hususlar