تعلم كيفية بناء تدفق مصادقة المستخدم مع Angular من خلال دمج مكتبة عميل Angular OIDC.
في هذا الدليل، سنوضح لك كيفية بناء تدفق مصادقة المستخدم باستخدام Angular عبر دمج Logto SDK. يستخدم الدليل لغة البرمجة TypeScript.
قبل أن تبدأ، تأكد من توفر ما يلي:
لبدء العمل، قم بإنشاء تطبيق Logto من نوع "تطبيق صفحة واحدة". اتبع هذه الخطوات لإنشاء تطبيق Logto:
بعد ذلك، يجب أن ترى دليلاً تفاعليًا يرشدك خلال عملية دمج Logto SDK مع تطبيق Angular الخاص بك. يمكن أن يكون المحتوى التالي مرجعًا للاستخدام في المستقبل.
قم بتثبيت Logto JS core SDK ومكتبة عميل Angular OIDC:
في مشروع Angular الخاص بك، أضف مزود المصادقة إلى app.config.ts:
انتقل إلى صفحة تفاصيل التطبيق في لوحة تحكم Logto. أضف عنوان إعادة توجيه URI http://localhost:3000/callback.
عنوان إعادة التوجيه URI هو مفهوم في OAuth 2.0 يشير إلى الموقع الذي يجب إعادة التوجيه إليه بعد المصادقة.
بالمثل، أضف http://localhost:3000/ إلى قسم "عنوان إعادة التوجيه بعد تسجيل الخروج".
عنوان إعادة التوجيه بعد تسجيل الخروج هو مفهوم في OAuth 2.0 يشير إلى الموقع الذي يجب إعادة التوجيه إليه بعد تسجيل الخروج.
ثم انقر على "حفظ" لحفظ التغييرات.
في المكون حيث تريد تنفيذ تسجيل الدخول والخروج (على سبيل المثال، app.component.ts)، قم بحقن OidcSecurityService واستخدمه لتسجيل الدخول والخروج.
ثم، في القالب، أضف أزرارًا لتسجيل الدخول والخروج:
يقدم OidcSecurityService طريقة مريحة للاشتراك في حالة المصادقة:
واستخدمها في القالب:
الآن يمكنك تشغيل التطبيق ومحاولة تسجيل الدخول/الخروج باستخدام Logto:
إذا واجهت أي مشاكل أثناء عملية الدمج، لا تتردد في الانضمام إلى خادم Discord الخاص بنا للدردشة مع المجتمع وفريق Logto!