حل مصادقة كامل للنهاية مع Logto على Netlify: حماية تطبيقات الويب والوظائف الخالية من الخوادم

نتليفاي منصة قوية لنشر واستضافة المشاريع الويب الحديثة، تقدم تكامل جت سلس، وبناءات تلقائية، ووظائف خالية من الخوادم لعملية تطوير سريعة وقابلة للتوسع.

في هذا الدليل الشامل، ستتعلم كيف:

• تنفيذ المصادقة في تطبيق صفحة واحدة (SPA) باستخدام Logto على نتليفاي، موضحًا بمثال Vite + React
• تأمين وظائف الخوادم الخالية من الخوادم على نتليفاي باستخدام مصادقة Logto
• نشر تطبيق جاهز للإنتاج باستخدام تنفيذ مرجعي لدينا: example-vite-react-logto

اطلع على معاينة للعرض المباشر عبر الإنترنت.

المتطلبات المسبقة#

هذه هي الأشياء التي ستحتاج إلى إعدادها قبل بدء هذا الدليل:

• حساب نتليفاي
• حساب Logto Cloud أو مثيل Logto المستضاف ذاتيًا

إنشاء تطبيق React باستخدام Vite#

اتبع دليل البدء السريع لـVite Getting Started Guide لإنشاء تطبيق React.

وفقًا لدليل الإنشاء واختيار تقنية التكديس التي تريدها. في هذه المقالة، سنختار React + TypeScript.

ثم ادخل إلى الدليل الجذر للمشروع، ثبّت الاعتماديات وفقًا للدليل، وقم بتشغيل التطبيق.

نشر التطبيق باستخدام نتليفاي#

اتبع الدلائل الخاصة بـالبدء مع نتليفاي لنشر تطبيقك.

بمجرد نشر تطبيقك، يمكنك رؤية الموقع المباشر على https://<your-site-name>.netlify.app.

قم بتدوين هذا الـURL حيث سنحتاجه لاحقًا لتكوين Logto.

دمج Logto في تطبيقك#

لبدء استخدام مصادقة Logto:

1. انتقل إلى صفحة "التطبيقات" في لوحة تحكم Logto
2. قم بإنشاء تطبيق جديد
   • اختر إطار عمل الواجهة الأمامية الخاص بك (React في مثالنا)
   • ملاحظة: يمكنك إنشاء أي تطبيق صفحة واحدة (SPA) أو تطبيق أصلي بناءً على احتياجاتك
3. اتبع دليل التكامل المقدم في إما:
   • الدليل المدمج في لوحة تحكم Logto، أو
   • الدليل الرسمي لتكامل المصادقة في React
4. من صفحة تفاصيل التطبيق، قم بتدوين:
   • هوية التطبيق الخاصة بك
   • نقطة نهاية Logto (يمكن العثور عليها في قسم "إعدادات ونقاط النهاية"، عادة بتنسيق https://<your-instance>.logto.app/) سيتم طلب هذه الاعتمادات في الخطوات التالية.

لاحظ أنه في العرض التوضيحي لدينا، نستخدم مسار /callback للتعامل مع إعادة توجيه تسجيل الدخول في Logto. يجب تكوين URI الإعادة في Logto كـ https://<your-site-name>.netlify.app/callback. بعد أن يقوم المستخدمون بتسجيل الخروج، نعود إلى الصفحة الرئيسية، لذا قمنا بتعيين URI إعادة التوجيه بعد تسجيل الخروج إلى https://<your-site-name>.netlify.app.

ثم قم بإعداد معلومات تطبيق Logto الذي أنشأناه في متغيرات البيئة الخاصة بنتليفاي (موقعك -> تكوين الموقع -> متغيرات البيئة):

ثم نستخدم هذه التكوينات في مشروع الواجهة الأمامية لدينا:

يمكنك عرض الشيفرة المتكاملة النهائية هنا: example-vite-react-logto.

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

عند زيارة مسارات مثل /callback، سيحاول نتليفاي العثور على ملفات مطابقة على الخادم بدلاً من توجيه الطلب إلى تطبيق React الخاص بك.

في هذه المرحلة، نحتاج إلى إنشاء ملف _redirects في الدليل العام لمشروع نتليفاي الخاص بك لإخبار نتليفاي بإعادة توجيه جميع الطلبات إلى index.html:

بدلاً من ذلك، يمكنك إنشاء ملف netlify.toml في جذر المشروع:

الآن يجب أن يعمل توجيهنا بشكل صحيح.

إنشاء واجهات برمجية خلفية بوظائف نتليفاي#

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

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

لنبدأ في بناء واجهات برمجية خلفية باستخدام وظائف نتليفاي.

أولاً، نحتاج إلى إنشاء دليل الوظائف تحت دليل مشروع نتليفاي، ثم إنشاء ملف hello.ts:

عندما نزور https://<your-site-name>.netlify.app/.netlify/functions/hello، سيتم استدعاء هذه الوظيفة وستعيد "Hello world!"".

إذا كنت تعتقد أن المسار /.netlify/functions/hello يبدو غريبًا بعض الشيء، يمكنك إعداد إعادة توجيه لاستدعاء الوظيفة عن طريق إضافة قاعدة إعادة توجيه في ملف _redirects العام:

بهذه الطريقة، عندما نزور https://<your-site-name>.netlify.app/api/hello، ستستدعي وظيفتنا وتعيد "Hello world!". هذه في الواقع هي الطريقة الشائعة لبناء واجهات برمجية باستخدام وظائف نتليفاي.

ويمكننا الوصول إلى هذه الواجهة البرمجية في مشروع الواجهة الأمامية باستخدام fetch:

حماية وظائف نتليفاي باستخدام Logto#

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

لحماية نقاط نهاية الواجهة البرمجية الخاصة بنا:

1. إنشاء مورد API في لوحة تحكم Logto لتمثيل واجهتنا البرمجية الخلفية:

• انتقل إلى "موارد API" في لوحة تحكم Logto وقم بإنشاء API جديد
• حدد اسمًا ومُعرّف API (مثل، https://api.backend.com)
• قم بتدوين مُعرّف API في صفحة تفاصيل مورد API حيث سنحتاجه لاحقًا

2. إعداد تطبيقك لاستخدام هذا المورد API من خلال إضافة المُعرّف إلى متغيرات البيئة الخاصة بنتليفاي:

3. تحديث تكوين Logto ليشمل هذا المورد API:

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

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

أولاً، نحتاج إلى تثبيت التبعية jose لمساعدتنا في التحقق من رمز JWT:

ثم، يمكننا تنفيذ تحقق الرمز في الخلفية الخاصة بنا:

الآن، دعنا نقم بتحديث وظيفة نتليفاي الخاصة بنا لاستخدام وظيفة verifyLogtoToken:

هذا هو كل شيء! الآن، وظيفة نتليفاي الخاصة بنا محمية بواسطة Logto وسيتم معالجة الطلبات التي تحمل رموز دخول صالحة فقط.

اختبار العرض التوضيحي الخاص بنا#

الآن، قم بنشر تطبيقك على نتليفاي واجربه! يمكنك الرجوع إلى معاينة للعرض المباشر عبر الإنترنت هنا.

1. قم بزيارة الموقع المباشر على https://<your-site-name>.netlify.app
2. انقر على زر "تسجيل الدخول" في شريط التنقل
3. سجل الدخول باستخدام حساب مستخدم في Logto، وسترى أنك قد سجلت الدخول.
4. انقر على علامة التبويب "المورد المحمي" في شريط التنقل، وستتم إعادة توجيهك إلى الصفحة المحمية.
5. انقر على زر "عرض المورد المحمي"، وسترى بيانات الاستجابة من نقطة النهاية api/hello.
6. انقر على زر "تسجيل الخروج" في شريط التنقل، وستتم إعادة توجيهك إلى الصفحة الرئيسية.

الخاتمة#

يوضح هذا الدليل كيفية دمج مصادقة Logto في تطبيق ويب منشور على نتليفاي.

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

للحصول على تحكم أكثر دقة، يمكنك الاستفادة من إمكانيات Logto RBAC (التحكم في الوصول المستند إلى أدوار) من خلال تعريف الأدوار والتصاريح في لوحة تحكم Logto والتحقق من أدوار المستخدمين داخل وظائف نتليفاي.