حماية واجهات برمجة التطبيقات التي من دون خادم باستخدام Azure APIM وMicrosoft Azure Active Directory B2C للاستهلاك من SPA

2025-05-20

ينطبق على: جميع مستويات إدارة واجهة برمجة التطبيقات

هام

اعتبارا من 1 مايو 2025، لن يكون Azure AD B2C متوفرا للشراء للعملاء الجدد. تعرف على المزيد في الأسئلة المتداولة.

يوضح لك هذا السيناريو كيفية تكوين مثيل Azure *APIM لحماية API. نستخدم تدفق Azure AD B2C SPA (رمز المصادقة + PKCE) للحصول على رمز مميز، جنبا إلى جنب مع APIM لتأمين خلفية Azure Functions باستخدام EasyAuth.

للحصول على نظرة عامة تصورية حول تخويل واجهة برمجة التطبيقات، راجع المصادقة والتخويل لواجهات برمجة التطبيقات في APIM.

أهداف

سنرى كيف يمكن استخدام APIM في سيناريو مبسط مع وظائف Azure و Azure AD B2C. ستقوم بإنشاء تطبيق JavaScript (JS) يستدعي واجهة برمجة التطبيقات التي تسجل دخول المستخدمين باستخدام Azure AD B2C. بعد ذلك، ستستخدم ميزات سياسةAPIM (Validate-jwtو CORSو Rate Limit By Key لحماية واجهة برمجة تطبيقات Backend.

للدفاع المتعمق، نستخدم EasyAuth للتحقق من صحة الرمز المميز مرة أخرى داخل واجهة API الخلفية والتأكد من أن إدارة واجهة برمجة التطبيقات هي الخدمة الوحيدة التي يمكنها استدعاء الواجهة الخلفية لـ Azure Functions.

ماذا ستتعلم

إعداد تطبيق الصفحة الواحدة وواجهة برمجة التطبيقات الخلفية في Azure Active Directory B2C
إنشاء واجهة برمجة تطبيقات خلفية لوظائف Azure
استيراد واجهة برمجة تطبيقات Azure Functions إلى Azure APIM
تأمين واجهة برمجة التطبيقات فى Azure APIM
استدعاء نقاط نهاية تخويل Azure Active Directory B2C عبر مكتبات النظام الأساسي للهويات في Microsoft (MSAL.js)
تخزين تطبيق HTML / Vanilla JS أحادي الصفحة وتقديمه من نقطة نهاية تخزين Azure Blob

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

لاتباع الخطوات الواردة في هذه المقالة، يجب أن يكون لديك:

حساب تخزين خدمة Azure (StorageV2) للأغراض العامة V2 لاستضافة تطبيق JS Single Page للواجهة الأمامية.
مثيل Azure API Management (يعمل أي مستوى، بما في ذلك "الاستهلاك"، ومع ذلك لا تتوفر بعض الميزات القابلة للتطبيق على السيناريو الكامل في هذا المستوى (معدل الحد بالمفتاح وعنوان IP الظاهري المخصص)، يتم استدعاء هذه القيود أدناه في المقالة حيثما كان ذلك مناسبا).
تطبيق Azure Function فارغ (تشغيل وقت تشغيل V3.1.NET Core، على خطة استهلاك) لاستضافة ما يسمى واجهة برمجة التطبيقات
ارتباط مستأجر متاجرة عمل-مستهلك في Microsoft Azure Active Directory B2C باشتراك

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

نظرة عامة

فيما يلي رسم توضيحي للمكونات قيد الاستخدام والتدفق فيما بينها بمجرد اكتمال هذه العملية. المكونات قيد الاستخدام والتدفق

وفيما يلي نظرة عامة سريعة على الخطوات:

إنشاء Azure AD B2C Calling (APIM) وتطبيقات API مع النطاقات ومنح وصول API
أنشئ نُهج التسجيل وتسجيل الدخول للسماح للمستخدمين بتسجيل الدخول باستخدام Microsoft Azure Active Directory B2C
تكوين إدارة واجهة برمجة التطبيقات باستخدام معرّفات ومفاتيح عميل Azure AD B2C الجديدة لتمكين تخويل المستخدم OAuth2 في وحدة المطور
تحديث إصدار برمجة تطبيقات الدالة
تكوين واجهة برمجة تطبيقات الوظائف لتمكين EasyAuth باستخدام معرفات ومفاتيح عميل Azure AD B2C الجديدة وتأمين APIM VIP
تحويل تعريف واجهة برمجة التطبيقات APIM
إعداد OAuth2 لتكوين API Management API
إعداد نهج مشاركة الموارد عبر المصادر وإضافة نهج التحقق من صحة JWT. للتحقق من صحة الرمز المميز OAuth لكل طلب وارد
إنشاء تطبيق الاستدعاء لاستهلاك واجهة برمجة التطبيقات
قم بتحميل نموذج JS SPA
تكوين نموذج تطبيق عميل JS باستخدام معرفات ومفاتيح عميل Azure AD B2C الجديدة
اختبار تطبيق العميل

تلميح

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

معرف عميل الواجهة الخلفية B2C: المفتاح السري لعميل الواجهة الخلفية B2C: B2C BACKEND API SCOPE URI: B2C FRONTEND CLIENT ID: B2C USER FLOW ENDPOINT URI: B2C نقطة نهاية OPENID المعروفة جيدا: اسم نهج B2C: Frontendapp_signupandsignin عنوان URL للوظيفة: عنوان URL الأساسي لواجهة برمجة تطبيقات APIM: عنوان URL لنقطة النهاية الأساسية للتخزين:

تكوين تطبيق الواجهة الخلفية

افتح نافذة Azure AD B2C في المدخل ثم قم بالخطوات التالية.

تحديد علامة التبويب تسجيلات التطبيقات
حدد الزر "تسجيل جديد".
اختر "ويب" من مربع اختيار URI إعادة التوجيه.
الآن قم بتعيين اسم المعروض، واختر شيئًا فريدًا وملائمًا للخدمة التي يتم إنشاؤها. في هذا المثال، سنستخدم اسم "تطبيق الواجهة الخلفية".
استخدم العناصر النائبة لعناوين URL للرد، مثل 'https://jwt.ms' "(موقع فك تشفير الرمز المميز لشركة Microsoft)، وسنقوم بتحديث عناوين URL هذه لاحقًا.
تأكد من تحديد الخيار "الحسابات في أي موفر هوية أو دليل تنظيمي (لمصادقة المستخدمين بتدفقات المستخدم)"
بالنسبة إلى هذا النموذج ، قم بإلغاء تحديد مربع "منح موافقة المسؤول"، لأننا لن نطلب أذونات الوصول دون اتصال بالإنترنت اليوم.
حدد "Register".
سجّل معرّف عميل التطبيق الخلفي لاستخدامه لاحقًا (يظهر ضمن "معرّف التطبيق (العميل)").
حدد علامة التبويب Certificates and Secrets (ضمن Manage) ثم حدد "New Client Secret" لإنشاء مفتاح مصادقة (اقبل الإعدادات الافتراضية وحدد "Add").
عند النقر فوق "إضافة"، انسخ المفتاح (ضمن "القيمة") في مكان آمن لاستخدامه لاحقا ك "سر عميل الواجهة الخلفية" - لاحظ أن مربع الحوار هذا هو الفرصة الوحيدة التي سيتعين عليك نسخ هذا المفتاح.
حدد الآن علامة التبويب كشف API (تحت الإدارة).
ستتم مطالبتك بتعيين AppID URI، وتحديد القيمة الافتراضية وتسجيلها.
إنشاء وتسمية النطاق "Hello" لواجهة برمجة تطبيقات الوظائف الخاصة بك، يمكنك استخدام عبارة "Hello" لجميع الخيارات القابلة للإدخال، وتسجيل عنوان URI لقيمة النطاق الكامل المملوءة، ثم تحديد "إضافة نطاق".
ارجع إلى جذر شفرة Azure AD B2C بتحديد مسار التنقل "Azure AD B2C" في الجزء العلوي الأيسر من البوابة الإلكترونية.

إشعار

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

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

تحديد علامة التبويب تسجيلات التطبيقات
حدد الزر "تسجيل جديد".
اختر "تطبيق صفحة واحدة (SPA)" من مربع التحديد عنوان URI لإعادة التوجيه.
الآن قم بتعيين اسم العرض وAppID URI، واختر شيئاً فريداً وملائماً لتطبيق Frontend الذي سيستخدم تسجيل تطبيق Microsoft Azure Active Directory B2C هذا. في هذا المثال، يمكنك استخدام "تطبيق الواجهة الأمامية"
وفقًا لتسجيل التطبيق الأول، اترك تحديد أنواع الحسابات المدعومة على الوضع الافتراضي (مصادقة المستخدمين بتدفقات المستخدم)
استخدم العناصر النائبة لعناوين URL للرد، مثل 'https://jwt.ms' "(موقع فك تشفير الرمز المميز لشركة Microsoft)، وسنقوم بتحديث عناوين URL هذه لاحقًا.
اترك مربع الموافقة على المنحة محددًا
حدد "تسجيل".
سجّل معرف عميل تطبيق الواجهة الأمامية لاستخدامه لاحقًا (يظهر ضمن "معرف التطبيق (العميل)").
التبديل إلى علامة التبويب أذونات API.
امنح حق الوصول إلى تطبيق الواجهة الخلفية بالنقر فوق "إضافة إذن"، ثم "واجهات برمجة التطبيقات الخاصة بي"، وحدد "تطبيق الواجهة الخلفية"، وحدد "الأذونات"، وحدد النطاق الذي أنشأته في القسم السابق، وحدد "إضافة أذونات"
حدد "Grant admin consent for {tenant} وحدد "Yes" من مربع الحوار المنبثق. توافق هذه النافذة المنبثقة على "تطبيق الواجهة الأمامية" لاستخدام الإذن "مرحبًا" المحدد في "تطبيق الواجهة الخلفية" الذي تم إنشاؤه مسبقًا.
يجب أن تظهر جميع الأذونات الآن للتطبيق كعلامة خضراء أسفل عمود الحالة

ارجع إلى جذر شفرة B2C بتحديد مسار التنقل Azure AD B2C.
قم بالتبديل إلى علامة التبويب "تدفقات المستخدم" (ضمن السياسات).
حدد "تدفق مستخدم جديد"
اختر نوع تدفق المستخدم "Sign-up and Sign-in"، وحدد 'Recommended' ثم 'Create'
إعطاء النهج اسما وتسجيله في وقت لاحق. على سبيل المثال، يمكنك استخدام "Frontendapp_signupandsignin"، لاحظ أن هذا سيكون مسبوقا ب "B2C_1_" لجعل "B2C_1_Frontendapp_signupandsignin"
ضمن "موفرو الهوية" و"الحسابات المحلية"، تحقق من "تسجيل البريد الإلكتروني" (أو "تسجيل معرف المستخدم" اعتمادا على تكوين مستأجر B2C) وحدد موافق. يرجع هذا التكوين إلى أننا سنقوم بتسجيل حسابات B2C المحلية، وليس التأجيل لموفر هوية آخر (مثل مزود الهوية الاجتماعية) لاستخدام حساب الوسائط الاجتماعية الحالي للمستخدم.
اترك إعدادات مصادقة متعددة العوامل (MFA) والوصول الشرطي عند افتراضياتها.
ضمن "سمات المستخدم والمطالبات"، حدد "إظهار المزيد..." ثم اختر خيارات المطالبة التي تريد من المستخدمين إدخالها وإعادتها في الرمز المميز. تحقق على الأقل من "اسم العرض" و"عنوان البريد الإلكتروني" لتجميعهما، باستخدام "اسم العرض" و"عناوين البريد الإلكتروني" للعودة (انتبه جيدا إلى حقيقة أنك تجمع عنوان بريد إلكتروني، وفردي، وتطالب بإرجاع عناوين بريد إلكتروني متعددة)، وحدد "موافق"، ثم حدد "إنشاء".
حدد تدفق المستخدم الذي قمت بإنشائه في القائمة، ثم حدد الزر "Run user flow".
يفتح هذا الإجراء شفرة تشغيل تدفق المستخدم، وحدد تطبيق الواجهة الأمامية، وانسخ نقطة نهاية تدفق المستخدم واحفظها في وقت لاحق.
انسخ الرابط وقم بتخزينه في الأعلى، وقم بالتسجيل باعتباره "نقطة نهاية التكوين المفتوحة المعروفة" لاستخدامها لاحقًا.

إشعار

تسمح لك نُهج B2C بعرض نقاط نهاية تسجيل الدخول إلى Azure AD B2C لتتمكن من التقاط مكونات بيانات مختلفة وتسجيل دخول المستخدمين بطرق مختلفة.

في هذه الحالة، قمنا بتكوين اشتراك أو تدفق تسجيل الدخول (نهج). كشف هذا أيضا نقطة نهاية تكوين معروفة، في كلتا الحالتين تم تعريف نهجنا المنشأ في عنوان URL بواسطة معلمة سلسلة الاستعلام "p=".

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

تحديث إصدار واجهة برمجة تطبيقات الدالة

قم بالتبديل مرة أخرى إلى مستأجر Microsoft Entra القياسي في مدخل Microsoft Azure حتى نتمكن من تكوين العناصر في اشتراكك مرة أخرى.
انتقل إلى جزء Function Apps في مدخل Microsoft Azure، وافتح تطبيق الوظائف الفارغ، ثم حدد "Functions"، وحدد "Add".
في القائمة المنبثقة التي تظهر، اختر "تطوير في المدخل"، ضمن "تحديد قالب"، ثم اختر "مشغل HTTP"، ضمن تفاصيل القالب قم بتسمية "مرحبا" بمستوى التخويل "دالة"، ثم حدد إضافة.
التبديل إلى التعليمات البرمجية + اختبار النصل ونسخ لصق نموذج التعليمات البرمجية من أسفل عبر التعليمات البرمجية الموجودة التي تظهر.

حدد حفظ.


using System.Net;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Primitives;

public static async Task<IActionResult> Run(HttpRequest req, ILogger log)
{
   log.LogInformation("C# HTTP trigger function processed a request.");

   return (ActionResult)new OkObjectResult($"Hello World, time and date are {DateTime.Now.ToString()}");
}

تلميح

تقوم شفرة وظيفة البرنامج النصي C# التي قمت بلصقها للتو بتسجيل سطر في سجلات الوظائف، وإرجاع النص "مرحبًا بالعالم" مع بعض البيانات الديناميكية (التاريخ والوقت).

حدد "Integration" من الجزء الأيسر، ثم حدد رابط http (req) داخل مربع "Trigger".
من القائمة المنسدلة "Selected HTTP methods"، قم بإلغاء تحديد أسلوب http POST، وترك GET فقط محددا، ثم حدد Save.
قم بالتبديل مرة أخرى إلى علامة التبويب Code + Test، وحدد "Get Function URL"، ثم انسخ عنوان URL الذي يظهر واحفظه لاحقا.

إشعار

الارتباطات التي قمت بإنشائها للتو ببساطة نقول وظائف للرد على طلبات مجهولة HTTP GET إلى عنوان الموقع الذي نسخ للتو ( https://yourfunctionappname.azurewebsites.net/api/hello?code=secretkey ). الآن لدينا واجهة برمجة تطبيقات https بلا خادم قابلة للتطوير قادرة على إرجاع حمولة بسيطة.

يمكنك الآن اختبار استدعاء واجهة برمجة التطبيقات هذه من مستعرض ويب باستخدام نسختك من عنوان URL أعلاه الذي نسخته وحفظته للتو. يمكنك أيضا إزالة جزء معلمات سلسلة الاستعلام "?code=secretkey" من عنوان URL، والاختبار مرة أخرى، لإثبات أن Azure Functions سترجع خطأ 401.

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

هناك منطقتان إضافيتان في تطبيق الوظائف تحتاجان إلى تكوين (قيود التخويل والشبكة).
أولاً، لنقم بتكوين المصادقة / التفويض، لذا انتقل مرة أخرى إلى شفرة الجذر لتطبيق الوظيفة عبر مسار التنقل.
بعد ذلك، حدد "Authentication" (ضمن "Settings").
حدد "إضافة موفر الهوية"
من القائمة المنسدلة Identity Provider، حدد 'Microsoft'
مع App Registration حدد 'Provide the details of an existing app registration'
الصق معرّف عميل تطبيق الواجهة الخلفية (من Microsoft Azure Active Directory B2C) في مربع ‘Application (client) ID’ (سجلنا هذا التكوين سابقاً).
الصق نقطة نهاية تكوين معرف مفتوح معروف من نهج التسجيل وتسجيل الدخول في مربع عنوان URL للمُصدر (سجلنا هذا التكوين سابقاً).
الصق سر عميل تطبيق Backend في المربع المناسب (سجلنا هذا التكوين سابقاً).
في 'Unauthenticated requests' حدد 'HTTP 401 Unauthorized: recommended for APIs'
اترك Token Store ممكّناً (افتراضياً).
حدد "Save" (في الجزء العلوي الأيسر من الجزء).

هام

الآن يتم نشر Function API الخاص بك ويجب أن تطرح 401 استجابة إذا لم يتم توفير JWT الصحيح كعنوان التخويل: Bearer، ويجب أن ترجع البيانات عند تقديم طلب صالح. لقد أضفت أمانا إضافيا دفاعيا متعمقا في EasyAuth عن طريق تكوين خيار "تسجيل الدخول باستخدام معرف Microsoft Entra" لمعالجة الطلبات غير المصادق عليها.

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

إذا كنت تستخدم مستويات API Management Consumption وBasic v2 وStandard v2 وPremium v2، فلا يوجد عنوان IP ظاهري مخصص لإدارة واجهة برمجة تطبيقات Azure لقائمة السماح مع قيود الوصول إلى الوظائف. في مستويات Azure API Management الكلاسيكية (المخصصة) يكون VIP مستأجرا واحدا ومدة بقاء المورد. بالنسبة للمستويات التي تعمل على البنية الأساسية المشتركة، يمكنك تأمين استدعاءات واجهة برمجة التطبيقات الخاصة بك عبر مفتاح الدالة السرية المشتركة في جزء URI الذي نسخته أعلاه. أيضا، بالنسبة لهذه المستويات - لا تنطبق الخطوات من 12 إلى 17 أدناه.
أغلق جزء "المصادقة" من بوابة App Service/Functions.
افتحشفرة APIM للنافذة، ثم افتحالمثيل الخاص بك.
سجل VIP الخاص الظاهر في علامة تبويب النظرة العامة.
العودة إلى شفرة وظائف نافذة Azure من المدخل ثم فتح المثيل الخاص بك مرة أخرى.
حدد 'الشبكات' ثم حدد 'تكوين قيود الوصول'
حدد "إضافة قاعدة"، وأدخل VIP المنسخ في الخطوة 3 أعلاه بالتنسيق xx.xx.xx.xx/32.
إذا كنت ترغب في الاستمرار في التفاعل مع مدخل الوظائف، وتنفيذ الخطوات الاختيارية أدناه، يجب إضافة عنوان IP العام الخاص بك أو نطاق CIDR هنا أيضا.
بمجرد وجود إدخال مسموح به في القائمة، يضيف Azure قاعدة رفض ضمنية لحظر جميع العناوين الأخرى.

تحتاج إلى إضافة كتل منسقة من العناوين CIDR إلى لوحة قيود IP. عندما تحتاج إلى إضافة عنوان واحد مثل APIM VIP، فأنت بحاجة إلى إضافته بالتنسيق xx.xx.xx.xx / 32.

إشعار

الآن يجب ألا تكون واجهة برمجة تطبيقات الوظائف قابلة للاستدعاء من أي مكان آخر غير إدارة واجهة برمجة التطبيقات أو عنوانك.

افتح APIM للنافذة، ثم افتح المثيل الخاص بك.
حدد شفرة واجهات برمجة التطبيقات (ضمن واجهات برمجة التطبيقات).
من الجزء "إضافة واجهة برمجة تطبيقات جديدة"، اختر "تطبيق الوظائف"، ثم حدد "كامل" من أعلى النافذة المنبثقة.
انقر فوق استعراض، واختر تطبيق الوظائف الذي تستضيف واجهة برمجة التطبيقات بداخله، وانقر على تحديد. بعد ذلك، انقر فوق تحديد مرة أخرى.
امنح API اسمًا ووصفًا للاستخدام الداخليAPIM وأضفه إلى المنتج "غير المحدود".
انسخ "عنوان URL الأساسي" لواجهة برمجة التطبيقات وسجله وحدد "إنشاء".
حدد علامة التبويب "settings"، ثم ضمن subscription - قم بإيقاف تشغيل خانة الاختيار "Subscription Required" حيث سنستخدم OAuth JWT في هذه الحالة لتحديد المعدل. لاحظ أنه إذا كنت تستخدم مستوى الاستهلاك، فسيظل هذا مطلوبا في بيئة الإنتاج.

تلميح

إذا كنت تستخدم مستوى الاستهلاك من APIM، فلن يكون المنتج غير المحدود متاحًا كخارج الصندوق. بدلا من ذلك، انتقل إلى "المنتجات" ضمن "واجهات برمجة التطبيقات" واضغط على "إضافة". اكتب "Unlimited" كاسم المنتج ووصفه وحدد واجهة برمجة التطبيقات التي أضفتها للتو من وسيلة شرح واجهات برمجة التطبيقات "+" في أسفل يسار الشاشة. حدد خانة الاختيار "تم النشر". اترك الباقي افتراضيًا. وأخيرا، اضغط على زر "إنشاء". أدى هذا إلى إنشاء منتج "غير محدود" وتخصيصه لواجهة برمجة التطبيقات الخاصة بك. يمكنك تخصيص منتجك الجديد لاحقًا.

تكوين إعدادات نقطة نهاية التخزين الصحيحة والتقاطها

فتح شفرة حسابات التخزين في مدخل Microsoft Azure
حدد الحساب الذي قمت بإنشائه وحدد شفرة "موقع الويب الثابت" من قسم الإعدادات (إذا كنت لا ترى خيار "موقع الويب الثابت" ، فتحقق من أنك قمت بإنشاء حساب V2).
قم بتعيين ميزة استضافة الويب الثابتة إلى "ممكن"، ثم قم بتعيين اسم مستند الفهرس إلى "index.html"، ثم حدد "حفظ".
قم بتدوين محتويات "نقطة النهاية الأساسية" في وقت لاحق، حيث أن هذا الموقع هو المكان الذي سيتم فيه استضافة موقع الواجهة الأمامية.

تلميح

يمكنك استخدام إعادة كتابة Azure Blob Storage + CDN أو Azure App Service لاستضافة SPA - لكن ميزة استضافة موقع الويب الثابت في Blob Storage تمنحنا حاوية افتراضية لخدمة محتوى الويب الثابت / html / js / css من Azure Storage وستستنتج الصفحة الافتراضية بالنسبة لنا لصفر العمل.

إعداد نهج CORSوالتحقق من صحة jwt

يجب اتباع المقاطع التالية بغض النظر عن مستوى APIM المستخدمة. عنوان URL لحساب التخزين مأخوذ من حساب التخزين الذي ستوفره من المتطلبات الأساسية في الجزء العلوي من هذه المقالة.

قم بالتبديل إلى شفرة إدارة واجهة برمجة التطبيقات للمدخل وافتح المثيل الخاص بك.
حدد واجهات برمجة التطبيقات، ثم حدد "جميع واجهات برمجة التطبيقات".
ضمن "Inbound processing"، حدد زر عرض التعليمات البرمجية "</>" لإظهار محرر النهج.
تحرير المقطع الوارد ولصق xml أدناه بحيث يقرأ مثل ما يلي.
استبدال المعلمات التالية في النهج
{PrimaryStorageEndpoint} ("نقطة نهاية التخزين الأساسية" التي نسختها في القسم السابق)، {b2cpolicy-well-known-openid} ("نقطة نهاية تكوين openid المعروفة" التي نسختها سابقًا) و {backend-api-application-client -id} (تطبيق B2C / معرّف العميل لواجهة برمجة التطبيقات الخلفية) مع القيم الصحيحة المحفوظة مسبقًا.
إذا كنت تستخدم طبقة الاستهلاك لإدارة واجهة برمجة التطبيقات، فيجب عليك إزالة كل من نهج الحد من المعدل حسب المفتاح لأن هذا النهج غير متوفر عند استخدام طبقة الاستهلاك لإدارة واجهة برمجة تطبيقات Azure.
```
<inbound>
   <cors allow-credentials="true">
         <allowed-origins>
             <origin>{PrimaryStorageEndpoint}</origin>
         </allowed-origins>
         <allowed-methods preflight-result-max-age="120">
             <method>GET</method>
         </allowed-methods>
         <allowed-headers>
             <header>*</header>
         </allowed-headers>
         <expose-headers>
             <header>*</header>
         </expose-headers>
     </cors>
   <validate-jwt header-name="Authorization" failed-validation-httpcode="401" failed-validation-error-message="Unauthorized. Access token is missing or invalid." require-expiration-time="true" require-signed-tokens="true" clock-skew="300">
      <openid-config url="{b2cpolicy-well-known-openid}" />
      <required-claims>
         <claim name="aud">
            <value>{backend-api-application-client-id}</value>
         </claim>
      </required-claims>
   </validate-jwt>
   <rate-limit-by-key calls="300" renewal-period="120" counter-key="@(context.Request.IpAddress)" />
   <rate-limit-by-key calls="15" renewal-period="60" counter-key="@(context.Request.Headers.GetValueOrDefault("Authorization","").AsJwt()?.Subject)" />
</inbound>
```
إشعار

الآن أصبحت إدارة واجهة برمجة تطبيقات Azure قادرة على الاستجابة لطلبات الأصل المتقاطعة من تطبيقات JavaScript SPA الخاصة بك، وسوف تقوم بالتقييد وتحديد المعدل والتقدير المسبق للرمز المميز لمصادقة JWT الذي يتم تمريره قبل إعادة توجيه الطلب إلى Function API.

تهانينا، لديك الآن Azure AD B2C وإدارة واجهة برمجة التطبيقات ووظائف Azure تعمل معا لنشر واجهة برمجة تطبيقات وتأمينها واستهلاكها!

تلميح

إذا كنت تستخدم طبقة استهلاك APIM، فبدلا من تحديد المعدل بواسطة موضوع JWT أو عنوان IP الوارد (لا يتم دعم الحد من معدل الاستدعاء بواسطة النهج الرئيسي اليوم لطبقة "الاستهلاك")، يمكنك الحد حسب الحصة النسبية لمعدل المكالمة انظر هنا. نظرًا لأن هذا المثال هو تطبيق JavaScript ذو صفحة واحدة، فإننا نستخدم مفتاح إدارة واجهة برمجة التطبيقات (API) فقط لتقييد المعدل ومكالمات الفوترة. تتم معالجة التفويض والمصادقة الفعلي بواسطة Azure AD B2C ، ويتم تغليفها في JWT، والتي يتم التحقق من صحتها مرتين، مرة واحدة بواسطة إدارة APIM، ثم بواسطة وظيفة Azure الخلفية.

قم بتحميل نموذج JavaScript SPA إلى مساحة تخزين ثابتة

لا يزال في جزء حساب التخزين، حدد شفرة "Containers" من قسم Blob Service وحدد حاوية $web التي تظهر في الجزء الأيمن.

احفظ التعليمات البرمجية أدناه إلى ملف محلي على جهازك كما index.html ثم قم بتحميل الملف index.html إلى حاوية $web.

 <!doctype html>
 <html lang="en">
 <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
      <script type="text/javascript" src="https://alcdn.msauth.net/browser/2.11.1/js/msal-browser.min.js"></script>
 </head>
 <body>
      <div class="container-fluid">
          <div class="row">
              <div class="col-md-12">
                 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                     <div class="container-fluid">
                         <a class="navbar-brand" href="#">Azure Active Directory B2C with Azure API Management</a>
                         <div class="navbar-nav">
                             <button class="btn btn-success" id="signinbtn"  onClick="login()">Sign In</a>
                         </div>
                     </div>
                 </nav>
              </div>
          </div>
          <div class="row">
              <div class="col-md-12">
                  <div class="card" >
                     <div id="cardheader" class="card-header">
                         <div class="card-text"id="message">Please sign in to continue</div>
                     </div>
                     <div class="card-body">
                         <button class="btn btn-warning" id="callapibtn" onClick="getAPIData()">Call API</a>
                         <div id="progress" class="spinner-border" role="status">
                             <span class="visually-hidden">Loading...</span>
                         </div>
                     </div>
                  </div>
              </div>
          </div>
      </div>
      <script lang="javascript">
             // Just change the values in this config object ONLY.
             var config = {
                 msal: {
                     auth: {
                         clientId: "{CLIENTID}", // This is the client ID of your FRONTEND application that you registered with the SPA type in Azure Active Directory B2C
                         authority:  "{YOURAUTHORITYB2C}", // Formatted as https://{b2ctenantname}.b2clogin.com/tfp/{b2ctenantguid or full tenant name including onmicrosoft.com}/{signuporinpolicyname}
                         redirectUri: "{StoragePrimaryEndpoint}", // The storage hosting address of the SPA, a web-enabled v2 storage account - recorded earlier as the Primary Endpoint.
                         knownAuthorities: ["{B2CTENANTDOMAIN}"] // {b2ctenantname}.b2clogin.com
                     },
                     cache: {
                         cacheLocation: "sessionStorage",
                         storeAuthStateInCookie: false
                     }
                 },
                 api: {
                     scopes: ["{BACKENDAPISCOPE}"], // The scope that we request for the API from B2C, this should be the backend API scope, with the full URI.
                     backend: "{APIBASEURL}/hello" // The location that we'll call for the backend api, this should be hosted in API Management, suffixed with the name of the API operation (in the sample this is '/hello').
                 }
             }
             document.getElementById("callapibtn").hidden = true;
             document.getElementById("progress").hidden = true;
             const myMSALObj = new msal.PublicClientApplication(config.msal);
             myMSALObj.handleRedirectPromise().then((tokenResponse) => {
                 if(tokenResponse !== null){
                     console.log(tokenResponse.account);
                     document.getElementById("message").innerHTML = "Welcome, " + tokenResponse.account.name;
                     document.getElementById("signinbtn").hidden = true;
                     document.getElementById("callapibtn").hidden = false;
                 }}).catch((error) => {console.log("Error Signing in:" + error);
             });
             function login() {
                 try {
                     myMSALObj.loginRedirect({scopes: config.api.scopes});
                 } catch (err) {console.log(err);}
             }
             function getAPIData() {
                 document.getElementById("progress").hidden = false;
                 document.getElementById("message").innerHTML = "Calling backend ... "
                 document.getElementById("cardheader").classList.remove('bg-success','bg-warning','bg-danger');
                 myMSALObj.acquireTokenSilent({scopes: config.api.scopes, account: getAccount()}).then(tokenResponse => {
                     const headers = new Headers();
                     headers.append("Authorization", `Bearer ${tokenResponse.accessToken}`);
                     fetch(config.api.backend, {method: "GET", headers: headers})
                         .then(async (response)  => {
                             if (!response.ok)
                             {
                                 document.getElementById("message").innerHTML = "Error: " + response.status + " " + JSON.parse(await response.text()).message;
                                 document.getElementById("cardheader").classList.add('bg-warning');
                             }
                             else
                             {
                                 document.getElementById("cardheader").classList.add('bg-success');
                                 document.getElementById("message").innerHTML = await response.text();
                             }
                             }).catch(async (error) => {
                                 document.getElementById("cardheader").classList.add('bg-danger');
                                 document.getElementById("message").innerHTML = "Error: " + error;
                             });
                 }).catch(error => {console.log("Error Acquiring Token Silently: " + error);
                     return myMSALObj.acquireTokenRedirect({scopes: config.api.scopes, forceRefresh: false})
                 });
                 document.getElementById("progress").hidden = true;
          }
         function getAccount() {
             var accounts = myMSALObj.getAllAccounts();
             if (!accounts || accounts.length === 0) {
                 return null;
             } else {
                 return accounts[0];
             }
         }
     </script>
  </body>
 </html>

استعرض للوصول إلى نقطة النهاية الأساسية لموقع ويب الثابتة التي قمت بتخزينها سابقا في المقطع الأخير.

إشعار

تهانينا، لقد قمت للتو بنشر تطبيق صفحة واحدة JavaScript لاستضافة محتوى Azure Storage Static. نظرًا لأننا لم نقم بتكوين تطبيق JS بتفاصيل Azure AD B2C حتى الآن - فلن تعمل الصفحة بعد إذا فتحتها.

تكوين JAVAScript SPA ل Azure AD B2C

الآن نحن نعرف أين كل شيء: يمكننا تكوين SPA مع عنوان API APIM المناسب والتطبيق Azure AD B2C الصحيح / معرفات العميل.
ارجع إلى موقع تخزين نافذة Azure
حدد "الحاويات" (ضمن "الإعدادات")
حدد حاوية "$ web" من القائمة
حدد index.html blob من القائمة
حدد "تحرير"
قم بتحديث قيم المصادقة في قسم تكوين MSAL لمطابقة تطبيق الواجهة الأمامية الذي سجلته في B2C سابقا. استخدم تعليقات التعليمات البرمجية للحصول على تلميحات حول الشكل الذي يجب أن تبدو عليه قيم التكوين. يجب أن تكون قيمة المؤلف بالتنسيق: - https: // {b2ctenantname} .b2clogin.com / tfp / {b2ctenantname} .onmicrosoft.com} / {signupandsigninpolicyname}، إذا كنت قد استخدمت أسماء العينات ومستأجر b2c الخاص بك تسمى 'contoso' ، ثم تتوقع أن تكون السلطة '' 'https://contoso.b2clogin.com/tfp/contoso.onmicrosoft.com/Frontendapp_signupandsignin'.
قم بتعيين قيم واجهة برمجة التطبيقات لمطابقة عنوان الواجهة الخلفية (عنوان URL الأساسي لواجهة برمجة التطبيقات الذي سجلته سابقا، وتم تسجيل قيم "b2cScopes" مسبقا لتطبيق الخلفية).
حدد حفظ

تعيين عناوين URL لإعادة التوجيه لتطبيق واجهة Azure AD B2C الأمامية

افتح الشفرة Azure AD B2C وانتقل إلى تسجيل التطبيق لتطبيق JavaScript Frontend.
حدد "Redirect URIs" واحذف العنصر النائب "https://jwt.ms" الذي أدخلناه سابقا.
أضف عنوان URI جديدًا لنقطة النهاية الأساسية (التخزين) (مطروحًا منه الشرطة المائلة للأمام).

إشعار

سينتج عن هذا التكوين أن يتلقى عميل تطبيق الواجهة الأمامية رمز وصول مع مطالبات مناسبة من Azure AD B2C. سيتمكن SPA من إضافة هذا كرمز لحامله في رأس https في الاستدعاء لواجهة API الخلفية.

ستتحقق APIM مسبقًا من صحة الرمز المميز واستدعاءات حد المعدل إلى نقطة النهاية من خلال كل من موضوع JWT الصادر عن معرف Azure (المستخدم) وعنوان IP للمتصل (اعتمادًا على طبقة خدمة إدارة واجهة برمجة التطبيقات، راجع ملاحظة أعلاه) ، قبل تمرير الطلب إلى واجهة برمجة تطبيقات Azure Function المتلقية ، قم بإضافة مفتاح أمان الوظائف. سيقوم SPA بتقديم الاستجابة في المستعرض.

تهانينا، لقد قمت بتكوين Azure AD B2C، وإدارة Azure API ، ووظائف Azure، وتفويض خدمة تطبيق Azure للعمل في تناغم تام!

الآن لدينا تطبيق بسيط بواجهة برمجة تطبيقات آمنة بسيطة، فلنختبره.

اختبار تطبيق العميل

افتح نموذج محدد مواقع ويب للتطبيق الذي سجلته من حساب التخزين الذي أنشأته مسبقًا.
حدد "تسجيل الدخول" في الزاوية العلوية اليسرى، وسينبثق هذا الإجراء من ملف تعريف تسجيل أو تسجيل الدخول إلى Azure AD B2C.
يجب أن يرحب بك التطبيق باسم ملف تعريف B2C الخاص بك.
الآن حدد "Call API" ويجب تحديث الصفحة بالقيم المرسلة مرة أخرى من واجهة برمجة التطبيقات الآمنة.
إذا قمت بتحديد زر Call API بشكل متكرر وكنت تعمل في طبقة المطور أو أعلى من APIM، يجب أن تلاحظ أن الحل الخاص بك سيبدأ في تصنيف الحد من واجهة برمجة التطبيقات ويجب الإبلاغ عن هذه الميزة في التطبيق برسالة مناسبة.

وقد انتهينا

يمكن تعديل الخطوات المذكورة أعلاه وتحريرها للسماح بالعديد من الاستخدامات المختلفة لـ Azure AD B2C معAPIM.

تعرف على المزيد حول معرف Microsoft Entra وOAuth2.0.
اطلع على مزيد من المعلومات حول APIM.
للحصول على طرق أخرى لتأمين الخدمة الخلفية، راجعمصادقة الشهادة المتبادلة.
قم بإنشاء مثيل خدمة APIM.
إدارة API الأول الخاص بك.