## مقدمة عندما يكون الأمر يتعلق بمشروع جديد ، عادةً لا يمكنك تجاوز العديد من الأشياء: واجهات برمجة التطبيقات ، المصادقة + التفويض ، الهوية ، وتدفق تسجيل الدخول للمستخدم النهائي. كان من الصعب بدء هذه الأشياء لأنها تحتوي على العديد من المفاهيم والتقنيات المنتشرة بشكل واسع: RESTful/GraphQL، الواجهة الأمامية للويب، العميل الأصلي، ربط العملاء بواجهات برمجة التطبيقات، أفضل الممارسات للمصادقة لتحقيق التوازن بين الأمان وتجربة المستخدم، إلخ. أيضًا، معظم الأعمال هي "تكرارية". أعني أنها مطلوبة ومتشابهة في معظم المشاريع، مع بعض التعديلات. يبدو مخيفًا ومملًا؟ لا تفزع. اليوم لدينا المصادر المفتوحة. مع المشروعين المفتوحين المصدر أدناه، تصبح الأمور ليست صعبة : - [Logto](https://github.com/logto-io/logto): يساعدك على بناء تسجيل الدخول، المصادقة، وهوية المستخدم في دقائق. - [Hasura](https://github.com/hasura/graphql-engine): واجهات برمجة تطبيقات GraphQL سريعة بشكل مذهل وفورية في الوقت الحقيقي على قاعدة بياناتك مع التحكم الدقيق في الوصول. في هذه المقالة، سنركز على توصيل Logto و Hasura ، مما يتيح لك تنفيذ المصادقة والتفويض وواجهة برمجة تطبيقات GraphQL بدون احتكاك. وبالتالي يمكنك القفز بسرعة إلى عملك دون التحصيل المعقد. ## ابدأ ### المتطلبات الأساسية نظرًا لأن كل من [Logto](https://docs.logto.io/docs/tutorials/get-started/) و [Hasura](https://hasura.io/docs/latest/getting-started/index/) لديهما دليل بدء لائق ، نفترض أنك قرأتهما ولديك شعور أساسي. الوصول إلى نسخة تشغيلية من كلاهما مطلوب. نفترض أن نقاط الوصول المتاحة هي: - Logto: `http://localhost:3001` - Hasura: `http://localhost:8080` إذا كنت تستخدم Docker/Docker Compose ، للوصول إلى جهازك (المضيف) `localhost` ، يمكنك استخدام سلسلة السحر Docker `host.docker.internal`. في هذه الحالة، ستكون نقطة الوصول لـ Logto هي `http://host.docker.internal:3001`. أيضًا ، نفترض أن لديك منصة وإطار عمل مفضلين لبناء تطبيق العميل ، مثل React أو Next.js. ### إعداد واجهة برمجة التطبيقات في Logto في لوحة التنقل الجانبية اليسرى في وحدة تحكم إدارة Logto ، انقر على "موارد واجهة برمجة التطبيقات" ، وسترى صفحة إدارة موارد واجهات برمجة التطبيقات. ثم انقر على زر "+ إنشاء مورد واجهة برمجة تطبيقات" الضخم في الزاوية العلوية اليمنى. في النافذة المفتوحة، أدخل `Hasura` كاسم API و `https://hasura.api` كمعرف API. إنشاء نافذة منبثقة لواجهة برمجة التطبيقات

إنشاء نافذة منبثقة لواجهة برمجة التطبيقات

سنستخدم هذا المعرف لـ API لبقية مقالتنا. لكن لا تتردد في تغيير القيم بناءً على تفضيلاتك. انقر على "إنشاء مورد واجهة برمجة تطبيقات" ، وسيظهر لك رسالة تدل على أن المورد قد تم إنشاؤه بنجاح. هذا هو كل ما نحتاجه في Logto في الوقت الحالي. ### إنشاء دور لـ Hasura للاستفادة من إدارة أذونات Hasura ، سنقوم بإنشاء أدوار في Logto ، سوف تتطابق هذه الأدوار مع أدوار Hasura.

يجب أن يساوي اسم الدور اسم الدور في صفحة "الأذونات" لـ Hasura. تذكر أن تعين الدور للمستخدمين. ### تفعيل المصادقة باستخدام Webhook في Hasura [يستخدم Hasura إدارة الوصول القائمة على الدور](https://hasura.io/docs/latest/auth/index/) ، والتي تتعامل مع التفويض. لذا، نحن بحاجة فقط إلى معرفة المصادقة. يدعم طريقتين: Webhook و JWT. نحن نختار [webhook](https://hasura.io/docs/latest/auth/authentication/webhook/) لأنه أكثر مرونة. لتفعيل المصادقة باستخدام webhook ، يجب عليك تعيين السر الإداري ونقطة نهاية hook للمصادقة. - السر الإداري هو المفتاح للحصول على وصول المدير لـ Hasura عند إرسال طلبات. مطلوب قبل تفعيل المصادقة باستخدام webhook. تذكر الاحتفاظ به في مكان آمن، ولا تستخدمه في الإنتاج. - نقطة نهاية auth hook هي عنوان URL لإرسال طلبات المصادقة. يمكنك ضبطها عبر [متغيرات البيئة](https://hasura.io/docs/latest/auth/authentication/webhook/#configuring-webhook-mode): ```yaml HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey # استبدل بسرّك الخاص HASURA_GRAPHQL_AUTH_HOOK: http://localhost:3001/api/authn/hasura?resource=https://hasura.api ``` قد تلاحظ أننا نستخدم معرف API المملوء في Logto لبناء نقطة نهاية auth hook. يضمن أن المستخدم يمرر رمز المصادقة الصحيح بدلاً من رمز عشوائي قد يأتي من جهة ضارة. تحتاج إلى تحديث نقطة نهاية auth hook إذا كان لديك نقطة نهاية مختلفة لـ Logto أو مؤشر API مختلف. لنفترض أن لديك `https://logto.domain.com` كنقطة نهاية لـ Logto و `https://graphql.domain.com` كمعرف API ، إذًا سيكون: ```yaml HASURA_GRAPHQL_AUTH_HOOK: https://logto.domain.com/api/authn/hasura?resource=https://graphql.domain.com ``` من الآن فصاعدًا ، لكل طلب GraphQL ، سيحضر Hasura جميع رؤوس الطلب إلى نقطة نهاية auth hook الخاصة بـ Logto، وسيرد Logto بشكل مناسب. ## إرسال طلبات GraphQL المؤمنة ### الملخص نظرًا لأننا لن نستخدم السر الإداري لـ Hasura في الإنتاج، فإن كل طلب GraphQL مضمون بواسطة الرؤوس التالية: - `Authorization` رموز حامل المصادقة القياسية التي يولدها Logto. - `Expected-Role` الدور الذي ترغب في أن يعرضه Logto في استجابة auth hook. إذا لم يكن لدى المستخدم الذي يشير إليه رأس `Authorization` الدور `Expected-Role`، سيرد Logto مع رمز `401 غير مصرح به`. يتطلب رأس `Authorization` رمز وصول صالحًا بتنسيق JWT مع مؤشر API لـ Hasura للجمهور. مهلاً - من الصعب تذكر وتأليف كل هذه الأشياء. لحسن الحظ نحصل على حزم SDK لـ Logto لتبسيط الجزء التقني. ### دمج Logto SDK اتبع [دليل الدمج](https://docs.logto.io/docs/recipes/integrate-logto/) لدمج SDK لـ Logto في تطبيق العميل الخاص بك. لا يتيح لك فقط القدرة على توليد رمز وصول صالح لطلبات GraphQL، ولكن أيضًا تجربة تسجيل دخول سلسة لمستخدميك النهائيين. بمجرد الانتهاء من الدليل، نحتاج إلى تعديل صغير في `LogtoConfig`: أضف مؤشر API الذي أنشأته في وحدة تحكم إدارة Logto إلى `resources`. نأخذ SDK الخاص بـ React كمثال: ```tsx const config: LogtoConfig = { endpoint: 'http://localhost:3001', appId: '', resources: ['https://hasura.api'], // أضف هذا السطر }; ``` ### إرسال الطلبات أخيرًا! بعد أن يسجل المستخدم الدخول، استخدم `getAccessToken()` في SDK الخاص بـ Logto للحصول على رمز الوصول لطلبات GraphQL لـ Hasura: ```tsx const accessToken = await logto.getAccessToken('https://hasura.api'); // قبل إرسال الطلب request.headers.set('Authorization', `Bearer ${accessToken}`); request.headers.set('Expected-Role', 'user'); ``` ## إعادة التلخيص بفضل الجهد المبذول أعلاه، قمنا بتنفيذ جميع الأشياء غير القابلة للتخطي في القسم التمهيدي بنجاح: - نقطة نهاية واجهة برمجة التطبيقات المستندة إلى مخطط قاعدة البيانات لـ GraphQL - خدمة المصادقة والهوية على أساس بروتوكول OIDC - تدفق تسجيل الدخول الكامل للمستخدم النهائي وإدارة حالة المصادقة - الوصول إلى واجهة برمجة التطبيقات المؤمنة بناءً على هوية المستخدم والأدوار ليس صعبًا جدًا، صحيح؟ إذا واجهت أي مشاكل، لا تتردد في الانضمام إلى خادم Discord لـ [Logto](https://discord.gg/vRvwuwgpVX) أو [Hasura](https://discord.gg/hasura) للحديث المباشر مع الفريق.