التخطي إلى المحتوى الرئيسي

Next.js

nextjs-auth هو مثال على كيفية دمج casdoor في مشروع next-js. سنقوم بإرشادك خلال الخطوات أدناه.

الخطوة 1: نشر Casdoor​

أولاً، يجب نشر Casdoor.

يمكنك الرجوع إلى الوثائق الرسمية لـ Casdoor لـ تثبيت الخادم. يرجى نشر نسختك من Casdoor في وضع الإنتاج.

بعد نشر ناجح، تأكد من الآتي:

  • افتح متصفحك المفضل وزر http://localhost:8000. سترى صفحة تسجيل الدخول لـ Casdoor.
  • اختبر وظيفة تسجيل الدخول بإدخال admin كاسم مستخدم و 123 ككلمة مرور.

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

الخطوة 2: إضافة الوسيط (Middleware)​

الوسيط يسمح لك بتشغيل الكود قبل إكمال طلب. ثم، بناءً على الطلب الوارد، يمكنك تعديل الاستجابة عن طريق إعادة الكتابة، إعادة التوجيه، تعديل رؤوس الطلب أو الاستجابة، أو الرد مباشرة.

استخدم الملف middleware.ts (أو .js) في جذر مشروعك لتعريف الوسيط. على سبيل المثال، على نفس مستوى pages أو app، أو داخل src إذا كان ذلك ملائمًا.

مثال​

//define which paths Middleware will run on
const protectedRoutes = ["/profile"];

export default function middleware(req) {
  if (protectedRoutes.includes(req.nextUrl.pathname)) {
    //redirect the incoming request to a different URL
    return NextResponse.redirect(new URL("/login", req.url));
  }
}

راجع وثائق next.js الرسمية middleware لمزيد من التفاصيل.

الخطوة 3: استخدام Casdoor SDK​

1. تثبيت الـ SDK​

أولاً، قم بتثبيت casdoor-js-sdk عبر NPM أو Yarn:

npm install casdoor-js-sdk

أو:

yarn add casdoor-js-sdk

2. تهيئة الـ SDK​

ثم قم بتهيئة 6 معاملات من نوع النص بالترتيب التالي:

الاسممطلوبالوصف
serverUrlنعمرابط خادم Casdoor، مثل http://localhost:8000
clientIdنعممعرف عميل التطبيق
clientSecretنعمسر عميل التطبيق
organizationNameنعممنظمة التطبيق
appNameنعماسم التطبيق
redirectPathنعمرابط إعادة التوجيه

مثال​

const sdkConfig = {
  serverUrl: "https://door.casdoor.com",
  clientId: "294b09fbc17f95daf2fe",
  clientSecret: "dd8982f7046ccba1bbd7851d5c1ece4e52bf039d",
  organizationName: "casbin",
  appName: "app-vue-python-example",
  redirectPath: "/callback",
};
تحذير

استبدل قيم التكوين بقيم نسختك الخاصة من Casdoor، خاصة clientId، clientSecret، و serverUrl.

3. إعادة التوجيه إلى صفحة تسجيل الدخول​

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

تأكد من أنك قد أضفت رابط الاستدعاء الخلفي (مثل http://localhost:8080/callback) في تكوين التطبيق مسبقًا.

const CasdoorSDK = new Sdk(sdkConfig);
CasdoorSDK.signin_redirect();

4. الحصول على الرمز والتخزين​

بعد اجتياز التحقق من Casdoor، سيتم إعادة التوجيه إلى تطبيقك مع الرمز.

يمكنك اختيار استخدام الكوكي لتخزين الرمز.

CasdoorSDK.exchangeForAccessToken()
  .then((res) => {
    if (res && res.access_token) {
      //Get Token
      return CasdoorSDK.getUserInfo(res.access_token);
    }
  })
  .then((res) => {
    // Storage Token
    Cookies.set("casdoorUser", JSON.stringify(res));
  });

يمكنك الرجوع إلى الوثائق الرسمية لـ Casdoor لـ كيفية استخدام Casdoor SDK.

الخطوة 4: إضافة وظيفة المصادقة للوسيط​

عندما يحاول المستخدمون الوصول إلى مسار محمي، تقوم وظيفة المصادقة Middleware بالتحقق من هويتهم. إذا لم يتم مصادقة المستخدم، يتم تحويلهم إلى صفحة تسجيل الدخول أو رفض الوصول لهم.

مثال​

//protected route
const protectedRoutes = ["/profile"];
const casdoorUserCookie = req.cookies.get("casdoorUser");
const isAuthenticated = casdoorUserCookie ? true : false;

//Authentication Function
if (!isAuthenticated && protectedRoutes.includes(req.nextUrl.pathname)) {
  return NextResponse.redirect(new URL("/login", req.url));
}