Handleiding: Toegang tot Microsoft Graph als gebruiker vanuit een beveiligde JavaScript-app

Leer hoe u toegang kunt krijgen tot Microsoft Graph vanuit een webapplicatie die wordt uitgevoerd op Azure App Service.

U wilt toegang toevoegen tot Microsoft Graph vanuit uw web-app en een actie uitvoeren als de aangemelde gebruiker. In deze sectie wordt beschreven hoe u gedelegeerde machtigingen verleent aan de web-app en de profielgegevens van de aangemelde gebruiker opvragen uit Microsoft Entra ID.

In deze zelfstudie leert u het volgende:

Als u geen Azure account hebt, maakt u een free-account voordat u begint.

Vereisten

• Een webtoepassing die wordt uitgevoerd op Azure App Service waarop de module App Service-verificatie/autorisatie is ingeschakeld.

Front-endtoegang verlenen om Microsoft Graph aan te roepen

Nadat u verificatie en autorisatie hebt ingeschakeld voor uw web-app, wordt de web-app geregistreerd bij het Microsoft Identity Platform en wordt deze ondersteund door een Microsoft Entra-toepassing. In deze stap geeft u de web-app machtigingen voor toegang tot Microsoft Graph voor de gebruiker.

1. Selecteer in het Microsoft Entra beheercentrumEntra ID.

2. Selecteer App-registraties>Eigen applicaties>Bekijk alle applicaties in deze directory. Selecteer de naam van uw web-app en selecteer vervolgens API-machtigingen.

3. Selecteer Een machtiging toevoegen en selecteer vervolgens Microsoft-API's en vervolgens Microsoft Graph.

4. Selecteer Gedelegeerde machtigingen en selecteer vervolgens User.Read in de lijst. Selecteer Machtigingen toevoegen.

App Service configureren zodat een bruikbaar toegangstoken wordt geretourneerd

De web-app heeft nu de vereiste machtigingen voor toegang tot Microsoft Graph als de aangemelde gebruiker. In deze sectie configureert u App Service-verificatie en -autorisatie om u een bruikbaar toegangstoken te bieden voor toegang tot Microsoft Graph. Voor deze stap moet u het User.Read bereik voor de downstreamservice (Microsoft Graph) toevoegen: https://graph.microsoft.com/User.Read.

Microsoft Graph bellen vanuit Node.js

Uw web-app heeft nu de vereiste machtigingen. Ook wordt de client-id van Microsoft Graph toegevoegd aan de aanmeldingsparameters.

Clientbibliotheekpakketten installeren

Installeer de @azure/identity en de pakketten @microsoft/microsoft-graph-client in uw project met npm.

npm install @microsoft/microsoft-graph-client

Verificatiegegevens configureren

Maak een object voor het opslaan van de verificatie-instellingen:

// 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 oproepen namens de gebruiker

De volgende code laat zien hoe u Microsoft Graph controller aanroept als de app en wat gebruikersgegevens opvragen.

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

De vorige code is afhankelijk van de volgende getAuthenticatedClient-functie om Microsoft Graph-client te retourneren.

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

Hulpmiddelen opschonen

Als u alle stappen in deze zelfstudie met meerdere onderdelen hebt voltooid, hebt u een App Service-, App Service-hostingabonnement en een opslagaccount in een resourcegroep gemaakt. U hebt ook een app-registratie gemaakt in Microsoft Entra ID. Als u een externe configuratie hebt gekozen, hebt u mogelijk een nieuwe externe tenant gemaakt. Wanneer de resources niet meer nodig zijn, verwijdert u deze en de app-registratie, zodat er geen kosten meer bij u in rekening worden gebracht.

In deze zelfstudie leert u het volgende:

De resourcegroep verwijderen

1. Selecteer Resourcegroepen in het menu van de Azure portal.

2. Selecteer de resourcegroep die uw App Service en het App Service-plan bevat.

3. Selecteer Resourcegroep verwijderen om de resourcegroep en alle resources te verwijderen.

   

Deze actie kan enkele minuten duren.

De app-registratie verwijderen

1. Selecteer in de Microsoft Entra admin center, App registrations. Selecteer vervolgens de toepassing die u heeft gemaakt.

   

2. Selecteer Verwijderen in het app-registratieoverzicht.

   

De externe tenant verwijderen

Als u een nieuwe externe tenant hebt gemaakt, kunt u deze verwijderen.

1. Blader in het Microsoft Entra-beheercentrum naar Entra ID>Overview>Manage tenants.

2. Selecteer de tenant die u wilt verwijderen en selecteer vervolgens Verwijderen.

   Mogelijk moet u de vereiste acties voltooien voordat u de tenant kunt verwijderen. Mogelijk moet u bijvoorbeeld alle gebruikersstromen en app-registraties in de tenant verwijderen.

3. Als u klaar bent om de tenant te verwijderen, selecteert u Verwijderen.

Volgende stappen

In deze zelfstudie heeft u het volgende geleerd: