العربية
  • react
  • react-native
  • expo
  • tutorial
  • auth
  • authentication
  • oauth
  • oidc
  • identity

بناء مصادقة Expo (React Native) باستخدام Logto

تعلم كيفية بناء تدفق مصادقة المستخدم باستخدام Expo (React Native) من خلال دمج Logto SDK.

Gao
Gao
Founder

البدء

مقدمة

  • Logto هو بديل مفتوح المصدر لـ Auth0 لبناء بنى تحتية للهوية. يدعم طرق تسجيل الدخول المختلفة، بما في ذلك اسم المستخدم، البريد الإلكتروني، رقم الهاتف، وتسجيل الدخول الاجتماعي الشائع مثل Google و GitHub.
  • Expo (React Native) هو نظام بيئي من الأدوات التي تساعدك في إنشاء تطبيقات أصلية عالمية باستخدام React التي تعمل على Android و iOS والويب.

في هذا الدليل، سنوضح لك كيفية بناء تدفق مصادقة المستخدم باستخدام Expo (React Native) عبر دمج Logto SDK. يستخدم الدليل لغة البرمجة TypeScript.

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

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

  • حساب Logto. إذا لم يكن لديك واحد، يمكنك التسجيل مجانًا.
  • بيئة تطوير An Expo (React Native) ومشروع.

إنشاء تطبيق Logto

لبدء العمل، قم بإنشاء تطبيق Logto من نوع "Native". اتبع هذه الخطوات لإنشاء تطبيق Logto:

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

بعد ذلك، يجب أن ترى دليلاً تفاعليًا يرشدك خلال عملية دمج Logto SDK مع تطبيق Expo (React Native) الخاص بك. يمكن أن يكون المحتوى التالي مرجعًا للاستخدام في المستقبل.

جرب الدليل التفاعلي لـ Logto Cloud

الدمج مع Logto SDK

التثبيت

قم بتثبيت Logto SDK والتبعيات النظيرة عبر مدير الحزم المفضل لديك:

حزمة @logto/rn هي SDK لـ Logto. أما الحزم المتبقية فهي التبعيات النظيرة لها. لا يمكن إدراجها كتبعيات مباشرة لأن CLI لـ Expo يتطلب تثبيت جميع التبعيات للوحدات الأصلية مباشرة ضمن package.json في مشروع الجذر.

تهيئة مزود Logto

استورد واستخدم LogtoProvider لتوفير سياق Logto:

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

انتقل إلى صفحة تفاصيل التطبيق في وحدة التحكم Logto. أضف URI إعادة توجيه أصلي (على سبيل المثال، io.logto://callback)، ثم انقر على "حفظ".

  • بالنسبة لـ iOS، لا يهم نظام URI إعادة التوجيه فعليًا نظرًا لأن فصل ASWebAuthenticationSession سوف يستمع إلى URI إعادة التوجيه بغض النظر عما إذا كان مسجلاً أم لا.

  • بالنسبة لـ Android، يجب ملء نظام URI إعادة التوجيه في ملف app.json الخاص بـ Expo، على سبيل المثال:

الآن في العودة إلى تطبيقك، يمكنك استخدام الخطاف useLogto لتسجيل الدخول وتسجيل الخروج:

عرض معلومات المستخدم

لعرض معلومات المستخدم، يمكنك استخدام طريقة getIdTokenClaims():

نقطة التحقق: تشغيل التطبيق

الآن يمكنك تشغيل التطبيق ومحاولة تسجيل الدخول/الخروج باستخدام Logto:

  1. افتح التطبيق في متصفحك، يجب أن ترى زر "تسجيل الدخول".
  2. انقر على زر "تسجيل الدخول"، ويجب أن يتم إعادة توجيهك إلى صفحة تسجيل الدخول في Logto.
  3. بعد تسجيل الدخول، يجب أن يتم إعادة توجيهك مرة أخرى إلى التطبيق، ويجب أن ترى بيانات المستخدم وزر "تسجيل الخروج".
  4. انقر على زر "تسجيل الخروج"، ويجب أن يتم إعادة توجيهك إلى صفحة تسجيل الخروج في Logto، ثم يتم إعادة توجيهك مرة أخرى إلى التطبيق بحالة غير مسجلة الدخول.

إذا واجهت أي مشاكل أثناء عملية الدمج، لا تتردد في الانضمام إلى خادم Discord الخاص بنا للدردشة مع المجتمع وفريق Logto!

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

جرب Logto اليوم