تعلم كيفية إنشاء حزمة تطوير برمجيات مخصصة لـ Logto باستخدام `@logto/browser`.
يوفر Logto، وهو منصة مصدر مفتوح للمصادقة، مجموعة من حزم تطوير البرمجيات الرسمية المصممة لتبسيط التكامل للعديد من الأطر والمنصات. ومع ذلك، لا تزال هناك العديد من المنصات التي لا تمتلك حزم تطوير برمجيات رسمية.
لردم هذه الفجوة، يقدم Logto الحزمة الأساسية @logto/browser، وهي مصممة لمساعدة المطورين في إنشاء حزم تطوير برمجيات مخصصة متوافقة مع متطلبات محددة. تقوم هذه الحزمة بتنفيذ الوظائف الأساسية الخاصة بـ Logto، بمعزل عن أي إطار أو منصة محددة، طالما أنها تدعم JavaScript وتعمل في بيئة المتصفح.
في هذا الدليل، سوف نقوم بالتجول خلال خطوات إنشاء حزمة تطوير برمجيات React باستخدام @logto/browser، حيث ستقوم هذه الحزمة بتنفيذ تدفق عملية تسجيل الدخول. يمكنك اتباع نفس الخطوات لإنشاء حزمة تطوير برمجيات لأي منصة قائمة على JavaScript تعمل في المتصفح.
قبل أن نبدأ، دعونا نفهم تدفق عملية تسجيل الدخول في Logto. يتكون تدفق عملية تسجيل الدخول من الخطوات التالية:
@logto/browserتوفر حزمة @logto/browser فئة LogtoClient التي تقدم الوظائف الأساسية لـ Logto، بما في ذلك أساليب تدفق عملية تسجيل الدخول:
signIn(): توليد URL للمصادقة الخاصة بـ OIDC، وإعادة التوجيه إليه.handleSignInCallback(): فحص وتحليل URL رد الاستعلام واستخراج رمز المصادقة، ثم تبادل الرمز مع الرموز عن طريق استدعاء نقطة نهاية الرمز.isAuthenticated(): التحقق مما إذا كان المستخدم قد قام بالمصادقة أم لا.في حزمة تطوير البرمجيات، سوف نوفر 2 هوك: useLogto و useHandleSignInCallback، بالإضافة إلى مكون LogtoProvider:
useLogto: هوك يوفر طريقة لتنشيط تدفق عملية تسجيل الدخول، وحالة isAuthenticated للتحقق مما إذا كان المستخدم قد تم التصديق عليه.useHandleSignInCallback: هوك يعالج عنوان URL لرد الاستعلام ويستبدل رمز المصادقة مع الرموز، ويكمل تدفق عملية تسجيل الدخول.لاستخدام حزمة تطوير البرمجيات، يمكنك ببساطة تغليف تطبيقك بمكون LogtoProvider، واستخدام الهوك للتحقق من حالة المصادقة، وتسجيل الدخول ومعالجة رد الاستعلام.
أولاً، قم بتثبيت حزمة @logto/browser باستخدام npm أو مديري الحزم الآخرين:
تعريف سياق الموفر، الذي يحتوي على 3 أجزاء:
LogtoClient الأساسي الذي سيتم تهيئته في الموفر، واستخدامه في الهوك.قم بإنشاء ملف جديد context.tsx واكتب الشفرة التالية:
مع جاهزية السياق، لنعمل على تنفيذ الموفر. سيقوم الموفر بتهيئة كائن LogtoClient، والتحقق مما إذا كان المستخدم قد تم التصديق عليه، وتوفير السياق لأطفاله.
قم بإنشاء ملف جديد provider.tsx:
الآن، لنقم بتنفيذ الهوك.
useLogto: في هذا الهوك، سنستخدم السياق للحصول على كائن LogtoClient، وتوفير طريقة لتسجيل الدخول وحالة isAuthenticated. يمكنك الاستمرار في إضافة المزيد من الأساليب إلى هذا الهوك.useHandleSignInCallback: هذا الهوك سيقرأ عنوان URL لرد الاستعلام من المتصفح، ويستخرج رمز المصادقة، ويقوم بتبادلها مع الرموز. كما سيعين حالة المصادقة إلى true بعد أن يتم التصديق على المستخدم.قم بإنشاء ملف جديد hooks.ts واكتب الشفرة التالية:
الآن، لقد قمت بإنشاء حزمة تطوير برمجيات React لـ Logto. يمكنك استخدامها في تطبيقك عن طريق تغليف التطبيق بمكون LogtoProvider، واستخدام الهوك للتحقق من حالة المصادقة وتسجيل الدخول ومعالجة رد الاستعلام. يمكنك الاطلاع على مشروع النموذج الرسمي لـ React هنا.
في هذا الدليل، قمنا بالتجول خلال خطوات إنشاء حزمة تطوير برمجيات React لـ Logto المنفذة لتدفق المصافحة الأساسي. الحزمة المقدمة هنا هي مثال أساسي. يمكنك توسيعها بإضافة المزيد من الأساليب والوظائف لتلبية احتياجات تطبيقك.
يمكنك اتباع نفس الخطوات لإنشاء حزمة تطوير برمجيات لأي منصة قائمة على JavaScript تعمل في متصفح.
المصادر: