مشاركة عبر

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

  • مقالة

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

توفر Azure App Service خدمة استضافة ويب قابلة للتطوير بدرجة كبيرة وذاتية التصحيح باستخدام نظام التشغيل Linux. بالإضافة إلى ذلك، خدمة التطبيقات لديها دعم مضمن لمصادقة المستخدم والتفويض. يوضح هذا البرنامج التعليمي كيفية تأمين التطبيقات باستخدام مصادقة وتفويض خدمة التطبيقات. ويستخدم Express.js مع طرق العرض. مصادقة خدمة التطبيق ودعم تفويض جميع أوقات تشغيل اللغة، ويمكنك معرفة كيفية تطبيقه على اللغة المفضلة لديك باتباع البرنامج التعليمي.

في البرنامج التعليمي، ستتعلم:

  • تمكين المصادقة والتفويض المضمنين
  • تأمين التطبيقات ضد الطلبات غير المصادقة
  • استخدام معرف Microsoft Entra كموفر هوية
  • الوصول إلى تطبيق بعيد نيابة عن المستخدم الذي قام بتسجيل الدخول
  • مكالمات آمنة من خدمة إلى خدمة مع مصادقة الرمز المميز
  • استخدام رموز الوصول المميزة من رمز الخادم

تلميح

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

يتم توفير المصادقة في هذا الإجراء في طبقة النظام الأساسي للاستضافة بواسطة Azure App Service. يجب نشر تطبيق الواجهة الأمامية والخلفية وتكوين المصادقة لتطبيق الويب هذا لاستخدامه بنجاح.

يوضح الرسم التخطيطي المفاهيمي تدفق المصادقة من مستخدم الويب إلى تطبيق الواجهة الأمامية إلى تطبيق الواجهة الخلفية.

الحصول على ملف تعريف المستخدم

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

قبل تنفيذ التعليمات البرمجية المصدر على الواجهة الأمامية، تقوم App Service بإدخال المصادق عليه accessToken من عنوان App Service x-ms-token-aad-access-token . ثم تقوم التعليمات البرمجية المصدر للواجهة الأمامية بالوصول إلى accessToken وإرساله إلى الخادم الخلفي ك bearerToken للوصول بأمان إلى واجهة برمجة التطبيقات الخلفية. يتحقق الخادم الخلفي من صحة bearerToken قبل تمريره إلى التعليمات البرمجية المصدر الخلفية. بمجرد أن تتلقى التعليمات البرمجية المصدر للواجهة الخلفية الرمز المميز للحامل، يمكن استخدامها.

في المقالة التالية في هذه السلسلة، يتم استبدال bearerToken برمز مميز مع نطاق للوصول إلى واجهة برمجة تطبيقات Microsoft Graph. تقوم واجهة برمجة تطبيقات Microsoft Graph بإرجاع معلومات ملف تعريف المستخدم.

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

إذا لم يكن لديك اشتراك في Azure، فأنشئ حساب Azure مجاني قبل أن تبدأ.

1. استنساخ نموذج التطبيق

  1. في Azure Cloud Shell، قم بتشغيل الأمر التالي لاستنساخ مستودع العينة.

    git clone https://github.com/Azure-Samples/js-e2e-web-app-easy-auth-app-to-app

2. إنشاء التطبيقات ونشرها

