العربية

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

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

    Charles
    Charles
    Developer

    الخلفية

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

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

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

    المتطلبات المسبقة

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

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

    تسجيل دخول باسم المستخدم وكلمة المرور

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

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

    صفحة تسجيل الدخول المخصصة

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

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

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

    إعداد CLI نفق Logto

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

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

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

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

    إطلاق تسجيل الدخول من تطبيقك

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

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

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

    التفاعل مع API تجربة Logto

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

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

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

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

    راجع وثائق API تجربة Logto للحصول على مزيد من التفاصيل.

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

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

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

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

    رفع واجهة مخصصة

    بعد التحميل، احفظ التغييرات، وستصبح واجهة تسجيل الدخول المخصصة الخاصة بك فعالة في مستأجر Logto Cloud الخاص بك، لتحل محل تجربة تسجيل الدخول المدمجة لـ Logto.

    واجهة مخصصة مفعلة

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

    الاستنتاج

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

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

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

    جرّب Logto Cloud مجانًا