المصادقة هي عنصر أساسي في تطوير التطبيق. يساعد على حماية بيانات المستخدم ومنع الأنشطة الضارة. ببساطة ، تحدد مصداقية هوية المستخدم ، مما يضمن أن المستخدمين المصرح لهم فقط يمكنهم الوصول إلى التطبيق وموارده.
يمكن أن يكون إنشاء نظام مصادقة مخصص مهمة تستغرق وقتًا طويلاً ، وهذا هو المكان الذي يكون فيه NextAuth.js مفيدًا. يوفر دعم المصادقة الآمنة للتطبيقات التي تم إنشاؤها باستخدام إطار عمل Next.js.
ما هو NextAuth.js؟
NextAuth.js هي مكتبة خفيفة الوزن مفتوحة المصدر توفر ملفات المصادقة والتخويل دعم تطبيقات Next.js. يتيح للمطورين إعداد المصادقة والترخيص لتطبيقات Next.js الخاصة بهم بسرعة وسهولة. يوفر ميزات مثل المصادقة مع عدة مزودين والبريد الإلكتروني والمصادقة بدون كلمة مرور.
كيف يعمل NextAuth.js في المصادقة؟
يوفر حل المصادقة الخاص بـ NextAuth.js واجهة برمجة تطبيقات من جانب العميل يمكنك القيام بها الاندماج في تطبيق Next.js الخاص بك. يمكنك استخدامه لمصادقة المستخدمين بموفري تسجيل دخول مختلفين قاموا بإنشاء حسابات معهم.
تحت الغطاء ، تتم إعادة توجيه المستخدمين إلى صفحة تسجيل الدخول الخاصة بالموفر. عند المصادقة الناجحة ، يقوم الموفر بإرجاع بيانات الجلسة التي تحتوي على حمولة المستخدم. يمكن لهذه الحمولة إذن الوصول إلى التطبيق وموارده.
تحديثات الميزات الجديدة في NextAuth.js (الإصدار 4)
في ديسمبر 2022 ، أصدرت NextAuth.js نسختها الرابعة. تم تحسين هذا الإصدار عن نسخته السابقة v3 بتحديثات وتعديلات جديدة. تركز التغييرات بشكل أساسي على تحسين استخدام المكتبة في عملية المصادقة.
1. تحديثات على خطاف useSession
يمكنك استخدام الخطاف useSession للتحقق مما إذا كان المستخدم قد قام بتسجيل الدخول أم لا. في هذا الإصدار الجديد ، يعيد خطاف useSession كائنًا يوفر طريقة أكثر وضوحًا لاختبار الحالات ، وذلك بفضل إضافة خيار الحالة. انظر الكود أدناه:
يستورد {جلسة استخدام} من"المصادقة / التفاعل التالي"يصدّرتقصيروظيفةعنصر() {
مقدار ثابت { بيانات: session، status} = useSession ()لو (حالة "مصدق") {
يعود<ص>تم تسجيل الدخول باسم {session.user.email}ص>
}
يعود<ص> لم تسجل الدخول ص>
}
2. يصبح سياق SessionProvider إلزاميًا
الإصدار الجديد الرابع يفرض استخدام سياق SessionProvider. هذا يعني أنه سيتعين عليك تغليف تطبيقك بموفر جلسة الاستخدام. توصي NextAuth.js بتغليف تطبيقك بداخل ملف _app.jsx ملف.
بالإضافة إلى ذلك ، تم استبدال طريقة clientMaxAge بـ refetchInterval. سيسهل هذا إحضار الجلسة بشكل دوري في الخلفية.
يستورد {SessionProvider} من"المصادقة / التفاعل التالي"
يصدّرتقصيروظيفةبرنامج({
المكون ، pageProps: {جلسة ،... pageProps} ،
}) {
يعود (
<مقدم الجلسةحصة={حصة}إعادة إحضار={5 * 60}>
<عنصر {... pageProps} />مقدم الجلسة>
)
}
3. استيراد الموردين بشكل فردي
يوفر NextAuth.js العديد من خدمات الموفر التي يمكنك استخدامها لتسجيل دخول مستخدم. يشملوا:
- استخدام موفري OAuth المدمجين (مثل GitHub و Google).
- باستخدام مزود البريد الإلكتروني.
في هذا الإصدار الجديد ، تحتاج إلى استيراد كل مزود على حدة.
يستورد GoogleProvider من"المصادقة التالية / الموفرون / google"
يستورد Auth0 مقدم من"التالي المصادقة / الموفرون / المصادقة 0";4. تغييرات طفيفة أخرى
- تمت إعادة تسمية الاستيراد من جانب العميل إلى المصادقة / التفاعل التالي من المصادقة / العميل التالي.
- التغييرات على وسيطات عمليات رد الاتصال:
تسجيل الدخول ({المستخدم ، الحساب ، الملف الشخصي ، البريد الإلكتروني ، بيانات الاعتماد})
جلسة ({جلسة ، رمز مميز ، مستخدم})
jwt ({token، user، account، profile، isNewUser})
الشروع في استخدام NextAuth.js في المصادقة
لدمج NextAuth.js في تطبيقات Next.js ، اتبع الخطوات التالية:
- أنشئ تطبيق Next.js عن طريق تشغيل هذا الأمر: npx create-next-app
- يجري npm تثبيت المصادقة التالية في جهازك الطرفي لتثبيت NextAuth.js في تطبيق Next.js الخاص بك.
- قم بزيارة NextAuth.js الوثائق الرسمية وحدد المزود المفضل لديك من قائمة المدعومين. بعد ذلك ، قم بإنشاء حساب في وحدة تحكم المطورين للمزود / الموفرين الذي اخترته وقم بتسجيل تطبيق Next.js الخاص بك.
- في وحدة تحكم مطوري البرامج للمزود / الموفرين الذي اخترته ، حدد ملف عنوان URL لطريق المنزل و ال عنوان URL لإعادة توجيه الاتصال، احفظ التغييرات وانسخ ملف معرف العميل و سر العميل.
- في الدليل الجذر لتطبيق Next.js ، قم بإنشاء ملف .env للاحتفاظ بملحق معرف العميل و سر العميل.
- أخيرًا ، في الدليل / pages / api ، أنشئ مجلدًا جديدًا يسمى المصادقة. في مجلد المصادقة ، قم بإنشاء ملف جديد ، وقم بتسميته [... nextauth] .js. في الملف الذي تم إنشاؤه ، أضف الكود أدناه. يُظهر الرمز واجهة برمجة تطبيقات NextAuth.js من جانب العميل باستخدام موفر Google:
يستورد GoogleProvider من"المصادقة التالية / الموفرون / google";
الموفرون: [
GoogleProvider ({
معرف العميل: عملية.env.GOOGLE_CLIENT_ID,
العميل: عملية.env.GOOGLE_CLIENT_SECRET
})
]
يمكنك الآن المضي قدمًا وإنشاء صفحة مصادقة تسجيل الدخول. فيما يلي عرض DOM لمكون تسجيل الدخول:
يستورد تتفاعل من'تتفاعل';
يستورد {useSession ، تسجيل الدخول ، تسجيل الدخول} من"المصادقة / التفاعل التالي"يصدّرتقصيروظيفةعنصر() {
مقدار ثابت { بيانات: جلسة} = useSession ()إذا (الجلسة) {
يعود (
<>
<ص> تم تسجيل الدخول باسم {session.user.email} ص>
<زرعند النقر={() => تسجيل الخروج ()}> تسجيل الخروجزر>
)
}
يعود (
<>
<ص> لم تسجل الدخول ص>
<زرعند النقر={() => تسجيل الدخول ()}> تسجيل الدخولزر>
)
}
ال useSession يصل الخطاف إلى كائن جلسة المستخدم الحالية. بمجرد أن يقوم المستخدم بتسجيل الدخول والمصادقة عليه من قبل Google ، يتم إرجاع كائن جلسة مع حمولة المستخدم. يسمح هذا لـ Next.js بعرض تفاصيل المستخدم على جانب العميل من التطبيق ، في هذه الحالة البريد الإلكتروني.
أنظمة المصادقة المخصصة مقابل. حلول جاهزة للاستخدام مثل NextAuth.js
الاختيار بين بناء نظام مصادقة مخصص ودمج مصادقة جاهزة للاستخدام لحل مثل NextAuth.js ، من المهم مراعاة التكلفة والتعقيد والأمان لكل منها حل.
إذا كانت لديك الموارد والخبرة اللازمة لتطوير نظام مصادقة مخصص ، فقد يكون هذا هو أفضل نهج لك. ومع ذلك ، إذا كنت تبحث عن حل جاهز سهل التنفيذ وآمن وفعال من حيث التكلفة ، فقد يكون NextAuth.js خيارًا جيدًا للنظر فيه. في النهاية ، سيعتمد الاختيار على احتياجاتك وتفضيلاتك.