إنشاء موصل اجتماعي لـ Logto

الخلفية#

تسجيل الدخول الاجتماعي ضروري للتطبيقات الحديثة. يبسط عملية تسجيل المستخدم، يعزز تجربة المستخدم، ويزيد من تفاعل المستخدمين ومعدل التحويل. في Logto، نستخدم الموصلات الاجتماعية لتسجيل الدخول عبر مزود الهوية الاجتماعية من الطرف الثالث.

ما هو "الموصل"؟#

الموصل هو قطعة صغيرة من البرنامج الذي يربط Logto بخدمة من طرف ثالث. هو مسؤول عن إدارة سريان تسجيل الدخول، تبادل الرموز، واسترجاع معلومات المستخدم من الخدمة الطرف الثالث.

تقدم Logto مجموعة متنوعة من الموصلات الرسمية المصممة لتبسيط التكامل مع مختلف المنصات الاجتماعية. حتى اليوم، يوجد بالفعل أكثر من 30 موصل بشكل إجمالي، منها أكثر من 10 موصلات ساهمت بها مجتمعنا المفتوح المصدر. ونتوقع أن تنمو هذه الأعداد بسرعة في المستقبل.

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

سريان تسجيل الدخول#

قبل أن نبدأ، دعنا نفهم كيفية عمل سريان تسجيل الدخول الاجتماعي في Logto.

الآن دعنا نبدأ#

أسرع طريقة للبدء هي نسخ الكود من موصل رسمي موجود وتعديله ليناسب احتياجاتك. لنأخذ موصل GitHub كمثال.

الخطوة 1: استنساخ حزمة موصل موجودة#

في مجلد مصدر الموصل، ستجد الملفات التالية:

• index.ts: الملف الرئيسي للدخول للموصل.
• constant.ts: الثوابت المستخدمة في الموصل.
• types.ts: أنواع TypeScript المستخدمة في الموصل.
• index.test.ts: حالات الاختبار للموصل.
• mock.ts: البيانات الوهمية المستخدمة في حالات اختبار الموصل.

بالإضافة إلى هذه الملفات، ستحتاج أيضًا إلى توفير ملف README.md لوصف الموصل، وصورة logo.svg (اختياريًا logo-dark.svg لتحسين تجربة المستخدمين في الوضع المظلم)، وملف package.json لتعريف معلومات حزمة npm.

الخطوة 2: تعديل الملف الرئيسي (index.ts)#

في ملف index.ts، ستجد معظم منطق الموصل. هناك عادةً 4 وظائف تحتاج إلى تنفيذ:

• getAuthorizationUri: توليد URI التفويض للمنصة الاجتماعية الطرف الثالث. بالنسبة لـ GitHub، سيكون: https://github.com/login/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&state={state}. ارجع إلى وثائق المطور لمنصتك الاجتماعية المستهدفة للحصول على URI الصحيح.
• authorizationCallbackHandler: تأمين القيم المعادة للمعلمات في URI رد التفويض، استخراج رمز التفويض code ومعالجة الأخطاء المحتملة.
• getAccessToken: تبادل رمز التفويض code للحصول على رمز الوصول.
• getUserInfo: استرجاع معلومات المستخدم من المنصة الاجتماعية الطرف الثالث باستخدام رمز الوصول.

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

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

الخطوة 3: اختبار الموصل#

اختبار الوحدة#

أولاً، اكتب بعض حالات اختبار الوحدة وتأكد من أن الوظائف الأساسية تعمل كما هو متوقع.

اختبار محلي#

• إعداد Logto في بيئتك المحلية: يوفر Logto عدة طرق للتشغيل محليًا، يمكنك إما استخدام CLI، أو docker، أو حتى البناء من كود المصدر. تحقق من الوثائق لمزيد من التفاصيل.

• ربط موصلك المخصص بنسخة Logto الخاصة بك: استخدم CLI لإنشاء ارتباط رمزي لموصلك إلى نسخة Logto. لمزيد من التفاصيل.

• بعد ربط الموصل، يجب أن تراه في مجلد <logto-root-path>/packages/core/connectors.

• أعد تشغيل نسخة Logto الخاصة بك، وتوجه إلى وحدة تحكم إدارة Logto، يجب أن تكون قادرًا على رؤيته في قائمة الموصلات الاجتماعية.

• قم بتكوين موصلك في "تجربة تسجيل الدخول" -> "التسجيل وتسجيل الدخول" -> "تسجيل الدخول الاجتماعي". وجربه في تطبيق العرض التوضيحي الخاص بنا مع ميزة "المعاينة الحية".

  

الخطوة 4 (اختياري): نشر الموصل#

يمكنك نشر موصلك إلى NPM، ومشاركته مع المجتمع. أو حتى رفع PR والمساهمة في مستودع GitHub الرسمي لـ Logto لجعله موصل مدعوم رسميًا. سيتم صيانة الموصلات الرسمية من قبل فريق تطوير Logto وجعلها متاحة لكل من المستخدمين مفتوح المصدر وسحابة Logto.

الخلاصة#

إنشاء موصل اجتماعي مخصص لـ Logto ليس صعبًا كما قد تظن. بمساعدة مجموعة أدوات موصل Logto وأمثلة جيدة من الكود، يمكنك بسهولة إنشاء موصل في بضع خطوات فقط.

ومن خلال المساهمة بموصلك، يمكنك مساعدة المزيد من المستخدمين على الاستمتاع بالمنصة الاجتماعية التي تضيفها إلى عائلة Logto.