العربية
  • cypress
  • logto
  • authentication

مصادقة Logto في Cypress

سيظهر لك هذا الدليل كيفية المصادقة باستخدام Logto في اختبارات تطبيق الويب أحادي الصفحة (SPA).

Simeng
Simeng
Developer

مقدمة

المصادقة هي جزء حيوي من أي تطبيق ويب، ومن الضروري التأكد من أن حواجز المصادقة تعمل كما هو متوقع في تطبيقات الصفحات الفردية (SPAs). في هذا الدليل، سنرشدك خطوة بخطوة خلال عملية المصادقة باستخدام Logto في اختباراتك باستخدام Cypress، مما يتيح لك اختبار تدفق المصادقة لتطبيقك SPA بفعالية.

المتطلبات المسبقة

قبل البدء، تأكد من توفر الآتي لديك:

  • حساب Logto. إذا لم يكن لديك واحد، يمكنك التسجيل في Logto السحاب مجانًا.

  • تطبيق صفحة واحدة (SPA) يستخدم Logto للمصادقة. إذا لم يكن لديك واحد، يُرجى اتباع دليلنا إنشاء ودمج التطبيق الأول، وإنشاء وتسجيل تطبيق جديد في Logto.

    create_application

  • دمج Logto مع تطبيقك الـ SPA باستخدام حزمة تطوير البرمجيات الجاهزة لدينا. على سبيل المثال React SDK

  • يمكنك اتباع دليلنا تجربة تسجيل الدخول لتخصيص تجربة تسجيل الدخول لتطبيقك الـ SPA. وقم بمحاكاة تدفق تسجيل الدخول في اختبارات Cypress الخاصة بك وفقًا لذلك.

    sign-in-experience

  • إكمال تثبيت Cypress والتكوين. يفترض هذا الدليل أن لديك بيئة Cypress معدة بشكل جيد وأنك قادر على تشغيل اختبارات Cypress الخاصة بك بالفعل.

  • تشغيل خدمة Logto وتطبيق العميل.


سنستخدم في هذا الدليل مثالاً لتطبيق React SPA Sample. يمكنك العثور على الشفرة المصدرية هنا. إنه تطبيق React بسيط يستخدم Logto مع Logto React SDK للمصادقة.

  • عنوان تسجيل الدخول إلى Logto: http://localhost:3001/sign-in
  • نطاق تطبيق React SPA: http://localhost:3000
  • إعدادات تجربة تسجيل الدخول إلى Logto: username/password

كتابة أمر مخصص لـ Cypress للمصادقة باستخدام Logto

لنكتب أمرًا مخصصًا لـ Cypress للمصادقة باستخدام Logto في اختبارات Cypress الخاصة بك. باستخدام الأمر المخصص، يمكنك المصادقة بسهولة مع Logto في أي من اختبارات Cypress الخاصة بك.

الخطوة 1: بدء تدفق تسجيل الدخول

زيارة صفحة تسجيل الدخول لتطبيق العميل في اختبار Cypress، وبدء تدفق تسجيل الدخول بالنقر على زر تسجيل الدخول.

home

الخطوة 2: ملء نموذج تسجيل الدخول وإرساله

الانتقال إلى صفحة تسجيل الدخول لـ Logto، وملء اسم المستخدم وكلمة المرور لتسجيل الدخول.

في الاستخدام العادي، يمكن لاختبار Cypress واحد تشغيل الأوامر في أصل واحد فقط، وهو قيد تحدده ميزات أمان الويب القياسية للمتصفح. يسمح لك أمر cy.origin() باختباراتك تجاوز هذا القيد.

  1. التأكد من أن الرابط الحالي هو صفحة تسجيل الدخول لـ Logto. sign-in
  2. تحديد حقول إدخال اسم المستخدم وكلمة المرور وملء اسم المستخدم وكلمة المرور. submit
  3. النقر على زر تسجيل الدخول لتسجيل الدخول.

الخطوة 3: النجاح في المصادقة والعودة إلى تطبيق العميل الخاص بك

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

callback

الخطوة 4: تلخيص تدفق تسجيل الدخول بالكامل كأمر مخصص لـ Cypress

تلخيص تدفق تسجيل الدخول بالكامل كأمر مخصص لـ Cypress. cy.signIn في هذا المثال.

استخدام الأمر المخصص لـ Cypress للمصادقة على تطبيقك

في أي من اختبارات Cypress الخاصة بك، يمكنك استخدام الأمر المخصص لـ Cypress للمصادقة باستخدام Logto.

تهانينا! لقد نجحت في المصادقة باستخدام Logto في اختبارات Cypress الخاصة بك. يمكنك الآن التركيز على اختبار تطبيقك الـ SPA دون القلق حول تدفق المصادقة.

جرّب Logto Cloud