إنشاء حزمة تطوير برمجيات ويب لـ Logto في دقائق

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

لردم هذه الفجوة، يقدم Logto الحزمة الأساسية @logto/browser، وهي مصممة لمساعدة المطورين في إنشاء حزم تطوير برمجيات مخصصة متوافقة مع متطلبات محددة. تقوم هذه الحزمة بتنفيذ الوظائف الأساسية الخاصة بـ Logto، بمعزل عن أي إطار أو منصة محددة، طالما أنها تدعم JavaScript وتعمل في بيئة المتصفح.

في هذا الدليل، سوف نقوم بالتجول خلال خطوات إنشاء حزمة تطوير برمجيات React باستخدام @logto/browser، حيث ستقوم هذه الحزمة بتنفيذ تدفق عملية تسجيل الدخول. يمكنك اتباع نفس الخطوات لإنشاء حزمة تطوير برمجيات لأي منصة قائمة على JavaScript تعمل في المتصفح.

تدفق عملية تسجيل الدخول#

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

1. إعادة التوجيه إلى Logto: يتم إعادة توجيه المستخدم إلى صفحة تسجيل الدخول الخاصة بـ Logto.
2. المصادقة: يقوم المستخدم بإدخال بيانات الاعتماد الخاصة به والمصادقة مع Logto.
3. إعادة التوجيه إلى التطبيق الخاص بك: بعد نجاح المصادقة، يتم إعادة توجيه المستخدم إلى التطبيق الخاص بك باستخدام رمز المصادقة.
4. تبادل الرموز: يقوم التطبيق الخاص بك بتبادل رمز المصادقة مع الرموز.

مقدمة موجزة عن @logto/browser#

توفر حزمة @logto/browser فئة LogtoClient التي تقدم الوظائف الأساسية لـ Logto، بما في ذلك أساليب تدفق عملية تسجيل الدخول:

1. signIn(): توليد URL للمصادقة الخاصة بـ OIDC، وإعادة التوجيه إليه.
2. handleSignInCallback(): فحص وتحليل URL رد الاستعلام واستخراج رمز المصادقة، ثم تبادل الرمز مع الرموز عن طريق استدعاء نقطة نهاية الرمز.
3. isAuthenticated(): التحقق مما إذا كان المستخدم قد قام بالمصادقة أم لا.

إنشاء حزمة تطوير البرمجيات React#

في حزمة تطوير البرمجيات، سوف نوفر 2 هوك: useLogto و useHandleSignInCallback، بالإضافة إلى مكون LogtoProvider:

1. useLogto: هوك يوفر طريقة لتنشيط تدفق عملية تسجيل الدخول، وحالة isAuthenticated للتحقق مما إذا كان المستخدم قد تم التصديق عليه.
2. useHandleSignInCallback: هوك يعالج عنوان URL لرد الاستعلام ويستبدل رمز المصادقة مع الرموز، ويكمل تدفق عملية تسجيل الدخول.

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

الخطوة 1: تثبيت الحزمة#

أولاً، قم بتثبيت حزمة @logto/browser باستخدام npm أو مديري الحزم الآخرين:

الخطوة 2: تعريف سياق React#

تعريف سياق الموفر، الذي يحتوي على 3 أجزاء:

1. الكائن LogtoClient الأساسي الذي سيتم تهيئته في الموفر، واستخدامه في الهوك.
2. حالة المصادقة.
3. الطريقة لتعيين حالة المصادقة.

قم بإنشاء ملف جديد context.tsx واكتب الشفرة التالية:

الخطوة 3: تنفيذ الموفر#

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

قم بإنشاء ملف جديد provider.tsx:

الخطوة 4: تنفيذ الهوك#

الآن، لنقم بتنفيذ الهوك.

• useLogto: في هذا الهوك، سنستخدم السياق للحصول على كائن LogtoClient، وتوفير طريقة لتسجيل الدخول وحالة isAuthenticated. يمكنك الاستمرار في إضافة المزيد من الأساليب إلى هذا الهوك.
• useHandleSignInCallback: هذا الهوك سيقرأ عنوان URL لرد الاستعلام من المتصفح، ويستخرج رمز المصادقة، ويقوم بتبادلها مع الرموز. كما سيعين حالة المصادقة إلى true بعد أن يتم التصديق على المستخدم.

قم بإنشاء ملف جديد hooks.ts واكتب الشفرة التالية:

نقطة التحقق: استخدام حزمة تطوير البرمجيات#

الآن، لقد قمت بإنشاء حزمة تطوير برمجيات React لـ Logto. يمكنك استخدامها في تطبيقك عن طريق تغليف التطبيق بمكون LogtoProvider، واستخدام الهوك للتحقق من حالة المصادقة وتسجيل الدخول ومعالجة رد الاستعلام. يمكنك الاطلاع على مشروع النموذج الرسمي لـ React هنا.

الخلاصة#

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

يمكنك اتباع نفس الخطوات لإنشاء حزمة تطوير برمجيات لأي منصة قائمة على JavaScript تعمل في متصفح.

المصادر:

1. حزمة تطوير البرمجيات Logto Browser
2. حزمة تطوير البرمجيات Logto React