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

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.

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:

1. Bir Next.js Projesi: Henüz bir Next.js projesi kurmadıysan, başlangıç için hızlı bir kılavuz burada.
2. 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.
3. 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.
4. 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:

1. generateWebAuthnRegistrationOptions
2. verifyWebAuthnRegistration

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

1. generateWebAuthnLoginOptions
2. 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#

1. 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ı.
2. 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.
3. 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: