موفّر بيانات الاعتماد وتسجيل الدخول المخصص
صادِق المستخدمين مقابل قاعدة بيانات باستخدام موفّر بيانات الاعتماد ونموذج تسجيل دخول مخصص.
موفّر بيانات الاعتماد وتسجيل الدخول المخصص درس مجاني في React Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.
متى تستخدم Credentials Provider
استخدم Credentials Provider عندما تجري المصادقة عبر قاعدة بياناتك الخاصة (البريد الإلكتروني + كلمة المرور) بدلًا من مزوّد OAuth. ويتطلب ذلك تعاملًا دقيقًا مع تجزئة كلمات المرور والأمان.
تعريف Credentials Provider
أضف Credentials إلى مصفوفة المزوّدين. وتتلقى الدالة authorize بيانات الاعتماد المُرسلة، ثم تعيد كائن مستخدم أو null.
import Credentials from 'next-auth/providers/credentials';
import bcrypt from 'bcryptjs';
export const { handlers, auth } = NextAuth({
providers: [
Credentials({
name: 'Credentials',
credentials: {
email: { label: 'Email', type: 'email' },
password: { label: 'Password', type: 'password' },
},
async authorize(credentials) {
const user = await db.user.findUnique({ where: { email: credentials.email as string } });
if (!user) return null;
const valid = await bcrypt.compare(credentials.password as string, user.passwordHash);
if (!valid) return null;
return { id: user.id, name: user.name, email: user.email };
},
}),
],
});نموذج تسجيل دخول مخصص
أنشئ نموذج تسجيل دخول في صورة مكوّن عميل يستدعي signIn('credentials', { email, password }) من next-auth/react.
'use client';
import { signIn } from 'next-auth/react';
export function LoginForm() {
const [error, setError] = useState('');
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
const form = new FormData(e.currentTarget);
const result = await signIn('credentials', {
email: form.get('email'),
password: form.get('password'),
redirect: false, // handle redirect manually
});
if (result?.error) setError('Invalid email or password');
else router.push('/dashboard');
}
return (
<form onSubmit={handleSubmit}>
{error && <p className="error">{error}</p>}
<input name="email" type="email" required />
<input name="password" type="password" required />
<button type="submit">Sign in</button>
</form>
);
}redirect: false لمعالجة الأخطاء
مرّر redirect: false إلى signIn() لتلقّي كائن النتيجة ومعالجة الأخطاء داخل المكوّن بدلًا من إعادة التوجيه إلى صفحة خطأ.
const result = await signIn('credentials', { email, password, redirect: false });
if (result?.error) {
// result.error is 'CredentialsSignin' for auth failures
setError('Invalid email or password');
}التحقق باستخدام Zod في authorize
تحقّق من بيانات الاعتماد باستخدام Zod داخل الدالة authorize قبل الوصول إلى قاعدة البيانات.
import { z } from 'zod';
const schema = z.object({ email: z.string().email(), password: z.string().min(8) });
async authorize(credentials) {
const parsed = schema.safeParse(credentials);
if (!parsed.success) return null;
const { email, password } = parsed.data;
// ... db lookup
}استراتيجية الجلسة لبيانات الاعتماد
يتطلب موفّر بيانات الاعتماد استخدام استراتيجية جلسة JWT، ولا حاجة إلى محوّل قاعدة بيانات للجلسات. حدّد session: { strategy: 'jwt' } صراحةً.
export const { handlers, auth } = NextAuth({
session: { strategy: 'jwt' },
providers: [Credentials({ ... })],
});إضافة حقول مخصّصة إلى الجلسة
مرّر بيانات مستخدم إضافية عبر دوال استدعاء JWT والجلسة لإتاحتها في useSession().
callbacks: {
async jwt({ token, user }) {
if (user) { token.id = user.id; token.role = user.role; }
return token;
},
async session({ session, token }) {
session.user.id = token.id as string;
session.user.role = token.role as string;
return session;
},
},تجزئة كلمات المرور
احرص دائمًا على تجزئة كلمات المرور باستخدام bcrypt قبل تخزينها. لا تخزّن كلمات المرور بنصها الصريح مطلقًا.
import bcrypt from 'bcryptjs';
// On registration:
const passwordHash = await bcrypt.hash(password, 12);
await db.user.create({ data: { email, passwordHash } });
// On login (in authorize):
const valid = await bcrypt.compare(submittedPassword, user.passwordHash);تحديد معدل محاولات تسجيل الدخول
احمِ نقطة نهاية بيانات الاعتماد من هجمات القوة الغاشمة عبر تحديد معدل محاولات تسجيل الدخول باستخدام Middleware أو مخزن داخل الذاكرة.
// middleware.ts or in a rate-limiting library
import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';
const ratelimit = new Ratelimit({ redis: Redis.fromEnv(), limiter: Ratelimit.slidingWindow(10, '10 s') });
// Check in authorize before DB query:
const { success } = await ratelimit.limit(credentials.email as string);
if (!success) return null;تدفق التسجيل
التسجيل منفصل عن Auth.js — أنشئ المستخدم في قاعدة بياناتك، مع كلمة مرور مجزّأة، عبر Server Action أو مسار API، ثم سجّل دخوله باستخدام signIn('credentials', ...).
تحقّق سريع
لماذا ينبغي تمرير redirect: false عند استدعاء signIn() في نموذج تسجيل دخول مخصّص؟
مراجعة
تستدعي وحدة توفير بيانات الاعتماد دالة authorize الخاصة بك مع بيانات النموذج المُرسلة. تحقّق من البيانات باستخدام Zod، وقارن كلمات المرور المجزّأة باستخدام bcrypt، ثم أعد كائن مستخدم أو القيمة null. استخدم redirect: false في النموذج لمعالجة الأخطاء بشكل مخصّص، واستخدم دائمًا استراتيجية JWT مع بيانات الاعتماد.
الأسئلة الشائعة
هل درس «موفّر بيانات الاعتماد وتسجيل الدخول المخصص» مجاني؟
نعم — نص درس «موفّر بيانات الاعتماد وتسجيل الدخول المخصص» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.
ماذا ستتعلم في «موفّر بيانات الاعتماد وتسجيل الدخول المخصص»؟
صادِق المستخدمين مقابل قاعدة بيانات باستخدام موفّر بيانات الاعتماد ونموذج تسجيل دخول مخصص. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «موفّر بيانات الاعتماد وتسجيل الدخول المخصص»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إعداد Auth.js في Next.js App Router
- إدارة الجلسات وuseSession Hook
- موفّر بيانات الاعتماد وتسجيل الدخول المخصص
- حماية المسارات المستندة إلى Middleware