تنفيذ WebAuthn في Next.js: دليل عملي

مرحبًا بكم مرة أخرى في سلسلة WebAuthn الخاصة بنا. في مقالاتنا السابقة، قمنا بتغطية أساسيات WebAuthn، و دليل 101. إذا كنت تنضم إلينا للتو، لا تتردد في التحقق من هذه الأساسيات لتكون على اطلاع كامل.

اليوم، نستعد للعمل لتطبيق النظرية في الممارسة. سنقوم باستخدام قوة Next.js مع الميزة الجديدة “إجراءات الخادم”. هدفنا؟ تنفيذ WebAuthn في تطبيق Next.js، والاستعداد لاستخدام WebAuthn.

قبل الغوص في بحر البرمجة، إليك لمحة عما ينتظرك في نهاية الرحلة - موقع تجريبي متكامل تمامًا. استكشفه لترى WebAuthn قيد العمل وللحصول على فكرة عما ستقوم ببنائه. في هذا الموقع التجريبي، يمكنك تسجيل مستخدمين جدد وتسجيل الدخول باستخدام مفاتيح المرور التي تم تسجيلها للتو.

ولأولئك الذين يفضلون الحصول على خريطة في أيديهم، لقد قمنا بتغطيتك! جميع الأكواد التي سنقوم بمناقشتها متاحة في مستودع GitHub العام. يعد هذا المستودع دليلك المرافق، حيث يقدم الشيفرة المصدرية الكاملة لتنفيذنا.

جاهز للانطلاق في هذه المغامرة المثيرة؟ دعنا نبدأ!

المتطلبات المسبقة#

قبل أن نبدأ، لنتأكد من أن لدينا كل ما نحتاجه:

1. مشروع Next.js: إذا لم تقم بإعداد مشروع Next.js بعد، إليك دليل سريع لتبدأ.
2. مكتبة WebAuthn بسيطة: عدة حزم للمساعدة في تقليل العمل المطلوب لتضمين WebAuthn في موقع الويب. استخدم مدير الحزم المفضل لديك لتثبيت @simplewebauthn/browser، @simplewebauthn/server و @simplewebauthn/typescript-types
3. تخزين الجلسات: سنقوم باستخدام تخزين الجلسات لإدارة تحديات WebAuthn. سنستخدم KV الخاص بـ vercel لتحقيق ذلك.
4. قاعدة بيانات المستخدمين: مكان لتخزين مفاتيح المرور المسجلة للمستخدمين. للحفاظ على البساطة، سنستخدم أيضًا KV الخاص بـ vercel لتوضيح ذلك.

الآن، مع أدواتنا وموادنا في اليد، نحن جاهزون للبدء في البناء.

تنفيذ تخزين الجلسات باستخدام KV الخاص بـ Vercel#

إعداد تخزين KV#

من السهل تهيئة تخزين KV سواء في الإنتاج أو في التنمية المحلية، اتبع هذا الدليل لإضافة مخزن KV لمشروعك وسحب القيم البيئية: https://vercel.com/docs/storage/vercel-kv/quickstart

تنفيذ وظائف إدارة الجلسات#

قمنا بتصدير وظيفتين:

• getCurrentSession: استخدام مساعد ملفات تعريف الارتباط في Next.js لإنشاء جلسة للطلب الحالي، وإرجاع القيمة.
• updateCurrentSession: حفظ البيانات في الجلسة الحالية.

تنفيذ قاعدة بيانات المستخدمين باستخدام KV الخاص بـ Vercel#

بشكل مشابه لتطبيق الجلسة، دعونا نقوم بتنفيذ قاعدة بيانات مستخدم بسيطة.

قمنا بإنشاء وظائف للبحث عن المستخدم عبر البريد الإلكتروني، وتحديث بيانات المستخدم عبر البريد الإلكتروني. تذكر، هذا لأغراض العرض فقط، في المنتج الحقيقي، عادة ما يتم الاحتفاظ ببيانات المستخدم في قاعدة بيانات.

إعداد وظائف WebAuthn#

قبل المتابعة، لنرى رسمًا بيانيًا يوضح عملية التسجيل والمصادقة:

كما ترون، نحتاج إلى إعداد وظيفتين:

1. generateWebAuthnRegistrationOptions
2. verifyWebAuthnRegistration

مشابه لعملية التسجيل، يتطلب تسجيل الدخول وظيفتين:

1. generateWebAuthnLoginOptions
2. verifyWebAuthnLogin

إليك الكود:

بناء صفحة الويب#

لقد أكملنا التحضير، دعونا نبني الصفحة:

الاستنتاج#

مبروك على اجتيازك تعقيدات تنفيذ WebAuthn في تطبيق Next.js. ومع اقترابنا من النهاية، من المهم معالجة بعض الاعتبارات الأساسية لنشره في بيئة إنتاجية.

اعتبارات أساسية للنشر الإنتاجي#

1. تعديل معرف المستخدم: في هذا الدليل، استخدمنا عنوان البريد الإلكتروني كمعرف للمستخدم. ومع ذلك، في السيناريو الحقيقي، قد تحتاج إلى استخدام معرف مختلف، مثل userId أو username.
2. تكامل قاعدة البيانات: في حين استخدمنا KV الخاص بـ Vercel كعرض بسيط لإدارة بيانات الجلسات والمستخدمين، يجب أن يتكامل تطبيق العالم الحقيقي مع نظام قاعدة بيانات أكثر قوة (مثل PostgreSQL، MongoDB، إلخ).
3. تخصيص خيارات WebAuthn: تعد خيارات WebAuthn التي استعرضناها نقطة انطلاق. بناءً على متطلبات تطبيقك وسياسات الأمان، قد تحتاج إلى ضبط هذه الإعدادات. استشر وثائق WebAuthn و وثائق مكتبة WebAuthn البسيطة للحصول على إرشادات حول تخصيص هذه الخيارات لتلائم احتياجاتك الخاصة.

شكرًا لانضمامك إلينا في هذه الرحلة التعليمية. حتى في هذا المثال البسيط، ليس من السهل دمج WebAuthn، هناك خيار آخر، جرب WebAuthn في مصادقة العوامل المتعددة لـ Logto: