Oktatóanyag: Microsoft Graph elérése felhasználóként egy biztonságos JavaScript-alkalmazásból

Megtudhatja, hogyan férhet hozzá Microsoft Graph egy Azure App Service futó webalkalmazásból.

Diagram, amely a Microsoft Graph elérését mutatja.

A webalkalmazásából hozzá szeretne férni a Microsoft Graphhoz, és bejelentkezett felhasználóként végezhet el valamilyen műveletet. Ez a szakasz azt ismerteti, hogyan adhat delegált engedélyeket a webalkalmazásnak, és hogyan szerezheti be a bejelentkezett felhasználó profiladatait Microsoft Entra ID.

Ebben az oktatóanyagban az alábbiakkal fog megismerkedni:

  • Delegált engedélyek megadása webalkalmazásnak.
  • Hívja meg a Microsoft Graph API-t egy webalkalmazáson keresztül az egyik bejelentkezett felhasználó esetén.

Ha nincs Azure fiókja, a kezdés előtt hozzon létre egy felszabadító fiókot.

Előfeltételek

Előtérbeli hozzáférés biztosítása a Microsoft Graph hívásához

Miután engedélyezte a hitelesítést és az engedélyezést a webalkalmazáson, a webalkalmazás regisztrálva lesz a Microsoft identitásplatformján, és egy Microsoft Entra-alkalmazás is alátámasztja. Ebben a lépésben engedélyt ad a webalkalmazásnak a felhasználó Microsoft Graph eléréséhez.

Note

Gyakorlatilag a webalkalmazás Microsoft Entra-alkalmazásának engedélyt ad a felhasználó Microsoft Graph Microsoft Entra alkalmazásának eléréséhez.

  1. A Microsoft Entra admin center válassza a Entra ID lehetőséget.

  2. Válassza a Alkalmazás regisztrációk>Tulajdonolt alkalmazások>A címtár összes alkalmazásának megjelenítése. Válassza ki a webalkalmazás nevét, majd válassza ki az API-engedélyeket.

  3. Válassza az Engedély hozzáadása, majd a Microsoft API-k, majd a Microsoft Graph lehetőséget.

  4. Válassza a Delegált engedélyek lehetőséget, majd válassza a User.Read lehetőséget a listából. Jelölje be az Engedélyek hozzáadása lehetőséget.

Az App Service konfigurálása használható hozzáférési token visszaadására

A webalkalmazás most már rendelkezik a szükséges engedélyekkel ahhoz, hogy bejelentkezett felhasználóként hozzáférjen Microsoft Graph. Ebben a szakaszban úgy konfigurálja az App Service-hitelesítést és -engedélyezést, hogy használható hozzáférési jogkivonatot biztosítson a Microsoft Graph eléréséhez. Ehhez a lépéshez hozzá kell adnia az User.Read alsóbb rétegbeli szolgáltatás hatókörét (Microsoft Graph): https://graph.microsoft.com/User.Read.

Fontos

Ha nem konfigurálja az App Service-t használható hozzáférési jogkivonat visszaadására, CompactToken parsing failed with error code: 80049217 hibaüzenet jelenik meg, amikor Microsoft Graph API-kat hív meg a kódban.

Nyissa meg Azure Resource Explorer és az erőforrásfa használatával keresse meg a webalkalmazást. Az erőforrás URL-címének a https://management.azure.com/subscriptions/subscriptionId/resourceGroups/SecureWebApp/providers/Microsoft.Web/sites/SecureWebApp20200915115914-hez hasonlónak kell lennie.

A Azure Resource Explorer ekkor megnyílik az erőforrásfában kiválasztott webalkalmazással.

  1. A lap tetején válassza a Szerkesztés lehetőséget a Azure-erőforrások szerkesztésének engedélyezéséhez.

  2. A bal oldali böngészőben navigáljon a config>authsettingsV2 részhez.

  3. Az authsettingsV2 nézetben válassza a Szerkesztés lehetőséget.

  4. Keresse meg az identityProviders>bejelentkezési szakaszát, és adja hozzá a következő loginParameters-beállításokat: "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. Mentse a beállításokat a PUT gombra kattintva.

A beállítás érvénybe lépése több percet is igénybe vehet. A webalkalmazás most már úgy van konfigurálva, hogy megfelelő hozzáférési tokennel férhessen hozzá a Microsoft Graphhoz. Ha ezt nem teszed meg, a Microsoft Graph hibát jelez, amely azt jelzi, hogy a tömör jogkivonat formátuma helytelen.

Node.js használatával hívja meg a Microsoft Graph-ot

A webalkalmazás most már rendelkezik a szükséges engedélyekkel. Emellett hozzáadja a Microsoft Graph ügyfél-azonosítóját a bejelentkezési paraméterekhez.

Ügyfélkódtár-csomagok telepítése

Telepítse a @azure/identity és a @microsoft/microsoft-graph-client csomagokat a projektben az npm használatával.

npm install @microsoft/microsoft-graph-client

Hitelesítési adatok konfigurálása

Hozzon létre egy objektumot a hitelesítési beállítások tárolásához:

// 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 hívása a felhasználó nevében

Az alábbi kód bemutatja, hogyan hívhatja meg Microsoft Graph vezérlőt alkalmazásként, és hogyan kérhet le néhány felhasználói információt.

// 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);
    }
}

Az előző kód az alábbi getAuthenticatedClient függvényre támaszkodik Microsoft Graph ügyfél visszaadásához.

// 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;
}

Az erőforrások tisztítása

Ha elvégezte a többrészes oktatóanyag összes lépését, létrehozott egy App Service-, App Service-üzemeltetési csomagot és egy tárfiókot egy erőforráscsoportban. Emellett létrehozott egy alkalmazásregisztrációt a(z) Microsoft Entra ID-ben. Ha külső konfigurációt választott, előfordulhat, hogy létrehozott egy új külső bérlőt. Ha már nincs rá szükség, törölje ezeket az erőforrásokat és az alkalmazásregisztrációt, hogy ne halmozjon fel díjakat.

Ebben az oktatóanyagban az alábbiakkal fog megismerkedni:

  • Törölje az oktatóanyag követése közben létrehozott Azure erőforrásokat.

Az erőforráscsoport törlése

  1. Az Azure Portalon az Azure Portal menüjében válassza az Erőforráscsoportok lehetőséget.

  2. Válassza ki az App Service- és App Service-csomagot tartalmazó erőforráscsoportot.

  3. Az erőforráscsoport és az összes erőforrás törléséhez válassza az Erőforráscsoport törlése lehetőséget.

    Képernyőkép az erőforráscsoport törléséről.

Ez a művelet több percet is igénybe vehet.

Az alkalmazásregisztráció törlése

  1. A Microsoft Entra admin center válassza a App registrations lehetőséget. Ezután válassza ki a létrehozott alkalmazást.

    Képernyőkép az alkalmazásregisztráció kiválasztásáról.

  2. Az alkalmazásregisztráció áttekintésében válassza a Törlés lehetőséget.

    Képernyőkép az alkalmazásregisztráció törléséről.

A külső bérlő törlése

Ha új külső bérlőt hozott létre, törölheti azt.

  1. A Microsoft Entra Felügyeleti központban keresse meg az Entra-azonosító>áttekintése> témakört.

  2. Jelölje ki a törölni kívánt bérlőt, majd válassza a Törlés lehetőséget.

    Előfordulhat, hogy a bérlő törlése előtt el kell végeznie a szükséges műveleteket. Előfordulhat például, hogy törölnie kell az összes felhasználói folyamatot és alkalmazásregisztrációt a bérlőben.

  3. Ha készen áll a bérlő törlésére, válassza a Törlés lehetőséget.

Következő lépések

Ez az oktatóanyag bemutatta, hogyan végezheti el az alábbi műveleteket:

  • Delegált engedélyek megadása webalkalmazásnak.
  • Hívja meg a Microsoft Graph API-t egy webalkalmazáson keresztül az egyik bejelentkezett felhasználó esetén.

Az alkalmazásszolgáltatás alkalmazásként fér hozzá a Microsoft Graphez

  • Last updated on