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

ابدأ#

دمج 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!

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

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