Lernprogramm: Zugreifen auf Microsoft Graph aus einer gesicherten JavaScript-App als Benutzer

Erfahren Sie, wie Sie über eine Web-App, die auf Azure App Service ausgeführt wird, auf Microsoft Graph zugreifen.

Sie möchten Zugriff auf Microsoft Graph aus Ihrer Web-App hinzufügen und eine Aktion als angemeldeter Benutzer ausführen. In diesem Abschnitt wird beschrieben, wie Sie der Web-App delegierte Berechtigungen erteilen und die Profilinformationen des angemeldeten Benutzers aus Microsoft Entra ID abrufen.

In diesem Tutorial lernen Sie Folgendes:

Wenn Sie kein Azure Konto haben, erstellen Sie ein free-Konto bevor Sie beginnen.

Voraussetzungen

• Eine Webanwendung, die auf Azure App Service ausgeführt wird und das App Service-Authentifizierungs-/Autorisierungsmodul aktiviert ist.

Front-End-Zugriff auf Microsoft Graph gewähren

Nachdem Sie die Authentifizierung und Autorisierung in Ihrer Web-App aktiviert haben, wird die Web-App mit dem Microsoft Identity Platform registriert und von einer Microsoft Entra Anwendung unterstützt. In diesem Schritt erteilen Sie der Web-App Berechtigungen für den Zugriff auf Microsoft Graph für den Benutzer. (Technisch gesehen erteilen Sie der Microsoft Entra-Anwendung der Web-App die Berechtigungen, um auf die Microsoft Graph-Microsoft Entra-Anwendung für den Benutzer zuzugreifen.)

1. Wählen Sie im Microsoft Entra Admin CenterEntra ID aus.

2. Wählen Sie App-Registrierungen>Eigene Anwendungen>Alle Anwendungen in diesem Verzeichnis anzeigen aus. Wählen Sie den Namen Ihrer Web-App und dann die Option API-Berechtigungen aus.

3. Wählen Sie Eine Berechtigung hinzufügen aus und dann Microsoft APIs und Microsoft Graph.

4. Wählen Sie Delegierte Berechtigungen und in der Liste dann User.Read aus. Wählen Sie Berechtigungen hinzufügen aus.

Konfigurieren von App Service für die Rückgabe eines verwendbaren Zugriffstokens

Die Web-App verfügt jetzt über die erforderlichen Berechtigungen für den Zugriff auf Microsoft Graph als angemeldeten Benutzer. In diesem Schritt konfigurieren Sie die App Service-Authentifizierung und -Autorisierung, um Ihnen ein verwendbares Zugriffstoken für den Zugriff auf Microsoft Graph zu gewähren. Für diesen Schritt müssen Sie den User.Read-Bereich für den downstream-Dienst (Microsoft Graph) hinzufügen: https://graph.microsoft.com/User.Read.

Microsoft Graph von Node.js aufrufen

Ihre Web-App verfügt jetzt über die erforderlichen Berechtigungen und fügt die Client-ID Microsoft Graph den Anmeldeparametern hinzu.

Installieren von Clientbibliothekspaketen

Installieren Sie die pakete @azure/identity und den @microsoft/microsoft-graph-clientpakete in Ihrem Projekt mit npm.

npm install @microsoft/microsoft-graph-client

Konfigurieren von Authentifizierungsinformationen

Erstellen Sie ein Objekt, um die Authentifizierungseinstellungen aufzunehmen:

// 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 im Namen des Benutzers anrufen

Der folgende Code zeigt, wie Sie Microsoft Graph Controller als App aufrufen und einige Benutzerinformationen abrufen.

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

Der vorherige Code basiert auf der folgenden getAuthenticatedClient-Funktion, um Microsoft Graph Client zurückzugeben.

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

Bereinigen von Ressourcen

Wenn Sie alle Schritte in diesem mehrteiligen Tutorial ausgeführt haben, haben Sie einen App-Dienst, einen App Service-Hostingplan und ein Speicherkonto in einer Ressourcengruppe erstellt. Sie haben auch eine App-Registrierung in Microsoft Entra ID erstellt. Wenn Sie eine externe Konfiguration ausgewählt haben, haben Sie möglicherweise einen neuen externen Mandanten erstellt. Wenn Sie diese Ressourcen nicht mehr benötigen, löschen Sie diese und die App-Registrierung, sodass keine Gebühren mehr anfallen.

In diesem Tutorial lernen Sie Folgendes:

Löschen der Ressourcengruppe

Wählen Sie im Azure-PortalGruppen aus dem Portalmenü aus, und wählen Sie die Ressourcengruppe aus, die Ihren App Service- und App Service-Plan enthält.

Wählen Sie Ressourcengruppe löschen aus, um die Ressourcengruppe und alle Ressourcen zu löschen.

Die Ausführung dieses Befehls kann mehrere Minuten dauern.

Löschen der App-Registrierung

Wählen Sie im Microsoft Entra Admin CenterApp-Registrierungen aus. Wählen Sie anschließend die von Ihnen erstellte Anwendung aus.

Wählen Sie in der Übersicht der App-Registrierungen die Option Löschen aus.

Löschen des externen Mandanten

Wenn Sie einen neuen externen Mandanten erstellt haben, können Sie ihn löschen. Gehen Sie zum Microsoft Entra Admin Center, dann zu Entra ID>Übersicht>Mandanten verwalten.

Wählen Sie den zu löschenden Mandanten und dann Löschen aus.

Möglicherweise müssen Sie erforderliche Aktionen abschließen, bevor Sie den Mandanten löschen können. Beispielsweise müssen Sie möglicherweise alle Benutzerflows und App-Registrierungen im Mandanten löschen.

Wenn Sie zum Löschen des Mandanten bereit sind, wählen Sie Löschen aus.

Nächste Schritte

In diesem Tutorial haben Sie Folgendes gelernt: