Oktatóanyag: Hozzáférés a Microsoft Graphhoz egy biztonságos JavaScript-alkalmazásból felhasználóként

Megtudhatja, hogyan érheti el a Microsoft Graphot egy Azure-alkalmazás Service-en futó webalkalmazásból.

Diagram that shows accessing Microsoft Graph.

Szeretne hozzáférést adni a Microsoft Graph-hoz a webalkalmazásból, és valamilyen műveletet kell végrehajtania bejelentkezett felhasználóként. Ez a szakasz azt ismerteti, hogyan adhat delegált engedélyeket a webalkalmazásnak, és hogyan szerezheti be a bejelentkezett felhasználó profiladatait a Microsoft Entra-azonosítóból.

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

  • Delegált engedélyek megadása webalkalmazásnak.
  • A Microsoft Graph meghívása egy webalkalmazásból egy bejelentkezett felhasználó számára.

If you don't have an Azure subscription, create an Azure free account before you begin.

Előfeltételek

  • A Azure-alkalmazás Service-en futó webalkalmazás, amelyen engedélyezve van az App Service hitelesítési/engedélyezési modulja.

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

Most, hogy engedélyezte a hitelesítést és az engedélyezést a webalkalmazáson, a webalkalmazás regisztrálva lesz a Microsoft Identitásplatform, és egy Microsoft Entra-alkalmazás is támogatott. Ebben a lépésben engedélyt ad a webalkalmazásnak a Microsoft Graph eléréséhez a felhasználó számára. (Technikailag ön adja meg a webalkalmazás Microsoft Entra-alkalmazásának az engedélyeket a felhasználó Microsoft Graph Microsoft Entra alkalmazásának eléréséhez.)

  1. A Microsoft Entra Felügyeleti központban válassza az Alkalmazások lehetőséget.

  2. Válassza a Alkalmazásregisztrációk> A>címtárban lévő összes alkalmazás megtekintése lehetőséget. 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 és 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 jogkivonat visszaadására

A webalkalmazás rendelkezik a szükséges engedélyekkel ahhoz, hogy bejelentkezett felhasználóként hozzáférjen a Microsoft Graphhoz. Ebben a lépésben ú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 a User.Read hatókört az alsóbb rétegbeli szolgáltatáshoz (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, hibaüzenet jelenik CompactToken parsing failed with error code: 80049217 meg, amikor meghívja a Microsoft Graph API-kat a kódban.

Nyissa meg az Azure Resource Explorert , és használja az erőforrásfát, keresse meg a webalkalmazást. Az erőforrás URL-címének hasonlónak kell lennie a következőhöz https://resources.azure.com/subscriptions/subscriptionId/resourceGroups/SecureWebApp/providers/Microsoft.Web/sites/SecureWebApp20200915115914: .

Az Azure Resource Explorer ekkor megnyílik, és a webalkalmazás ki van jelölve az erőforrásfában.

  1. A lap tetején válassza az Olvasás/Írás lehetőséget az Azure-erőforrások szerkesztésének engedélyezéséhez.

  2. A bal oldali böngészőben részletezzen a konfigurációs>authsettingsV2 fájlhoz.

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

  4. Keresse meg az identityProviders ->azureActiveDirectory 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 jogkivonattal férhessen hozzá a Microsoft Graphhoz. Ha nem, a Microsoft Graph hibát ad vissza, amely szerint a kompakt jogkivonat formátuma helytelen.

A Microsoft Graph meghívása a Node.js-ről

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

Ha ezt a kódot egy mintaalkalmazás részeként szeretné megtekinteni, tekintse meg a következőt:

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

Telepítse a @azure/identitást é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
        },
    },
}

A Microsoft Graph meghívása a felhasználó nevében

Az alábbi kód bemutatja, hogyan hívhatja meg a 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 a következő getAuthenticatedClient függvényre támaszkodik a 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;
}

Clean up resources

Ha elvégezte a többrészes oktatóanyag összes lépését, létrehozott egy app service-et, egy app service üzemeltetési csomagot és egy tárfiókot egy erőforráscsoportban. Emellett létrehozott egy alkalmazásregisztrációt is a Microsoft Entra-azonosítóban. 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 a létrehozott Azure-erőforrásokat az oktatóanyag követése közben.

Az erőforráscsoport törlése

Az Azure Portalon válassza ki az Erőforráscsoportokat a portál menüjéből, és válassza ki azt az erőforráscsoportot, amely tartalmazza az App Service- és App Service-csomagot.

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.

Screenshot that shows deleting the resource group.

A parancs futtatása több percet is igénybe vehet.

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

A Microsoft Entra Felügyeleti központban válassza az Alkalmazások> Alkalmazásregisztrációk lehetőséget. Ezután válassza ki a létrehozott alkalmazást. Screenshot that shows selecting app registration.

Az alkalmazásregisztráció áttekintésében válassza a Törlés lehetőséget. Screenshot that shows deleting the app registration.

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.
  • A Microsoft Graph meghívása egy webalkalmazásból egy bejelentkezett felhasználó számára.