يظهر كيفية تأمين تطبيقات الويب على Netlify ووظائف الخوادم الخالية من الخوادم باستخدام مصادقة Logto، كاملة مع أمثلة على الشيفرة المصدرية ومعاينة للعرض المباشر.
نتليفاي منصة قوية لنشر واستضافة المشاريع الويب الحديثة، تقدم تكامل جت سلس، وبناءات تلقائية، ووظائف خالية من الخوادم لعملية تطوير سريعة وقابلة للتوسع.
في هذا الدليل الشامل، ستتعلم كيف:
اطلع على معاينة للعرض المباشر عبر الإنترنت.
هذه هي الأشياء التي ستحتاج إلى إعدادها قبل بدء هذا الدليل:
اتبع دليل البدء السريع لـVite Getting Started Guide لإنشاء تطبيق React.
وفقًا لدليل الإنشاء واختيار تقنية التكديس التي تريدها. في هذه المقالة، سنختار React + TypeScript.
ثم ادخل إلى الدليل الجذر للمشروع، ثبّت الاعتماديات وفقًا للدليل، وقم بتشغيل التطبيق.
اتبع الدلائل الخاصة بـالبدء مع نتليفاي لنشر تطبيقك.
بمجرد نشر تطبيقك، يمكنك رؤية الموقع المباشر على https://<your-site-name>.netlify.app.
قم بتدوين هذا الـURL حيث سنحتاجه لاحقًا لتكوين Logto.
لبدء استخدام مصادقة 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.
لحماية نقاط نهاية الواجهة البرمجية الخاصة بنا:
https://api.backend.com)الآن، دعنا ننفذ تحقق الرمز في خلفيتنا للتأكد من أنه يتم معالجة الطلبات التي تحمل رموز دخول صالحة فقط.
أولاً، نحتاج إلى تثبيت التبعية jose لمساعدتنا في التحقق من رمز JWT:
ثم، يمكننا تنفيذ تحقق الرمز في الخلفية الخاصة بنا:
الآن، دعنا نقم بتحديث وظيفة نتليفاي الخاصة بنا لاستخدام وظيفة verifyLogtoToken:
هذا هو كل شيء! الآن، وظيفة نتليفاي الخاصة بنا محمية بواسطة Logto وسيتم معالجة الطلبات التي تحمل رموز دخول صالحة فقط.
الآن، قم بنشر تطبيقك على نتليفاي واجربه! يمكنك الرجوع إلى معاينة للعرض المباشر عبر الإنترنت هنا.
https://<your-site-name>.netlify.appapi/hello.يوضح هذا الدليل كيفية دمج مصادقة Logto في تطبيق ويب منشور على نتليفاي.
عبر تكوين تطبيقات Logto وموارد API، قمنا بتنفيذ مصادقة الواجهة الأمامية وحماية نقاط نهاية وظائف نتليفاي.
للحصول على تحكم أكثر دقة، يمكنك الاستفادة من إمكانيات Logto RBAC (التحكم في الوصول المستند إلى أدوار) من خلال تعريف الأدوار والتصاريح في لوحة تحكم Logto والتحقق من أدوار المستخدمين داخل وظائف نتليفاي.