بناء مصادقة CapacitorJS باستخدام Logto

مقدمة#

• Logto هو بديل عصري لـ Auth0 لبناء بنية هوية العملاء ببساطة. يدعم طرق تسجيل الدخول المختلفة، بما في ذلك اسم المستخدم، البريد الإلكتروني، رقم الهاتف، وتسجيلات الدخول الاجتماعية الشهيرة مثل Google و GitHub.
• Capacitor هو بيئة تشغيل أصلية مفتوحة المصدر لبناء تطبيقات الويب الأصلية.

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

المتطلبات الأساسية#

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

• حساب Logto. إذا لم يكن لديك واحد، يمكنك التسجيل مجانًا.
• مشروع Capacitor. يمكنك اتباع الدليل الرسمي لإنشاء واحد.

إنشاء تطبيق Logto#

لبدء الاستخدام، قم بإنشاء تطبيق Logto من النوع "Native". تعمل تطبيقات Logto كتطبيقات عملاء في تدفقات OAuth 2.0 و OpenID Connect (OIDC). اتبع هذه الخطوات لإنشاء تطبيق Logto:

1. سجل دخولك إلى لوحة تحكم Logto السحابية.
2. في شريط التنقل الأيسر، انقر على التطبيقات.
3. انقر على إنشاء تطبيق.
4. اختر Native كنوع التطبيق وأدخل اسم التطبيق.
5. انقر على إنشاء.

بعد إنشاء تطبيق Logto، قم بتكوين URI إعادة التوجيه. يُستخدم URI إعادة التوجيه لإعادة توجيه المستخدم إلى تطبيقك بعد تدفق المصادقة.

تأكد من أن URI يعيد التوجيه إلى تطبيق Capacitor، على سبيل المثال، com.example.app://callback. قد يختلف القيمة بناءً على إعدادات تطبيق Capacitor الخاص بك. لمزيد من التفاصيل، راجع روابط عميقة Capacitor.

تذكر النقر على حفظ التغييرات بعد تحديث URI إعادة التوجيه.

إذا لم تكن متأكدًا من URI إعادة التوجيه، يمكنك تركه فارغًا الآن وتحديثه لاحقًا.

إعداد Capacitor#

بافتراض أنك لديك بالفعل مشروع Capacitor، هذا الدليل مستقل عن الإطار، لذا يمكنك استخدام أي إطار واجهة مستخدم تفضله وتحديث الكود وفقًا لذلك.

تثبيت التبعيات#

تهيئة Logto client#

• endpoint هو نقطة نهاية API لـ Logto. يمكنك العثور عليه في الدليل المدمج أو قسم Domains في إعدادات المستأجر.
• appId هو معرف تطبيق Logto. يمكنك العثور عليه في صفحة تفاصيل التطبيق.

تنفيذ زر تسجيل الدخول#

أضف الكود التالي إلى معالج onClick لزر تسجيل الدخول:

استبدل com.example.app://callback بـ URI إعادة التوجيه الذي قمت بتكوينه في تطبيق Logto.

تحقق نقطة التفتيش: تشغيل تدفق المصادقة#

قم بتشغيل تطبيق Capacitor وانقر على زر تسجيل الدخول. سيتم فتح نافذة متصفح تعيد التوجيه إلى صفحة تسجيل الدخول في Logto.

تسجيل الخروج#

نظرًا لأن Capacitor يستخدم Safari View Controller على iOS وChrome Custom Tabs على Android، يمكن الاحتفاظ بحالة المصادقة لفترة. ومع ذلك، أحيانًا قد يرغب المستخدم في تسجيل الخروج من التطبيق فورًا. في هذه الحالة، يمكننا استخدام طريقة signOut لتسجيل خروج المستخدم:

تحتوي طريقة signOut على معامل اختياريا ل URI إعادة التوجيه بعد تسجيل الخروج. إذا لم يتم توفيره، سيتم إعادة توجيه المستخدم إلى صفحة تسجيل الخروج في Logto:

يحتاج المستخدم إلى النقر على "تم" لإغلاق عرض الويب والعودة إلى تطبيق Capacitor. إذا كنت تريد إعادة توجيه المستخدم تلقائيًا إلى تطبيق Capacitor، يمكنك تقديم URI إعادة التوجيه بعد تسجيل الخروج:

تأكد من أن URI يعيد التوجيه بعد تسجيل الخروج إلى تطبيق Capacitor، وتذكر إضافة URI إعادة التوجيه بعد تسجيل الخروج إلى لوحة تحكم Logto:

تحقق نقطة التفتيش: إكمال تدفق المصادقة#

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

ثم انقر على زر تسجيل الخروج، وسيتم إعادة توجيه تطبيق Capacitor إلى صفحة تسجيل الخروج في Logto. سيتم إعادة التوجيه تلقائيًا إلى تطبيق Capacitor إذا تم تكوين URI إعادة التوجيه بعد تسجيل الخروج.

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

إذا واجهت أي مشاكل أثناء التكامل، لا تتردد في الاتصال بنا عبر البريد الإلكتروني على [email protected] أو الانضمام إلى سيرفر Discord الخاص بنا!

قراءات إضافية#

• تخصيص تجربة تسجيل الدخول
• تكوين الموصلات
• حماية واجهة برمجة التطبيقات الخاصة بك