مشاركة عبر


البرنامج التعليمي: الوصول إلى Microsoft Graph من تطبيق JavaScript آمن بصفتك المستخدم

تعرف على كيفية الوصول إلى Microsoft Graph من تطبيق ويب يعمل على خدمة تطبيقات Azure.

رسم تخطيطي يوضح الوصول إلى Microsoft Graph.

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

في هذا البرنامج التعليمي، تتعلم كيفية:

  • منح أذونات مفوضة إلى تطبيق ويب.
  • اتصل بـ Microsoft Graph من تطبيق ويب لمستخدم سجل الدخول.

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

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

منح الوصول الأمامي للاتصال بـ Microsoft Graph

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

  1. في مركز إدارة Microsoft Entra، حدد Applications.

  2. حدد تسجيلات التطبيق> التطبيقات المملوكة > عرض جميع التطبيقات في هذا الدليل . حدد اسم تطبيق الويب، ثم حدد أذونات واجهة برمجة التطبيقات.

  3. حدد إضافة إذن، ثم حدد واجهات برمجة تطبيقات Microsoft وMicrosoft Graph.

  4. حدد الأذونات المفوضة، ثم حدد User.Read من القائمة. حدد إضافة أذونات.

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

يحتوي تطبيق الويب الآن على الأذونات المطلوبة للوصول إلى Microsoft Graph كمستخدم بتسجيل الدخول. في هذه الخطوة، يمكنك تكوين مصادقة خدمة التطبيقات والتخويل لمنحك رمز وصول قابلاً للاستخدام للوصول إلى Microsoft Graph. لهذه الخطوة، تحتاج إلى إضافة نطاق المستخدم. اقرأ نطاق خدمة المتلقين للمعلومات (Microsoft Graph): https://graph.microsoft.com/User.Read.

هام

إذا لم تقم بتكوين App Service لإرجاع رمز وصول قابل للاستخدام، فستتلقى خطأ CompactToken parsing failed with error code: 80049217 عند استدعاء واجهات برمجة تطبيقات Microsoft Graph في التعليمات البرمجية الخاصة بك.

انتقل إلى Azure Resource Explorer واستخدام شجرة الموارد، وحدد موقع تطبيق الويب الخاص بك. يجب أن يكون عنوان URL للمورد مشابها ل https://resources.azure.com/subscriptions/subscriptionId/resourceGroups/SecureWebApp/providers/Microsoft.Web/sites/SecureWebApp20200915115914.

يتم الآن فتح مستكشف موارد Azure مع تحديد تطبيق الويب في شجرة الموارد.

  1. في أعلى الصفحة، حدد قراءة/كتابة لتمكين تحرير موارد Azure.

  2. في المستعرض الأيسر، انتقل لأسفل لتكوين >authsettingsV2.

  3. في طريقة العرض authsettingsV2 ، حدد Edit.

  4. ابحث عن قسم تسجيل الدخول في identityProviders ->azureActiveDirectory وأضف إعدادات loginParameters التالية: "loginParameters":[ "response_type=code id_token","scope=openid offline_access profile https://graph.microsoft.com/User.Read" ].

    "identityProviders": {
        "azureActiveDirectory": {
          "enabled": true,
          "login": {
            "loginParameters":[
              "response_type=code id_token",
              "scope=openid offline_access profile https://graph.microsoft.com/User.Read"
            ]
          }
        }
      }
    },
    
  5. احفظ إعداداتك عن طريق تحديد PUT. قد يستغرق هذا الإعداد عدة دقائق حتى يصبح نافذ المفعول. تم تكوين تطبيق الويب الخاص بك الآن للوصول إلى Microsoft Graph باستخدام رمز مميز للوصول الصحيح. إذا لم تقم بذلك، Microsoft Graph سيقوم بإرجاع خطأ قائلاً إن تنسيق الرمز المميز المضغوط غير صحيح.

اتصل بـ Microsoft Graph من Node.js

