في هذه المقالة ، سنركز على توصيل Logto و Hasura ، مما يتيح لك تنفيذ المصادقة والتفويض وواجهة برمجة تطبيقات GraphQL بدون احتكاك. وبالتالي يمكنك القفز بسرعة إلى عملك دون التحصيل المعقد.
عندما يكون الأمر يتعلق بمشروع جديد ، عادةً لا يمكنك تجاوز العديد من الأشياء: واجهات برمجة التطبيقات ، المصادقة + التفويض ، الهوية ، وتدفق تسجيل الدخول للمستخدم النهائي. كان من الصعب بدء هذه الأشياء لأنها تحتوي على العديد من المفاهيم والتقنيات المنتشرة بشكل واسع: RESTful/GraphQL، الواجهة الأمامية للويب، العميل الأصلي، ربط العملاء بواجهات برمجة التطبيقات، أفضل الممارسات للمصادقة لتحقيق التوازن بين الأمان وتجربة المستخدم، إلخ.
أيضًا، معظم الأعمال هي "تكرارية". أعني أنها مطلوبة ومتشابهة في معظم المشاريع، مع بعض التعديلات.
يبدو مخيفًا ومملًا؟ لا تفزع. اليوم لدينا المصادر المفتوحة. مع المشروعين المفتوحين المصدر أدناه، تصبح الأمور ليست صعبة :
في هذه المقالة، سنركز على توصيل Logto و Hasura ، مما يتيح لك تنفيذ المصادقة والتفويض وواجهة برمجة تطبيقات GraphQL بدون احتكاك. وبالتالي يمكنك القفز بسرعة إلى عملك دون التحصيل المعقد.
نظرًا لأن كل من Logto و Hasura لديهما دليل بدء لائق ، نفترض أنك قرأتهما ولديك شعور أساسي. الوصول إلى نسخة تشغيلية من كلاهما مطلوب.
نفترض أن نقاط الوصول المتاحة هي:
http://localhost:3001http://localhost:8080أيضًا ، نفترض أن لديك منصة وإطار عمل مفضلين لبناء تطبيق العميل ، مثل React أو Next.js.
في لوحة التنقل الجانبية اليسرى في وحدة تحكم إدارة Logto ، انقر على "موارد واجهة برمجة التطبيقات" ، وسترى صفحة إدارة موارد واجهات برمجة التطبيقات.
ثم انقر على زر "+ إنشاء مورد واجهة برمجة تطبيقات" الضخم في الزاوية العلوية اليمنى. في النافذة المفتوحة، أدخل Hasura كاسم API و https://hasura.api كمعرف API.
سنستخدم هذا المعرف لـ API لبقية مقالتنا. لكن لا تتردد في تغيير القيم بناءً على تفضيلاتك.
انقر على "إنشاء مورد واجهة برمجة تطبيقات" ، وسيظهر لك رسالة تدل على أن المورد قد تم إنشاؤه بنجاح. هذا هو كل ما نحتاجه في Logto في الوقت الحالي.
للاستفادة من إدارة أذونات Hasura ، سنقوم بإنشاء أدوار في Logto ، سوف تتطابق هذه الأدوار مع أدوار Hasura.
تذكر أن تعين الدور للمستخدمين.
يستخدم Hasura إدارة الوصول القائمة على الدور ، والتي تتعامل مع التفويض. لذا، نحن بحاجة فقط إلى معرفة المصادقة. يدعم طريقتين: Webhook و JWT. نحن نختار webhook لأنه أكثر مرونة.
لتفعيل المصادقة باستخدام webhook ، يجب عليك تعيين السر الإداري ونقطة نهاية hook للمصادقة.
يمكنك ضبطها عبر متغيرات البيئة:
قد تلاحظ أننا نستخدم معرف API المملوء في Logto لبناء نقطة نهاية auth hook. يضمن أن المستخدم يمرر رمز المصادقة الصحيح بدلاً من رمز عشوائي قد يأتي من جهة ضارة.
تحتاج إلى تحديث نقطة نهاية auth hook إذا كان لديك نقطة نهاية مختلفة لـ Logto أو مؤشر API مختلف. لنفترض أن لديك https://logto.domain.com كنقطة نهاية لـ Logto و https://graphql.domain.com كمعرف API ، إذًا سيكون:
من الآن فصاعدًا ، لكل طلب GraphQL ، سيحضر Hasura جميع رؤوس الطلب إلى نقطة نهاية auth hook الخاصة بـ Logto، وسيرد Logto بشكل مناسب.
نظرًا لأننا لن نستخدم السر الإداري لـ Hasura في الإنتاج، فإن كل طلب GraphQL مضمون بواسطة الرؤوس التالية:
Authorization رموز حامل المصادقة القياسية التي يولدها Logto.Expected-Role الدور الذي ترغب في أن يعرضه Logto في استجابة auth hook.يتطلب رأس Authorization رمز وصول صالحًا بتنسيق JWT مع مؤشر API لـ Hasura للجمهور. مهلاً - من الصعب تذكر وتأليف كل هذه الأشياء. لحسن الحظ نحصل على حزم SDK لـ Logto لتبسيط الجزء التقني.
اتبع دليل الدمج لدمج SDK لـ Logto في تطبيق العميل الخاص بك. لا يتيح لك فقط القدرة على توليد رمز وصول صالح لطلبات GraphQL، ولكن أيضًا تجربة تسجيل دخول سلسة لمستخدميك النهائيين.
بمجرد الانتهاء من الدليل، نحتاج إلى تعديل صغير في LogtoConfig: أضف مؤشر API الذي أنشأته في وحدة تحكم إدارة Logto إلى resources. نأخذ SDK الخاص بـ React كمثال:
أخيرًا! بعد أن يسجل المستخدم الدخول، استخدم getAccessToken() في SDK الخاص بـ Logto للحصول على رمز الوصول لطلبات GraphQL لـ Hasura:
بفضل الجهد المبذول أعلاه، قمنا بتنفيذ جميع الأشياء غير القابلة للتخطي في القسم التمهيدي بنجاح:
ليس صعبًا جدًا، صحيح؟ إذا واجهت أي مشاكل، لا تتردد في الانضمام إلى خادم Discord لـ Logto أو Hasura للحديث المباشر مع الفريق.