المصادقة

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

أنماط المصادقة

الخطوة الأولى لتحديد نمط المصادقة الذي تحتاجه هي فهم إستراتيجية جلب البيانات التي تريدها. ثم يمكننا تحديد موفري المصادقة الذين يدعمون هذه الإستراتيجية. هناك نمطان رئيسيان:

استخدام التوليد الثابت لعرض حالة تحميل من الخادم، ثم جلب بيانات المستخدم من جانب العميل.
جلب بيانات المستخدم من جانب الخادم لتجنب ظهور محتوى غير مصادق عليه.

مصادقة الصفحات المولدة ثابتًا

يحدد Next.js تلقائيًا أن الصفحة ثابتة إذا لم تكن هناك متطلبات بيانات حظرية. هذا يعني عدم وجود getServerSideProps أو getInitialProps في الصفحة. بدلاً من ذلك، يمكن لصفحتك عرض حالة تحميل من الخادم، ثم جلب المستخدم من جانب العميل.

إحدى مزايا هذا النمط هي أنه يسمح بعرض الصفحات من شبكة CDN عالمية وتحميلها مسبقًا باستخدام next/link. عمليًا، هذا يؤدي إلى وقت تفاعل أسرع (Time to Interactive).

لننظر إلى مثال لصفحة الملف الشخصي. سيتم عرض هيكل تحميل في البداية. بمجرد انتهاء طلب المستخدم، سيتم عرض اسم المستخدم:

pages/profile.js

import useUser from '../lib/useUser'
import Layout from '../components/Layout'

const Profile = () => {
  // جلب المستخدم من جانب العميل
  const { user } = useUser({ redirectTo: '/login' })

  // عرض حالة التحميل من الخادم
  if (!user || user.isLoggedIn === false) {
    return <Layout>جار التحميل...</Layout>
  }

  // بمجرد انتهاء طلب المستخدم، عرض المستخدم
  return (
    <Layout>
      <h1>ملفك الشخصي</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}

export default Profile

يمكنك مشاهدة هذا المثال في العمل. تحقق من مثال with-iron-session لترى كيف يعمل.

مصادقة الصفحات المعروضة من الخادم

إذا قمت بتصدير دالة async تسمى getServerSideProps من صفحة، فسوف يقوم Next.js بعرض هذه الصفحة مسبقًا في كل طلب باستخدام البيانات التي تُرجعها getServerSideProps.

export async function getServerSideProps(context) {
  return {
    props: {}, // سيتم تمريرها إلى مكون الصفحة كخصائص
  }
}

لنحول مثال الملف الشخصي لاستخدام العرض من جانب الخادم. إذا كانت هناك جلسة، قم بإرجاع user كخاصية لمكون Profile في الصفحة. لاحظ عدم وجود هيكل تحميل في هذا المثال.

pages/profile.js

import withSession from '../lib/session'
import Layout from '../components/Layout'

export const getServerSideProps = withSession(async function ({ req, res }) {
  const { user } = req.session

  if (!user) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    }
  }

  return {
    props: { user },
  }
})

const Profile = ({ user }) => {
  // عرض المستخدم. لا حاجة لحالة تحميل
  return (
    <Layout>
      <h1>ملفك الشخصي</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}

export default Profile

ميزة هذا النمط هي منع ظهور محتوى غير مصادق عليه قبل التوجيه. من المهم ملاحظة أن جلب بيانات المستخدم في getServerSideProps سوف يحجب العرض حتى يتم حل الطلب إلى موفر المصادقة الخاص بك. لمنع إنشاء عنق زجاجة وزيادة وقت أول بايت (Time to First Byte)، يجب أن تتأكد من أن البحث عن المصادقة سريع. وإلا، فكر في التوليد الثابت.

موفرو المصادقة

بعد مناقشة أنماط المصادقة، دعونا ننظر إلى موفري مصادقة محددين ونستكشف كيفية استخدامهم مع Next.js.

استخدم قاعدة بياناتك الخاصة

أمثلة

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

إذا كنت تريد أداة جلسة منخفضة المستوى، مشفرة، وبدون حالة، استخدم iron-session.
إذا كنت تريد نظام مصادقة كامل الميزات مع موفرين مدمجين (Google، Facebook، GitHub...)، JWT، JWE، البريد الإلكتروني/كلمة المرور، روابط سحرية وغيرها... استخدم next-auth.

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

موفرو مصادقة آخرون

لمشاهدة أمثلة مع موفري مصادقة آخرين، تحقق من مجلد الأمثلة.