Självstudie: Få åtkomst till Microsoft Graph från en skyddad JavaScript-app som användare

Lär dig hur du kommer åt Microsoft Graph från en webbapp som körs på Azure App Service.

Du vill lägga till åtkomst till Microsoft Graph från webbappen och utföra en åtgärd som den inloggade användaren. I det här avsnittet beskrivs hur du beviljar delegerade behörigheter till webbappen och hämtar den inloggade användarens profilinformation från Microsoft Entra ID.

I den här handledningen lär du dig:

Om du inte har ett Azure konto skapar du ett fritt konto innan du börjar.

Förutsättningar

• Ett webbprogram som körs på Azure App Service som har modulen App Service-autentisering/auktorisering aktiverat.

Bevilja åtkomst till klientdelen för att anropa Microsoft Graph

När du har aktiverat autentisering och auktorisering i webbappen registreras webbappen med Microsofts identitetsplattform och backas upp av ett Microsoft Entra-program. I det här steget ger du webbappen behörighet att komma åt Microsoft Graph för användaren.

1. I Microsoft Entra admin center väljer du Entra ID.

2. Välj Appregistreringar>Ägda applikationer>Visa alla applikationer i den här katalogen. Välj webbappens namn och välj sedan API-behörigheter.

3. Välj Lägg till en behörighet och välj sedan Microsoft API:er och sedan Microsoft Graph.

4. Välj Delegerade behörigheter och välj sedan User.Read i listan. Välj Lägg till behörigheter.

Konfigurera App Service för att returnera en användbar åtkomsttoken

Webbappen har nu de behörigheter som krävs för att komma åt Microsoft Graph som den inloggade användaren. I det här avsnittet konfigurerar du App Service-autentisering och auktorisering för att ge dig en användbar åtkomsttoken för åtkomst till Microsoft Graph. För det här steget måste du lägga till omfånget User.Read för den underordnade tjänsten (Microsoft Graph): https://graph.microsoft.com/User.Read.

Anropa Microsoft Graph med hjälp av Node.js

Webbappen har nu de behörigheter som krävs. Den lägger också till Microsoft Graphs klient-ID till inloggningsparametrarna.

Installera klientbibliotekspaket

Installera paketen @azure/identity och @microsoft/microsoft-graph-client i projektet med npm.

npm install @microsoft/microsoft-graph-client

Konfigurera autentiseringsinformation

Skapa ett objekt som innehåller autentiseringsinställningarna:

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

Anropa Microsoft Graph för användarens räkning

Följande kod visar hur du anropar Microsoft Graph kontrollant som app och hämtar viss användarinformation.

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

Den tidigare koden förlitar sig på följande getAuthenticatedClient-funktion för att returnera Microsoft Graph-klienten.

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

Rensa resurser

Om du har slutfört alla steg i den här flerdelade självstudien har du skapat ett App Service, ett App Service-värdpaket och ett lagringskonto i en resursgrupp. Du har också skapat en appregistrering i Microsoft Entra ID. Om du valde extern konfiguration kan det hända att du har skapat en ny extern klientorganisation. När de inte längre behövs tar du bort de här resurserna och appregistreringen så att du inte fortsätter att påföra avgifter.

I den här handledningen lär du dig:

Ta bort resursgruppen

1. I Azure-portalen går du till Menyn i Azure-portalen och väljer Resursgrupper.

2. Välj den resursgrupp som innehåller din App Service- och App Service-plan.

3. Välj Ta bort resursgrupp för att ta bort resursgruppen och alla resurser.

   

Den här åtgärden kan ta flera minuter.

Ta bort appregistreringen

1. I Microsoft Entra admin center väljer du App registrations. Välj sedan det program som du skapade.

   

2. I översikten över appregistrering väljer du Ta bort.

   

Ta bort den externa klientorganisationen

Om du har skapat en ny extern klientorganisation kan du ta bort den.

1. I administrationscentret för Microsoft Entra bläddrar du till Entra ID>Översikt>Hantera klienter.

2. Välj den klientorganisation som du vill ta bort och välj sedan Ta bort.

   Du kan behöva utföra de krävda åtgärderna innan du kan ta bort klienten. Du kan till exempel behöva ta bort alla användarflöden och appregistreringar i klientorganisationen.

3. Om du är redo att ta bort klientorganisationen väljer du Ta bort.

Nästa steg

I den här självstudiekursen lärde du dig att: