العربية
  • angular
  • frontend
  • tutorial
  • auth
  • authentication
  • oauth
  • oidc
  • identity

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

تعلم كيفية بناء تدفق مصادقة المستخدم مع Angular من خلال دمج مكتبة عميل Angular OIDC.

Gao
Gao
Founder

ابدأ

مقدمة

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

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

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

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

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

إنشاء تطبيق Logto

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

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

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

دمج Logto مع مشروعك

التثبيت

قم بتثبيت Logto JS core SDK ومكتبة عميل Angular OIDC:

تكوين التطبيق

في مشروع Angular الخاص بك، أضف مزود المصادقة إلى app.config.ts:

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

تكوين عناوين URI لإعادة التوجيه

انتقل إلى صفحة تفاصيل التطبيق في لوحة تحكم Logto. أضف عنوان إعادة توجيه URI http://localhost:3000/callback.

عنوان إعادة التوجيه URI هو مفهوم في OAuth 2.0 يشير إلى الموقع الذي يجب إعادة التوجيه إليه بعد المصادقة.

بالمثل، أضف http://localhost:3000/ إلى قسم "عنوان إعادة التوجيه بعد تسجيل الخروج".

عنوان إعادة التوجيه بعد تسجيل الخروج هو مفهوم في OAuth 2.0 يشير إلى الموقع الذي يجب إعادة التوجيه إليه بعد تسجيل الخروج.

ثم انقر على "حفظ" لحفظ التغييرات.

في المكون حيث تريد تنفيذ تسجيل الدخول والخروج (على سبيل المثال، app.component.ts)، قم بحقن OidcSecurityService واستخدمه لتسجيل الدخول والخروج.

ثم، في القالب، أضف أزرارًا لتسجيل الدخول والخروج:

الاشتراك في حالة المصادقة وعرض معلومات المستخدم

يقدم OidcSecurityService طريقة مريحة للاشتراك في حالة المصادقة:

واستخدمها في القالب:

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

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

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

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

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