العربية

WebAuthn
Passkey
MFA
Next.js

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

دليل عملي لتنفيذ WebAuthn في Next.js مع أمثلة حية للكود.

Sijie

Developer

11/15/2023

توقف عن إضاعة أسابيع في مصادقة المستخدم

أطلق تطبيقات آمنة بشكل أسرع مع Logto. قم بدمج مصادقة المستخدم في دقائق وركز على منتجك الأساسي.

ابدأ الآن

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

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

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

معاينة

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

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

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

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

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

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

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

إعداد تخزين KV

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

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

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

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

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

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

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

إعداد وظائف WebAuthn

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

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

generateWebAuthnRegistrationOptions
verifyWebAuthnRegistration

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

generateWebAuthnLoginOptions
verifyWebAuthnLogin

إليك الكود:

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

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

الاستنتاج

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

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

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

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

جرّب مصادقة العوامل المتعددة في Logto

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

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

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

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

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

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

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

الاستنتاج#

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

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

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

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

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

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

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

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

الاستنتاج#

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

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

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

إعداد تخزين KV

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

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

إعداد وظائف WebAuthn

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

الاستنتاج

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

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

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

إعداد تخزين KV

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

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

إعداد وظائف WebAuthn

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

الاستنتاج

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