مشاركة عبر

دعم واجهة برمجة التطبيقات في Azure Static Web Apps باستخدام Azure API Management

  • مقالة

Azure API Management هي خدمة تسمح لك بإنشاء بوابة واجهة برمجة تطبيقات حديثة لخدمات النهاية الخلفية الحالية.

عند ربط خدمة Azure API Management بتطبيق الويب الثابت الخاص بك، يتم توصيل أي طلبات لتطبيق الويب الثابت الخاص بك بمسار يبدأ بنفس /api المسار في خدمة Azure API Management.

يمكن ربط خدمة Azure API Management بتطبيقات ويب ثابتة متعددة في نفس الوقت. يتم إنشاء منتج APIM لكل تطبيق ويب ثابت مرتبط. تتوفر أي واجهات برمجة تطبيقات تمت إضافتها إلى المنتج لتطبيق الويب الثابت المقترن.

تتوفر جميع مستويات تسعير Azure API Management للاستخدام مع Azure Static Web Apps.

تتضمن خيارات واجهة برمجة التطبيقات لتطبيقات الويب الثابتة خدمات Azure التالية:

راجع نظرة عامة على واجهات برمجة التطبيقات لمزيد من المعلومات.

إشعار

يتطلب التكامل مع Azure API Management خطة Static Web Apps Standard.

تكامل الواجهة الخلفية غير مدعوم في بيئات طلب سحب Static Web Apps.

المتطلبات الأساسية

لربط مثيل إدارة واجهة برمجة التطبيقات بتطبيق الويب الثابت، تحتاج إلى مورد Azure API Management موجود وتطبيق ويب ثابت.

مورد ‏‏الوصف
إدارة واجهة برمجة تطبيقات Azure إذا لم يكن لديك واحد بالفعل، فاتبع الخطوات الواردة في دليل إنشاء مثيل خدمة Azure API Management جديد.
تطبيق ويب ثابت موجود إذا لم يكن لديك واحد بالفعل، فاتبع الخطوات الواردة في دليل البدء لإنشاء تطبيق ويب ثابت No Framework .

مثال

ضع في اعتبارك مثيل Azure API Management الموجود الذي يعرض نقطة نهاية عبر الموقع التالي.

https://my-api-management-instance.azure-api.net/api/getProducts

بمجرد الربط، يمكنك الوصول إلى نفس نقطة النهاية هذه من خلال api المسار من تطبيق الويب الثابت، كما هو موضح في عنوان URL هذا المثال.

https://red-sea-123.azurestaticapps.net/api/getProducts

يشير كلا عنواني URL إلى نفس نقطة نهاية واجهة برمجة التطبيقات. يجب أن تحتوي نقطة النهاية على مثيل APIM على البادئة /api ، نظرا لأن Static Web Apps تطابق الطلبات المقدمة إلى /api ووكلاء المسار بأكمله إلى المورد المرتبط.

لربط خدمة Azure API Management كواجهة خلفية لواجهة برمجة التطبيقات لتطبيق ويب ثابت، اتبع الخطوات التالية:

  1. في مدخل Microsoft Azure، انتقل إلى تطبيق الويب الثابت.

  2. حدد واجهات برمجة التطبيقات من قائمة التنقل.

  3. حدد موقع البيئة التي تريد ربط خدمة APIM بها. حدد ارتباط.

  4. في Backend resource type، حدد API Management.

  5. في Subscription، حدد الاشتراك الذي يحتوي على خدمة Azure API Management التي تريد ربطها.

  6. في Resource name، حدد خدمة Azure API Management.

  7. حدد ارتباط.

هام

عند اكتمال عملية الربط، يتم توصيل الطلبات إلى المسارات التي تبدأ بخدمة /api Azure API Management. ومع ذلك، لا يتم عرض واجهات برمجة التطبيقات بشكل افتراضي. راجع تكوين واجهات برمجة التطبيقات لتلقي طلبات تكوين منتج APIM للسماح بواجهات برمجة التطبيقات التي تريد استخدامها.

تكوين واجهات برمجة التطبيقات لتلقي الطلبات

تحتوي إدارة واجهة برمجة تطبيقات Azure على ميزة منتجات تحدد كيفية عرض واجهات برمجة التطبيقات. كجزء من عملية الربط، يتم تكوين خدمة APIM الخاصة بك بمنتج يسمى Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked).

لتوفير واجهات برمجة التطبيقات لتطبيق الويب الثابت المرتبط، أضفها إلى المنتج.

  1. ضمن مثيل API Management في المدخل، حدد علامة التبويب Products .

  2. Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked) حدد المنتج.

  3. حدد + Add API.

  4. حدد واجهات برمجة التطبيقات التي تريد عرضها من تطبيقات الويب الثابتة، ثم حدد الارتباط تحديد .

Screenshot of the API Management Products API blade in the Azure portal, showing how to add an API to the product created for the Static Web Apps resource.

تطبق عملية الربط أيضا التكوين التالي تلقائيا على خدمة APIM الخاصة بك:

  • تم تكوين المنتج المقترن بتطبيق الويب الثابت المرتبط لطلب اشتراك.
  • يتم إنشاء اشتراك API Management المسمى Generated for Static Web Apps resource with default hostname: <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> وتحديد نطاقه للمنتج بنفس الاسم.
  • تتم إضافة نهج validate-jwt وارد إلى المنتج للسماح فقط بالطلبات التي تحتوي على رمز وصول صالح من تطبيق الويب الثابت المرتبط.
  • تم تكوين تطبيق الويب الثابت المرتبط لتضمين المفتاح الأساسي للاشتراك ورمز وصول صالح عند طلبات الوكيل إلى خدمة APIM.

هام

يؤدي تغيير نهج validate-jwt أو إعادة إنشاء المفتاح الأساسي للاشتراك إلى منع تطبيق الويب الثابت من وكيل الطلبات إلى خدمة APIM. لا تقم بتعديل أو حذف الاشتراك أو المنتج المقترن بتطبيق الويب الثابت أثناء ربطهما.

لإلغاء ربط خدمة Azure API Management من تطبيق ويب ثابت، اتبع الخطوات التالية:

  1. في مدخل Microsoft Azure، انتقل إلى تطبيق الويب الثابت.

  2. حدد موقع البيئة التي تريد إلغاء ارتباطها وحدد اسم خدمة APIM.

  3. حدد إلغاء الارتباط.

عند اكتمال عملية إلغاء الارتباط، لم تعد الطلبات إلى المسارات التي تبدأ بها /api/ موصولة بخدمة APIM.

إشعار

لا يتم حذف منتج API Management والاشتراك المقترن بتطبيق الويب الثابت المرتبط تلقائيا. يمكنك حذفها من خدمة APIM.

استكشاف الأخطاء وإصلاحها

إذا لم تكن واجهات برمجة التطبيقات مقترنة بمنتج APIM الذي تم إنشاؤه لمورد Static Web Apps، فإن الوصول إلى /api مسار في تطبيق الويب الثابت الخاص بك يرجع الخطأ التالي من إدارة واجهة برمجة التطبيقات.

{
  "statusCode": 401,
  "message": "Access denied due to invalid subscription key. Make sure to provide a valid key for an active subscription."
}

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

الخطوات التالية

نظرة عامة على واجهة برمجة التطبيقات