العربية

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

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

Charles

Developer

8/23/2024

توقف عن إضاعة أسابيع في مصادقة المستخدم

أطلق تطبيقات آمنة بشكل أسرع مع Logto. قم بدمج مصادقة المستخدم في دقائق وركز على منتجك الأساسي.

ابدأ الآن

الخلفية

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

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

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

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

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

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

للسهولة، سنستخدم طريقة تسجيل الدخول الكلاسيكية "اسم المستخدم وكلمة المرور" في الخطوات التالية. تذكر تغيير طريقة تسجيل الدخول الخاصة بك في 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 للحصول على مزيد من التفاصيل.

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

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

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

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

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

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

الاستنتاج

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

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

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

جرب Logto Cloud مجاناً

الخلفية#

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

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

إعداد CLI نفق Logto#

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

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

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

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

الاستنتاج#

الخلفية#

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

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

إعداد CLI نفق Logto#

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

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

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

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

الاستنتاج#

الخلفية

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

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

إعداد CLI نفق Logto

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

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

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

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

الاستنتاج

الخلفية

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

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

إعداد CLI نفق Logto

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

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

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

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

الاستنتاج