يحتوي تطبيق الويب الآن على الأذونات المطلوبة ويضيف أيضًا معرف عميل Microsoft Graph إلى معلمات تسجيل الدخول.

تثبيت حزم مكتبة العميل

ثبّت حزمتي @ azure/Identity و@ microsoft/microsoft-graph-client في مشروعك باستخدام npm.

npm install @microsoft/microsoft-graph-client

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

إنشاء كائن للاحتفاظ بإعدادات المصادقة:

// partial code in app.js
const appSettings = {
    appCredentials: {
        clientId: process.env.WEBSITE_AUTH_CLIENT_ID, // Enter the client Id here,
        tenantId: "common", // Enter the tenant info here,
        clientSecret: process.env.MICROSOFT_PROVIDER_AUTHENTICATION_SECRET // Enter the client secret here,
    },
    authRoutes: {
        redirect: "/.auth/login/aad/callback", // Enter the redirect URI here
        error: "/error", // enter the relative path to error handling route
        unauthorized: "/unauthorized" // enter the relative path to unauthorized route
    },
    protectedResources: {
        graphAPI: {
            endpoint: "https://graph.microsoft.com/v1.0/me", // resource endpoint
            scopes: ["User.Read"] // resource scopes
        },
    },
}

اتصل بـ Microsoft Graph نيابة عن المستخدم

يوضح التعليمة البرمجية التالي كيفية استدعاء Microsoft Graph controller باعتباره التطبيق والحصول على بعض معلومات المستخدم.

// controllers/graphController.js

// get the name of the app service instance from environment variables
const appServiceName = process.env.WEBSITE_SITE_NAME;

const graphHelper = require('../utils/graphHelper');

exports.getProfilePage = async(req, res, next) => {

    try {
        // get user's access token scoped to Microsoft Graph from session
        // use token to create Graph client
        const graphClient = graphHelper.getAuthenticatedClient(req.session.protectedResources["graphAPI"].accessToken);

        // return user's profile
        const profile = await graphClient
            .api('/me')
            .get();

        res.render('profile', { isAuthenticated: req.session.isAuthenticated, profile: profile, appServiceName: appServiceName });   
    } catch (error) {
        next(error);
    }
}

تعتمد التعليمة البرمجية السابقة على وظيفة getAuthenticatedClient التالية لإرجاع عميل Microsoft Graph.

// utils/graphHelper.js

const graph = require('@microsoft/microsoft-graph-client');

getAuthenticatedClient = (accessToken) => {
    // Initialize Graph client
    const client = graph.Client.init({
        // Use the provided access token to authenticate requests
        authProvider: (done) => {
            done(null, accessToken);
        }
    });

    return client;
}

تنظيف الموارد

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

في هذا البرنامج التعليمي، تتعلم كيفية:

  • احذف موارد Azure التي تم إنشاؤها أثناء اتباع البرنامج التعليمي.

لا تحذف مجموعة الموارد

في مدخل Microsoft Azure، حدد Resource groups من قائمة المدخل وحدد مجموعة الموارد التي تحتوي على خطة App Service وApp Service.

حدد حذف مجموعة الموارد لحذف مجموعة الموارد وجميع الموارد.

لقطة شاشة تعرض حذف مجموعة الموارد.

قد يستغرق تشغيل هذا الأمر عدة دقائق.

حذف تسجيل التطبيق

في مركز إدارة Microsoft Entra، حدد >. ثم حدد التطبيق الذي قمت بإنشائه. لقطة شاشة توضح تحديد تسجيل التطبيق.

في نظرة عامة على تسجيل التطبيق، حدد حذف. لقطة شاشة تعرض حذف تسجيل التطبيق.

حذف المستأجر الخارجي

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

حدد المستأجر الذي تريد حذفه، ثم حدد حذف.

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

إذا كنت جاهزا لحذف المستأجر، فحدد حذف.

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

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

  • منح أذونات مفوضة إلى تطبيق ويب.
  • اتصل بـ Microsoft Graph من تطبيق ويب لمستخدم سجل الدخول.