قم بإنشاء مجموعة الموارد وخطة تطبيق الويب وتطبيق الويب ونشرها في خطوة واحدة.

  1. قم بالتغيير إلى دليل تطبيق الويب الأمامي.

    cd js-e2e-web-app-easy-auth-app-to-app/frontend

  2. إنشاء تطبيق الويب الأمامي ونشره باستخدام az webapp لأعلى. نظرا لأن اسم تطبيق الويب يجب أن يكون فريدا عالميا، استبدل <front-end-app-name> باسم فريد.

    az webapp up --resource-group myAuthResourceGroup --name <front-end-app-name> --plan myPlan --sku FREE --os-type Windows --location "West Europe" --runtime "NODE:16LTS"

  3. قم بالتغيير إلى دليل تطبيق الويب الخلفي.

    cd ../backend

  4. نشر تطبيق الويب الخلفي إلى نفس مجموعة الموارد وخطة التطبيق. نظرا لأن اسم تطبيق الويب يجب أن يكون فريدا عالميا، استبدل <back-end-app-name> بمجموعة فريدة من الأحرف الأولى أو الأرقام.

    az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name> --plan myPlan --os-type Windows --location "West Europe" --runtime "NODE:16LTS"

  1. قم بالتغيير إلى دليل تطبيق الويب الأمامي.

    cd frontend

  2. إنشاء تطبيق الويب الأمامي ونشره باستخدام az webapp لأعلى. نظرا لأن اسم تطبيق الويب يجب أن يكون فريدا عالميا، استبدل <front-end-app-name> بمجموعة فريدة من الأحرف الأولى أو الأرقام.

    az webapp up --resource-group myAuthResourceGroup --name <front-end-app-name> --plan myPlan --sku FREE --location "West Europe" --os-type Linux --runtime "NODE:16-lts"

  3. قم بالتغيير إلى دليل تطبيق الويب الخلفي.

    cd ../backend

  4. نشر تطبيق الويب الخلفي إلى نفس مجموعة الموارد وخطة التطبيق. نظرا لأن اسم تطبيق الويب يجب أن يكون فريدا عالميا، استبدل <back-end-app-name> بمجموعة فريدة من الأحرف الأولى أو الأرقام.

    az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name> --plan myPlan --sku FREE --location "West Europe" --runtime "NODE:16-lts"

3. تكوين إعداد التطبيق

يحتاج تطبيق الواجهة الأمامية إلى معرفة عنوان URL لتطبيق الواجهة الخلفية لطلبات واجهة برمجة التطبيقات. استخدم أمر Azure CLI التالي لتكوين إعداد التطبيق. يجب أن يكون عنوان URL بتنسيق https://<back-end-app-name>.azurewebsites.net.

az webapp config appsettings set --resource-group myAuthResourceGroup --name <front-end-app-name> --settings BACKEND_URL="https://<back-end-app-name>.azurewebsites.net"

4. الواجهة الأمامية تستدعي الخلفية

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

  1. افتح تطبيق الويب الأمامي في مستعرض، https://<front-end-app-name>.azurewebsites.net.

    لقطة شاشة لمستعرض الويب تعرض تطبيق الواجهة الأمامية بعد إكمال المصادقة بنجاح.

  2. حدد ارتباط Get user's profile.

  3. عرض ملف التعريف المزيف الذي تم إرجاعه من تطبيق الويب الخلفي.

    لقطة شاشة للمستعرض مع ملف تعريف مزيف تم إرجاعه من الخادم.

    withAuthentication تشير قيمة false إلى أن المصادقة لم يتم إعدادها بعد.

5. تكوين المصادقة

في هذه الخطوة، يمكنك تمكين المصادقة والتخويل لتطبيقي الويب. يستخدم هذا البرنامج التعليمي معرف Microsoft Entra كموفر الهوية.

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

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

لمزيد من المعلومات، راجع تكوين مصادقة Microsoft Entra لتطبيق App Services.

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

  1. في قائمة Azure portal، حدد مجموعات الموارد ، أو ابحث عنها وحدد مجموعات الموارد من أي صفحة.

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

  3. في القائمة اليسرى لتطبيق الواجهة الخلفية، حدد Authentication، ثم حدد Add identity provider.

  4. في صفحة إضافة موفر هوية، حدد Microsoft كموفر الهوية لتسجيل الدخول إلى هويات Microsoft وMicrosoft Entra.

  5. اقبل الإعدادات الافتراضية وحدد إضافة.

    لقطة شاشة للقائمة اليسرى لتطبيق الواجهة الخلفية تعرض المصادقة/التخويل المحدد والإعدادات المحددة في القائمة اليمنى.

  6. تفتح صفحة المُصادقة. انسخ معرف العميل لتطبيق Microsoft Entra إلى مفكرة. تحتاج هذه القيمة لاحقًا.

    لقطة شاشة لنافذة إعدادات Microsoft Entra تعرض تطبيق Microsoft Entra، ونافذة تطبيقات Microsoft Entra التي تعرض معرف العميل للنسخ.

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

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

  1. في قائمة Azure portal، حدد مجموعات الموارد ، أو ابحث عنها وحدد مجموعات الموارد من أي صفحة.

  2. في مجموعات الموارد، ابحث عن مجموعة الموارد وحددها. في نظرة عامة، حدد صفحة إدارة تطبيق الواجهة الأمامية.

  3. في القائمة اليسرى لتطبيق الواجهة الأمامية، حدد Authentication، ثم حدد Add identity provider.

  4. في صفحة إضافة موفر هوية، حدد Microsoft كموفر الهوية لتسجيل الدخول إلى هويات Microsoft وMicrosoft Entra.

  5. اقبل الإعدادات الافتراضية وحدد إضافة.

  6. تفتح صفحة المُصادقة. انسخ معرف العميل لتطبيق Microsoft Entra إلى مفكرة. تحتاج هذه القيمة لاحقًا.

