كيف ندعم مجموعة متنوعة من الموصلات

مقدمة#

Connectors تلعب دورًا حيويًا في Logto. بمساعدتها، يمكّن Logto المستخدمين النهائيين من التسجيل أو تسجيل الدخول بدون كلمة مرور، بالإضافة إلى إمكانية تسجيل الدخول باستخدام حسابات اجتماعية. يسمح Logto للمستخدمين بتثبيت أو بناء موصلاتهم الخاصة، ويوجد بالفعل أكثر من 20 موصل رسمي. تم تصميم موصلاتنا لتكون مرنة بشكل كبير، وتسمح للمستخدمين بتثبيت أو حتى بناء موصلاتهم الخاصة. في نفس الوقت، من السهل تطوير موصل جديد. لتحقيق ذلك، قمنا بتصميم وتنفيذ حل يُدعى “Dynamic Form” مستوحى من تطوير مدفوع بالتكوينات (CDD).

الخلفية#

التهيئة لموصل Logto عبارة عن JSON والتي، رغم مرونتها، يمكن أن تكون تحدياً عند التعديل والتحقق. في البداية، لم يكن ذلك مشكلة كبيرة، لأنه في ذلك الوقت، كانت معظم تهيئات JSON كالآتي:

لكن مع دعمنا للمزيد من المزودين والبروتوكولات، بدأت الأمور تتغير. على سبيل المثال، “SAML connector” هناك أكثر من 10 مفاتيح في تهيئة JSON، ونوع القيم معقد، هناك سلاسل نصية، أرقام، JSON، قيم اختيار، وسلسلة متعددة السطور للشهادة.

لذلك نعتقد أنه حان الوقت لجلب نموذج مصمم بشكل جيد ليحل محل محرر JSON. تم تصميم موصل Logto للعمل كتطبيق طرف ثالث، لذلك لا يعتبر ترميز النماذج بشكل ثابت حلاً مناسبًا. النتيجة هي حاجة قوية لنماذج ديناميكية يسهل إدارتها، وتوفر تجربة مستخدم جيدة في نفس الوقت. النموذج لموصل SAML الذي تحدثنا عنه أعلاه يبدو كالآتي:

ما هو تطوير مدفوع بالتكوينات (CDD)#

CDD، أو تطوير مدفوع بالمكونات، يقدم نهجًا بديلاً لبناء التطبيقات. في الطريقة التقليدية، يقوم المهندسون المعماريون الرئيسيون بإنشاء تصميمات بناءً على احتياجات العمل، ثم يتم تطوير التطبيق ونشره، وأي تعديلات تُنفذ إما من خلال عناصر إضافية أو من خلال إعادة تشكيل صعبة.

في المقابل، يركز CDD على بناء مكونات مستقلة من البداية، بدءًا من المستوى الأساسي. يتم إنشاء واجهة، غالبًا JSON، لتجميع واجهة المستخدم ذات المستوى الأعلى. هذا النهج، الذي يتضمن جمع المكونات القابلة لإعادة الاستخدام ومخطط JSON، يمكّن المطورين من بناء التطبيقات بطريقة أكثر مرونة وقابلية للتوسع.

جوهر CDD يكمن في استغلاله للمودولار لتصميم مجموعة فضفاضة الارتباط من المكونات، والتي يتم تجميعها باستخدام واجهة موحدة.

ما هو النموذج الديناميكي؟#

تبني نهج تطوير مدفوع بالتكوينات (CDD) يسمح لنا بإنشاء نماذج ويب ديناميكية. هذه ليست نماذج عادية ذات حقول ثابتة وغير متغيرة؛ بل هي كيانات ديناميكية ذات حقول تُولد استنادًا إلى ملف JSON. جمال هذه النماذج الديناميكية في مرونتها – إذا كانت هناك حاجة لتغيير في حقول النموذج، كل ما يتطلبه الأمر هو تحديث تكوين JSON. هذا المستوى من التكيف يجعل النماذج الديناميكية حلاً مثاليًا لموصلات Logto، التي تتطلب تهيئات نماذج مختلفة غير معروفة لـ Logto.

تصميم المخطط#

قمنا بتصميم المخطط ليكون مجموعة من عناصر النموذج، كل عنصر قد يحتوي على اسم، وملصق، ووصف توضيحي، والأهم، النوع. لدينا 6 أنواع من عناصر النموذج، وتم تعريفها كمعدد:

وتعريف النوع لعناصر النموذج هو:

ثم المخطط الكامل هو:

لكن هناك مشكلة صغيرة، نوع النموذج "select" يتطلب قائمة من الخيارات، لذلك أضف هذا الحقل إلى FormItem:

بناء النموذج باستخدام React-Hook-Form#

الآن بعد أن تم ضبط المخطط، يمكننا بناء النموذج في الواجهة الأمامية استنادًا إلى المخطط. سنستخدم React Hook Form لتحقيق ذلك.

React-Hook-Form هو أداة قوية لبناء نماذج فعالة وسهلة الاستخدام في React.

أول شيء هو تهيئة نموذج، لنتصور أن تهيئة JSON تم جلبها واسمها formItems، والبيانات في النموذج هي formData:

ثم، تنفيذ عنصر التحكم في النموذج وفقًا للنوع، هنا عرض بسيط:

الخاتمة#

تتألق مرونة تطوير مدفوع بالتكوينات (CDD) عند تطبيقها على إنشاء النماذج الديناميكية، خاصة في حالة موصلات Logto. الفوائد مزدوجة:

1. بالنسبة للمطورين، يُبسط عملية إنشاء نماذج تفاعلية وسهلة الاستخدام. بدلاً من التعامل مع تعقيدات الترميز الدقيقة، كل ما يحتاجه المطورون هو تعريف ملف JSON للحصول على واجهات مستخدم مصممة بشكل أفضل وعملية من قبل فريق Logto.
2. بالنسبة للمستخدمين، تبسط هذه الطريقة بشكل كبير عملية إعداد الموصل. تأخذ التعقيد من التكامل، مما يسهل على المستخدمين دمج Logto مع ميزات تسجيل الدخول الاجتماعي، وكذلك خدمات البريد الإلكتروني أو الرسائل القصيرة.

مؤخرًا، المقالات التي تروج للكود القليل منتشرة على الإنترنت. تم تطوير هذا الحل من منظور احتياجات المستخدم الفعلية، ونعتقد أنه يمثل صورة رائعة للكود القليل.

هل ترغب في تجربتها؟ انتقل إلى Logto Cloud واختر موصل.