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

Nuxt

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

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

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

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

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

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

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

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

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

أنشئ ملفات .js أو .ts في دليل middleware في جذر مشروعك لتعريف الوسيط. ويتم التعرف على أسماء الملفات كأسماء للوسيط. على سبيل المثال، في nuxt-auth، نقوم بإنشاء ملف يسمى myMiddleware.js في دليل middleware، والذي يمكن الإشارة إليه كـ myMiddleware في أماكن أخرى مثل nuxt.config.js.

مثال​

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

export default function ({route, redirect}) {

  if (protectedRoutes.includes(route.path)) {
    //redirect the incoming request to a different URL
    redirect('/login');
  }
}

لكي يعمل الوسيط، يجب إضافة الموجه في nuxt.config.js، مثل ذلك:

export default {
    // other configuations

    // what to add
    router: {
    middleware: ['myMiddleware'] // replace to your middleware name
  },
}

راجع وثائق nuxt الرسمية 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نعمعنوان URL لخادم Casdoor، مثل http://localhost:8000
clientIdنعممعرف عميل التطبيق
clientSecretنعمسر عميل التطبيق
organizationNameنعممنظمة التطبيق
appNameنعماسم التطبيق
redirectPathنعمعنوان URL المعاد توجيهه

مثال​

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. الانتقال إلى صفحة تسجيل الدخول​

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

تأكد من أنك أضفت عنوان URL للرد (مثل 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: إضافة وظيفة المصادقة للبرمجيات الوسيطة​

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

مثال​

import Cookies from "js-cookie";

const protectedRoutes = ["/profile"];

export default function ({route, redirect}) {
  const casdoorUserCookie = Cookies.get('casdoorUser');
  const isAuthenticated = !!casdoorUserCookie;

  if (!isAuthenticated && protectedRoutes.includes(route.path)) {
    redirect('/login');
  }
}