إحضار واجهة تسجيل دخول خاصة بك إلى Logto Cloud

الخلفية#

يوفر Logto واجهة تجربة تسجيل دخول جاهزة تشمل جميع ميزات Logto، بما في ذلك تسجيل الدخول، والتسجيل، واستعادة كلمة المرور، وتسجيل الدخول الموحد (SSO)، وأكثر. يمكن للمستخدمين أيضًا تخصيص شكل ومظهر واجهة تجربة تسجيل الدخول باستخدام ميزة "Custom CSS" الخاصة بنا.

ومع ذلك، لا يزال بعض المستخدمين يرغبون في تخصيص عمق تجربة تسجيل الدخول الخاصة بهم (كل من واجهة المستخدم وتدفقات التوثيق) لتتناسب مع علامتهم التجارية ومتطلبات أعمالهم الخاصة. لقد سمعناك! ونحن متحمسون جدًا لإعلان أن ميزة "إحضار واجهتك الخاصة" متاحة الآن في Logto Cloud.

في هذا الدروس، سنوجهك خلال الخطوات لإنشاء ونشر واجهة تسجيل دخول مخصصة خاصة بك إلى Logto Cloud.

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

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

• حساب Logto Cloud مع خطة اشتراك
• تطبيق متكامل مع Logto (البدء السريع)
• Logto tunnel CLI مُثبت
• معرفة أساسية بـ HTML و CSS و JavaScript

للتبسيط، سنستخدم طريقة تسجيل الدخول الكلاسيكية "اسم المستخدم وكلمة المرور" في الخطوات التالية. تذكر تغيير طريقة تسجيل الدخول الخاصة بك في Logto Console.

إنشاء واجهتك المخصصة لتسجيل الدخول#

الحد الأدنى لمتطلبات واجهة تسجيل الدخول هو وجود ملف index.html، مع نموذج تسجيل دخول يتضمن على الأقل إدخال اسم المستخدم، وإدخال كلمة المرور، وزر تقديم. لقد استخدمت ChatGPT لإنشاء نموذج HTML، وها أنا أتيت بهذه الصفحة الجميلة لتسجيل الدخول بلون وردي.

لقد حذفت أنماط CSS للتبسيط، وهكذا يبدو شكل HTML البسيط:

يمكنك أيضًا البدء بقالب جاهز من إطار عمل الواجهة الأمامية المفضل لديك، مثل Create React App، Next.js، أو Vue CLI.

نظرًا لأن Logto مفتوح المصدر، يوصى بالاستنساخ من مشروع Logto Experience، وتعديل الكود لتلبية احتياجاتك. هذه هي واجهة تجربة تسجيل الدخول المدمجة في Logto الكاملة الميزات، المكتوبة بـ React و TypeScript.

إعداد Logto tunnel CLI#

Logto tunnel CLI هو أداة لا تعمل فقط على تقديم صفحات HTML الخاصة بك، بل تتيح لك أيضًا التفاعل مع Logto's Experience API من صفحات HTML الخاصة بك في بيئة التطوير المحلية.

بافتراض أن صفحة index.html الخاصة بك موجودة في /path/to/your/custom-ui، ومعرف المستأجر الخاص بـ Logto هو foobar، يمكنك تشغيل الأمر كالتالي:

أو، إذا كنت تستخدم إطارًا للواجهة الأمامية يحتوي على خادم تطوير مدمج، وتُقدم الصفحة الخاصة بك في http://localhost:4000، يمكنك تشغيل الأمر كالتالي:

بعد تشغيل الأمر، سيتم بدء خدمة النفق على جهازك المحلي http://localhost:9000/.

تشغيل تسجيل الدخول من تطبيقك#

اذهب إلى التطبيق الذي أنشأته سابقًا، وقم بتغيير نقطة النهاية الخاصة بـ Logto من https://foobar.logto.app/ إلى http://localhost:9000/ في إعداد Logto SDK الخاص بك.

لناخذ مشروع React كنموذج:

اضغط على زر "تسجيل الدخول" في تطبيقك. بدلاً من مشاهدة واجهة تسجيل الدخول المدمجة في Logto، يجب أن تُحول الآن إلى صفحة التسجيل المخصصة الخاصة بك.

التفاعل مع Logto Experience API#

في هذه الخطوة، سوف نتفاعل مع Logto Experience API في واجهتك المخصصة. أولاً، قم بإنشاء ملف script.js وأضف المرجع في index.html الخاص بك.

ضع الكود التالي في ملف script.js الخاص بك.

سيُكمل هذا السكريبت تدفق تسجيل الدخول باسم المستخدم وكلمة المرور بمساعدة هذه الواجهات:

• PUT /api/experience - بدء التفاعل مع تسجيل الدخول
• POST /api/experience/verification/password - التحقق من اسم المستخدم وكلمة المرور
• POST /api/experience/identification - تحديد المستخدم للتفاعل الحالي
• POST /api/experience/submit - إرسال التفاعل بتسجيل الدخول

توجه إلى وثائق Logto Experience API لمزيد من التفاصيل.

اختبار صفحة تسجيل الدخول المخصصة الخاصة بك#

1. انتقل إلى تطبيقك واضغط على زر "تسجيل الدخول".
2. يجب أن تُحول إلى صفحة تسجيل الدخول المخصصة الخاصة بك في http://localhost:9000/.
3. أدخل اسم المستخدم وكلمة المرور، واضغط على زر "إرسال".
4. إذا كان كل شيء مضبوطًا بشكل صحيح، يجب أن تُحول مرة أخرى إلى تطبيقك، مع معلومات المستخدم الموثق.

نشر واجهة مستخدم تسجيل الدخول المخصصة الخاصة بك إلى Logto Cloud#

بمجرد الانتهاء من تطوير واختبار واجهة تسجيل الدخول المخصصة الخاصة بك محليًا، يمكنك نشرها إلى Logto Cloud. ببساطة قم بإنشاء ملف مضغوط يحتوي على مجلد واجهتك المخصصة وقم بتحميله في قسم "Custom UI" في Logto Console الخاص بك.

بعد التحميل، قم بحفظ التغييرات، وسيُصبح واجهة تسجيل الدخول المخصصة الخاصة بك نشطة في مستأجر Logto Cloud الخاص بك، بدلاً من تجربة تسجيل الدخول المدمجة في Logto.

أخيرًا، ارجع إلى تطبيقك وغيّر عنوان نقطة النهاية إلى نقطة النهاية السحابية لـ Logto الخاص بك: https://foobar.logto.app/. في هذه المرة، يمكنك إيقاف خدمة النفق الخاصة بـ Logto، ويجب أن يعمل تطبيقك الآن مباشرةً مع الواجهة المخصصة المستضافة عبر الإنترنت.

الخاتمة#

في هذا الدروس، قمنا بتوجيهك خلال عملية تنفيذ ونشر واجهتك المخصصة لتسجيل الدخول إلى Logto Cloud.

مع هذه الميزة، يمكنك الآن تخصيص واجهة تسجيل دخولك وتدفقات التوثيق بعمق لتتناسب مع علامتك التجارية ومتطلبات أعمالك الخاصة.

برمجة سعيدة! 🚀