العربية
دمج Passport.js مع Logto
دليل عملي ومثال لدمج Passport.js مع Logto.
Sijie
Developer
Developer
توقف عن إضاعة أسابيع في مصادقة المستخدم
أطلق تطبيقات آمنة بشكل أسرع مع Logto. قم بدمج مصادقة المستخدم في دقائق وركز على منتجك الأساسي.
ابدأ الآن
دليل عملي ومثال لدمج Passport.js مع Logto.
Passport.js هو وسيط مصادقة لـ Node.js يمكن إضافته بسهولة إلى أي تطبيق ويب مبني على Express. سيركز هذا الدليل الشامل على استخدام الإضافة passport-openidconnect، مما يوفر طريقة بسيطة وفعالة لدمج Logto مع Passport.js. خلال هذا الدرس، سنستخدم Express.js لبناء تطبيقنا. جميع الأكواد التي سنناقشها متاحة في مستودع GitHub العام.
قبل الغوص في عملية الدمج، سنحتاج إلى إعداد المشروع الأساسي مع تثبيت Express.js ووسيطة الجلسة الخاصة به.
بافتراض أن لديك بيئة مشروع TypeScript مُعدة (إذا لم يكن كذلك، راجع وثائق TypeScript الرسمية)، ابدأ بتثبيت الحزم اللازمة:
أنشئ src/app.ts بالكود التالي:
هذا السكربت يعمل على تهيئة تطبيق Express وتهيئة cookieParser ووسيطات الجلسة لإدارة الجلسات المستندة إلى الكوكيز، وهو أمر ضروري لتخزين نتائج المصادقة في Passport.js. ثم يستخدم وحدة http لتشغيل الخدمة.
للمتابعة، يلزم وجود تطبيق Logto. أنشئ واحدًا بزيارة Logto Console، وانتقل إلى "التطبيقات" وانقر على "إنشاء تطبيق". اختر "Express"، وسمّي تطبيقك، ثم انقر على "إنشاء تطبيق".
بعد الانتهاء أو قراءة دليل الإنشاء، ستجد صفحة تفصيلية تحتوي على معلومات التكوين للخطوات التالية.
في صفحة تفاصيل التطبيق، قم بتكوين قيمتين:
http://localhost:3000/callback ليتوافق مع مسار التحويل الخاص بالمشروع.http://localhost:3000 للبساطة، مما يوجه المستخدمين إلى الصفحة الرئيسية بعد تسجيل الخروج.يمكنك تغيير هذه القيم لاحقًا.
قم بتثبيت passport وإضافة استراتيجية OIDC، passport-openidconnect:
أنشئ app/config.ts لإدارة التكوين:
قم بضبط متغيرات البيئة وفقًا لذلك:
| المتغير البيئي | الوصف | المثال |
|---|---|---|
APP_ID | معرف التطبيق من Logto | 4ukboxxxxxxxxx |
APP_SECRET | سر التطبيق من Logto | 5aqccxxxxxxx |
ENDPOINT | نقطة النهاية لـ Logto | https://g5xxx.logto.app/ |
أنشئ src/passport.ts
يقوم هذا الكود بتهيئة Passport باستخدام OpenIDConnectStrategy. تم ضبط أساليب serialize وdeserialize لأغراض العرض.
تأكد من تهيئة وإرفاق الوسيط لPassport في تطبيقك:
سنقوم الآن بإنشاء مسارات محددة لعمليات المصادقة:
/sign-inيقوم هذا المسار ببناء وإعادة توجيه إلى مسار مصادقة OIDC.
/callbackيقوم هذا بمعالجة استرجاع تسجيل الدخول لـ OIDC، وتخزين الرموز، والعودة إلى الصفحة الرئيسية.
/sign-outيقوم هذا بإعادة التوجيه إلى عنوان URL لإنهاء الجلسة في Logto، ثم العودة إلى الصفحة الرئيسية.
تطوير الصفحة الرئيسية بحالة المصادقة:
هنا، يتم عرض معلومات المستخدم باستخدام JSON.stringify، ويتم استخدام وجود request.user لحماية المسارات.
تهانينا على دمج Passport.js مع Logto. نأمل أن يساعدك هذا الدليل في الانتقال من الأنظمة الحالية إلى استخدام Logto. للحصول على تجربة مصادقة محسّنة، فكر في تجربة Logto Cloud اليوم. برمجة ممتعة!