منح تطبيق الواجهة الأمامية حق الوصول إلى الخلفية

الآن بعد أن قمت بتمكين المصادقة والتفويض لكلا التطبيقين، يتم دعم كل منهما بواسطة تطبيق AD. لإكمال المصادقة، تحتاج إلى القيام بثلاثة أشياء:

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

تلميح

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

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

  1. في صفحة المصادقة لتطبيق الواجهة الأمامية، حدد اسم تطبيق الواجهة الأمامية ضمن موفر الهوية. تم إنشاء تسجيل التطبيق هذا تلقائياً لك. حدد API permissions في القائمة اليسرى.

  2. حدد إضافة إذن، ثم حدد My APIs><back-end-app-name>.

  3. في صفحة طلب أذونات واجهة برمجة التطبيقات لتطبيق الواجهة الخلفية، حدد الأذونات المفوضة user_impersonation، ثم حدد إضافة أذونات.

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

تكوين خدمة التطبيقات لإرجاع رمز مميز للوصول قابل للاستخدام

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

في Cloud Shell، قم بتشغيل الأوامر التالية على تطبيق الواجهة الأمامية لإضافة المعلمة scope إلى إعداد identityProviders.azureActiveDirectory.login.loginParametersالمصادقة . استبدل <front-end-app-name> و <back-end-client-id>.

az extension add --name authV2
authSettings=$(az webapp auth show -g myAuthResourceGroup -n <front-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.login += {"loginParameters":["scope=openid offline_access api://<back-end-client-id>/user_impersonation"]}')
az webapp auth set --resource-group myAuthResourceGroup --name <front-end-app-name> --body "$authSettings"

تضيف الأوامر بشكل فعال خاصية loginParameters مع نطاقات مخصصة إضافية. وفيما يلي شرح للنطاق المطلوب:

  • openid مطلوب من قبل App Service بشكل افتراضي بالفعل. للحصول على معلومات، راجع OpenID Connect Scopes.
  • offline_access مضمن هنا للراحة (في حالة رغبتك في تحديث الرموز).
  • api://<back-end-client-id>/user_impersonation هي واجهة برمجة تطبيقات مكشوفة في تسجيل تطبيق الواجهة الخلفية. إنه النطاق الذي يمنحك رمز JWT المميز الذي يتضمن تطبيق الواجهة الخلفية كجمهور رمز مميز.

تلميح

  • لعرض api://<back-end-client-id>/user_impersonation النطاق في مدخل Microsoft Azure، انتقل إلى صفحة المصادقة لتطبيق الواجهة الخلفية، وانقر فوق الارتباط ضمن موفر الهوية، ثم انقر فوق كشف واجهة برمجة تطبيقات في القائمة اليمنى.
  • لتكوين النطاقات المطلوبة باستخدام واجهة ويب بدلاً من ذلك، راجع خطوات Microsoft في تحديث الرموز المميزة.
  • تتطلب بعض النطاقات موافقة المسؤول أو المستخدم. يؤدي هذا المطلب إلى عرض صفحة طلب الموافقة عندما يقوم المستخدم بتسجيل الدخول إلى تطبيق الواجهة الأمامية في المستعرض. لتجنب صفحة الموافقة هذه، أضف تسجيل تطبيق الواجهة الأمامية كتطبيق عميل معتمد في صفحة كشف واجهة برمجة التطبيقات بالنقر فوق إضافة تطبيق عميل وتوفير معرف العميل لتسجيل تطبيق الواجهة الأمامية.

تم تكوين تطبيقاتك الآن. الواجهة الأمامية جاهزة الآن للوصول إلى الواجهة الخلفية برمز وصول مناسب.

للحصول على معلومات حول كيفية تكوين رمز الوصول للموفرين الآخرين، راجع تحديث الرموز المميزة لموفر الهوية.

6. تكوين خدمة التطبيقات الخلفية لقبول رمز مميز فقط من خدمة التطبيقات الأمامية

يجب عليك أيضا تكوين خدمة التطبيقات الخلفية لقبول رمز مميز فقط من خدمة التطبيقات الأمامية. قد يؤدي عدم القيام بذلك إلى "403: خطأ ممنوع" عند تمرير الرمز المميز من الواجهة الأمامية إلى الخلفية.

يمكنك تعيين هذا عبر نفس عملية Azure CLI التي استخدمتها في الخطوة السابقة.

  1. احصل على appId خدمة تطبيق الواجهة الأمامية (يمكنك الحصول على هذا على شفرة "المصادقة" من خدمة تطبيق الواجهة الأمامية).

  2. قم بتشغيل Azure CLI التالي، واستبدال و <back-end-app-name> <front-end-app-id>.

authSettings=$(az webapp auth show -g myAuthResourceGroup -n <back-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.validation.defaultAuthorizationPolicy.allowedApplications += ["<front-end-app-id>"]')
az webapp auth set --resource-group myAuthResourceGroup --name <back-end-app-name> --body "$authSettings"

authSettings=$(az webapp auth show -g myAuthResourceGroup  -n <back-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.validation.jwtClaimChecks += { "allowedClientApplications": ["<front-end-app-id>"]}')
az webapp auth set --resource-group myAuthResourceGroup --name <back-end-app-name> --body "$authSettings"

7. الواجهة الأمامية تستدعي الخلفية المصادق عليها

يحتاج تطبيق الواجهة الأمامية إلى تمرير مصادقة المستخدم مع النطاق الصحيح user_impersonation إلى الواجهة الخلفية. تستعرض الخطوات التالية التعليمات البرمجية المتوفرة في العينة لهذه الوظيفة.

عرض التعليمات البرمجية المصدر لتطبيق الواجهة الأمامية:

  1. استخدم العنوان الذي تم إدخاله x-ms-token-aad-access-token في خدمة التطبيقات الأمامية للحصول على الرمز المميز للوصول للمستخدم برمجيا.

    // ./src/server.js
const accessToken = req.headers['x-ms-token-aad-access-token'];

  2. استخدم accessToken في Authentication العنوان كقيمة bearerToken .

    // ./src/remoteProfile.js
// Get profile from backend
const response = await fetch(remoteUrl, {
    cache: "no-store", // no caching -- for demo purposes only
    method: 'GET',
    headers: {
        'Authorization': `Bearer ${accessToken}`
    }
});
if (response.ok) {
    const { profile } = await response.json();
    console.log(`profile: ${profile}`);
} else {
    // error handling
}

    يقوم هذا البرنامج التعليمي بإرجاع ملف تعريف مزيف لتبسيط السيناريو. يوضح البرنامج التعليمي التالي في هذه السلسلة كيفية استبدال bearerToken الخلفي برمز مميز جديد مع نطاق خدمة Azure المتلقية للمعلومات، مثل Microsoft Graph.

7. ترجع الواجهة الخلفية ملف التعريف إلى الواجهة الأمامية

إذا لم يكن الطلب من الواجهة الأمامية مخولا، ترفض خدمة تطبيق الواجهة الخلفية الطلب برمز خطأ HTTP 401 قبل أن يصل الطلب إلى رمز التطبيق الخاص بك. عند الوصول إلى التعليمات البرمجية الخلفية (لأنها تتضمن رمزا مميزا معتمدا)، قم باستخراج bearerToken للحصول على accessToken.

عرض التعليمات البرمجية المصدر لتطبيق الواجهة الخلفية:

// ./src/server.js
const bearerToken = req.headers['Authorization'] || req.headers['authorization'];

if (bearerToken) {
    const accessToken = bearerToken.split(' ')[1];
    console.log(`backend server.js accessToken: ${!!accessToken ? 'found' : 'not found'}`);

    // TODO: get profile from Graph API
    // provided in next article in this series
    // return await getProfileFromMicrosoftGraph(accessToken)

    // return fake profile for this tutorial
    return {
        "displayName": "John Doe",
        "withAuthentication": !!accessToken ? true : false
    }
}

8. استعرض للوصول إلى التطبيقات

  1. استخدم موقع ويب للواجهة الأمامية في مستعرض. عنوان URL بتنسيق https://<front-end-app-name>.azurewebsites.net/.

  2. يطلب المستعرض المصادقة الخاصة بك إلى تطبيق الويب. أكمل المصادقة.

    لقطة شاشة للنافذة المنبثقة لمصادقة المستعرض التي تطلب أذونات.

  3. بعد اكتمال المصادقة، يقوم تطبيق الواجهة الأمامية بإرجاع الصفحة الرئيسية للتطبيق.

    لقطة شاشة لمستعرض الويب تعرض تطبيق الواجهة الأمامية بعد إكمال المصادقة بنجاح.

  4. حدد Get user's profile. يؤدي ذلك إلى تمرير المصادقة الخاصة بك في الرمز المميز للحامل إلى الخلفية.

  5. تستجيب النهاية الخلفية باسم ملف التعريف المزيف ذو التعليمات البرمجية المضمنة: John Doe.

    لقطة شاشة لمستعرض الويب تعرض تطبيق الواجهة الأمامية بعد الحصول على ملف تعريف مزيف بنجاح من تطبيق الواجهة الخلفية.

    withAuthentication تشير قيمة true إلى إعداد المصادقة حتى الآن.

9. حذف الموارد

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

  1. احذف مجموعة الموارد عن طريق تشغيل الأمر التالي في Cloud Shell. ربما يستغرق الأمر بضع دقائق للتشغيل.

    az group delete --name myAuthResourceGroup

  2. استخدم معرف العميل لتطبيقات المصادقة، الذي عثرت عليه مسبقا وقمت بتدوينه في Enable authentication and authorization أقسام تطبيقات الواجهة الخلفية والواجهة الأمامية.

  3. احذف تسجيلات التطبيقات لكل من تطبيقات الواجهة الأمامية والخلفية.

    # delete app - do this for both frontend and backend client ids
az ad app delete <client-id>

الأسئلة الشائعة

كيف أعمل اختبار هذه المصادقة على جهاز التطوير المحلي الخاص بي؟

يتم توفير المصادقة في هذا الإجراء في طبقة النظام الأساسي للاستضافة بواسطة Azure App Service. لا يوجد محاكي مكافئ. يجب نشر تطبيق الواجهة الأمامية والخلفية ومصادقة التكوين لكل منهما لاستخدام المصادقة.

لا يعرض التطبيق ملف تعريف مزيف ، كيف يمكنني تصحيحه؟

لكل /debug من تطبيقي الواجهة الأمامية والخلفية مسارات للمساعدة في تصحيح أخطاء المصادقة عندما لا يرجع هذا التطبيق ملف التعريف المزيف . يوفر مسار تتبع أخطاء الواجهة الأمامية الأجزاء الهامة للتحقق من صحتها:

  • متغيرات البيئة:
    • BACKEND_URL تم تكوين بشكل صحيح ك https://<back-end-app-name>.azurewebsites.net. لا تقم بتضمين الشرطة المائلة اللاحقة للأمام أو المسار.
  • رؤوس HTTP:
    • x-ms-token-* يتم حقن الرؤوس.
  • يتم عرض اسم ملف تعريف Microsoft Graph للمستخدم الذي قام بتسجيل الدخول.
  • يحتوي user_impersonationنطاق تطبيق الواجهة الأمامية للرمز المميز على . إذا لم يتضمن نطاقك هذا، فقد تكون مشكلة في التوقيت. تحقق من معلمات تطبيق login الواجهة الأمامية في موارد Azure. انتظر بضع دقائق للنسخ المتماثل للمصادقة.

هل تم نشر التعليمات البرمجية المصدر للتطبيق بشكل صحيح لكل تطبيق ويب؟

  1. في مدخل Microsoft Azure لتطبيق الويب، حدد Development Tools -> Advanced Tools، ثم حدد Go ->. يؤدي ذلك إلى فتح علامة تبويب أو نافذة مستعرض جديدة.

  2. في علامة تبويب المستعرض الجديد، حدد Browse Directory -> Site wwwroot.

  3. تحقق مما يلي في الدليل:

    • package.json
    • node_modules.tar.gz
    • /src/index.js

  4. تحقق من أن خاصية package.json name هي نفس اسم الويب، إما frontend أو backend.

  5. إذا قمت بتغيير التعليمات البرمجية المصدر، وتحتاج إلى إعادة النشر، فاستخدم az webapp لأعلى من الدليل الذي يحتوي على ملف package.json لهذا التطبيق.

هل بدأ التطبيق بشكل صحيح

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

  1. في مدخل Microsoft Azure لتطبيق الويب، حدد Development Tools -> Advanced Tools، ثم حدد Go ->. يؤدي ذلك إلى فتح علامة تبويب أو نافذة مستعرض جديدة.
  2. في علامة تبويب المستعرض الجديد، حدد Browse Directory -> Deployment Logs.
  3. راجع كل سجل للعثور على أي مشكلات تم الإبلاغ عنها.

هل يمكن لتطبيق الواجهة الأمامية التحدث إلى تطبيق الواجهة الخلفية؟

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

  • يقوم تطبيق الويب الخلفي بإرجاع أي أخطاء إلى تطبيق الواجهة الأمامية إذا تم الوصول إليه. إذا لم يتم الوصول إليه، يقوم تطبيق الواجهة الأمامية بالإبلاغ عن رمز الحالة والرسالة.
    • 401: لم يمرر المستخدم المصادقة بشكل صحيح. يمكن أن يشير هذا إلى عدم تعيين النطاق بشكل صحيح.
    • 404: عنوان URL للخادم لا يتطابق مع المسار الذي يحتوي عليه الخادم
  • استخدم سجلات دفق تطبيق الواجهة الخلفية لمشاهدة أثناء تقديم طلب الواجهة الأمامية لملف تعريف المستخدم. هناك معلومات تتبع الأخطاء في التعليمات البرمجية console.log المصدر التي تساعد في تحديد مكان حدوث الفشل.

ماذا يحدث عند انتهاء صلاحية الرمز المميز للواجهة الأمامية؟

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

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

يتطلب هذا الأسلوب رمز الخادم لتمرير الرمز المميز للوصول إلى رمز JavaScript الذي يعمل في متصفح العميل. نظرا لعدم وجود طريقة لحماية الرمز المميز للوصول في المتصفح، فإنه ليس نهجا موصى به. حاليا، يوصى بنمط الواجهة الخلفية للواجهة الأمامية. إذا تم تطبيقه على المثال في هذا البرنامج التعليمي، فإن التعليمات البرمجية للمستعرض على تطبيق الواجهة الأمامية ستقوم بإجراء استدعاءات واجهة برمجة التطبيقات في جلسة مصادق عليها إلى رمز الخادم الخاص بها كوسيط، وستجعل التعليمة البرمجية للخادم على تطبيق الواجهة الأمامية بدورها استدعاءات واجهة برمجة التطبيقات إلى التطبيق الخلفي باستخدام x-ms-token-aad-access-token قيمة العنوان كرمز حامل. ستكون جميع المكالمات من التعليمات البرمجية للمستعرض إلى رمز الخادم محمية من خلال جلسة العمل المصادق عليها بالفعل.

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

ما تعلمته:

  • تمكين المصادقة والتفويض المضمنين
  • تأمين التطبيقات ضد الطلبات غير المصادقة
  • استخدام معرف Microsoft Entra كموفر هوية
  • الوصول إلى تطبيق بعيد نيابة عن المستخدم الذي قام بتسجيل الدخول
  • مكالمات آمنة من خدمة إلى خدمة مع مصادقة الرمز المميز
  • استخدام رموز الوصول المميزة من رمز الخادم

تقدم إلى البرنامج التعليمي التالي لمعرفة كيفية استخدام هوية هذا المستخدم للوصول إلى خدمة Azure.

 إنشاء تطبيق n-tier آمن في Azure App Service