Lernprogramm: Authentifizierungsablauf ausgehend von App Service über Backend-API zu Microsoft Graph

Erfahren Sie, wie Sie einen Back-End-App-Dienst erstellen und konfigurieren, um die Benutzeranmeldeinformationen einer Front-End-App zu akzeptieren und diese Anmeldeinformationen für einen nachgeschalteten Azure-Dienst auszutauschen. Dadurch kann sich ein Benutzer bei einem Frontend-App-Dienst anmelden, seine Anmeldeinformationen an einen Back-End-App-Dienst übergeben und dann auf einen Azure-Dienst mit derselben Identität zugreifen.

In diesem Tutorial lernen Sie Folgendes:

Konfigurieren der Back-End-Authentifizierungs-App, um ein Token bereitzustellen, das für den nachgeschalteten Azure-Dienst vorgesehen ist
Verwenden Sie JavaScript-Code, um das Zugriffstoken des angemeldeten Benutzers für ein neues Token für den downstream-Dienst auszutauschen.
Verwenden Sie JavaScript-Code, um auf nachgeschalteten Dienst zuzugreifen.

Voraussetzungen

Schließen Sie das vorherige Lernprogramm ab, greifen Sie auf Microsoft Graph von einer gesicherten JavaScript-App als Benutzer zu, bevor Sie dieses Lernprogramm starten, die Ressourcen aber nicht am Ende des Lernprogramms entfernen. In diesem Lernprogramm wird davon ausgegangen, dass Sie über die beiden App-Dienste und die entsprechenden Authentifizierungs-Apps verfügen.

Im vorherigen Lernprogramm wurde die Azure Cloud Shell als Shell für die Azure CLI verwendet. Dieses Tutorial führt diese Nutzung fort.

Architektur

Das Lernprogramm zeigt, wie Sie die benutzeranmeldeinformationen, die von der Frontend-App bereitgestellt werden, an die Back-End-App übergeben und dann an einen Azure-Dienst weiter. In diesem Tutorial ist Microsoft Graph der Downstreamdienst. Die Anmeldeinformationen des Benutzers werden verwendet, um sein Profil aus Microsoft Graph abzurufen.

Architekturbild einer App Service-Instanz, die sich im Auftrag von angemeldeten Benutzenden mit einer weiteren App Service-Instanz verbindet, um eine Verbindung zu Microsoft Graph herzustellen.

Authentifizierungsfluss für einen Benutzer zum Abrufen von Microsoft Graph-Informationen in dieser Architektur:

Vorheriges Lernprogramm behandelt:

Melden Sie sich bei einem Front-End-App-Dienst an, der für die Verwendung von Active Directory als Identitätsanbieter konfiguriert ist.
Der Frontend-App-Dienst übergibt das Token des Benutzers an den Back-End-App-Dienst.
Die Back-End-App ist gesichert, damit das Frontend eine API-Anforderung erstellen kann. Das Zugriffstoken des Benutzers verfügt über eine Zielgruppe für die Back-End-API und den Gültigkeitsbereich von user_impersonation.
Die Back-End-App-Registrierung verfügt bereits über Microsoft Graph mit dem Bereich User.Read. Dies wird standardmäßig allen App-Registrierungen hinzugefügt.
Am Ende des vorherigen Lernprogramms wurde ein gefälschtes Profil an die Frontend-App zurückgegeben, da Graph nicht verbunden war.

Dieses Lernprogramm erweitert die Architektur:

Erteilen Sie der Administratorzustimmung, um den Benutzerzustimmungsbildschirm für die Back-End-App zu umgehen.
Ändern Sie den Anwendungscode, um das von der Front-End-App gesendete Zugriffstoken in ein Zugriffstoken mit der erforderlichen Berechtigung für Microsoft Graph zu konvertieren.
Stellen Sie Code bereit, damit die Back-End-App ein Token gegen ein neues Token mit dem Bereich des Azure-Downstreamdiensts, wie z. B. Microsoft Graph, austauscht.
Stellen Sie Code bereit, damit eine Back-End-App ein neues Token verwendet, um als aktueller authentifizierter Benutzer auf den nachgeschalteten Dienst zuzugreifen.
Stellen Sie die Back-End-App mit az webapp up.
Am Ende dieses Lernprogramms wird ein echtes Profil an die Frontend-App zurückgegeben, da Graph verbunden ist.

Dieses Lernprogramm funktioniert nicht:

Ändern Sie die Frontend-App von dem vorherigen Tutorial.
Ändern Sie die Bereichsberechtigung der Backend-Authentifizierungs-App, da User.Read standardmäßig allen Authentifizierungs-Apps hinzugefügt wird.

Wenn sich der Benutzer im vorherigen Lernprogramm bei der Front-End-App angemeldet hat, wird ein Popup angezeigt, in dem nach Zustimmung des Benutzers gefragt wird.

In dieser Anleitung muss die Back-End-App, um Benutzerprofile aus Microsoft Graph zu lesen, das Zugriffstoken des angemeldeten Benutzers gegen ein neues Zugriffstoken mit den erforderlichen Berechtigungen für Microsoft Graph eintauschen. Da der Benutzer nicht direkt mit der Back-End-App verbunden ist, kann er nicht interaktiv auf den Zustimmungsbildschirm zugreifen. Sie müssen dies lösen, indem Sie die Registrierung der Back-End-App in Microsoft Entra ID konfigurieren, um Administratorzustimmung zu erteilen. Dies ist eine Einstellungsänderung, die normalerweise von einem Active Directory-Administrator vorgenommen wird.

Öffnen Sie das Azure-Portal, und suchen Sie nach Ihrer Recherche für den Back-End App Service.
Suchen Sie den Abschnitt "Einstellungen –> Authentifizierung" .
Wählen Sie den Identitätsanbieter aus, um zur Authentifizierungs-App zu wechseln.
Wählen Sie in der Authentifizierungs-App "Verwalten –> API-Berechtigungen" aus.
Wählen Sie "Administratorzustimmung für Standardverzeichnis erteilen" aus.
Wählen Sie im Popupfenster "Ja " aus, um die Zustimmung zu bestätigen.
Überprüfen Sie, ob in der Spalte Status der Eintrag Für Standardverzeichnis gewährt steht. Mit dieser Einstellung muss die Back-End-Anwendung dem angemeldeten Benutzer keinen Zustimmungsbildschirm mehr anzeigen und kann direkt ein Zugriffstoken anfordern. Der angemeldete Benutzer hat Zugriff auf die User.Read Bereichseinstellung, da dies der Standardbereich ist, mit dem die App-Registrierung erstellt wird.

2. Installieren von npm-Paketen

Im vorherigen Lernprogramm hat die Back-End-App keine npm-Pakete für die Authentifizierung benötigt, da die einzige Authentifizierung durch Konfigurieren des Identitätsanbieters im Azure-Portal bereitgestellt wurde. In diesem Tutorial muss das Zugriffstoken des angemeldeten Benutzers für die Back-End-API gegen ein Zugriffstoken mit Microsoft Graph in seinem Geltungsbereich ausgetauscht werden. Dieser Austausch wird mit zwei Bibliotheken abgeschlossen, da er die App-Service-Authentifizierung nicht mehr verwendet, sondern direkt Microsoft Entra ID und MSAL.js nutzt.

@azure/MSAL-node - Token austauschen
@microsoft/microsoft-graph-client – Herstellen einer Verbindung mit Microsoft Graph

Öffnen Sie die Azure Cloud Shell, und wechseln Sie in die Back-End-App des Beispielverzeichnisses:
```
cd js-e2e-web-app-easy-auth-app-to-app/backend
```
Installieren Sie das Azure MSAL npm-Paket:
```
npm install @azure/msal-node
```
Installieren Sie das Npm-Paket von Microsoft Graph:
```
npm install @microsoft/microsoft-graph-client
```

3. Hinzufügen von Code zum Austauschen des aktuellen Tokens für das Microsoft Graph-Token

Der Quellcode zum Ausführen dieses Schritts wird für Sie bereitgestellt. Führen Sie die folgenden Schritte aus, um sie einzuschließen.

Öffnen Sie die Datei ./src/server.js.
Heben Sie die Auskommentierung der folgenden Abhängigkeit am Anfang der Datei auf:
```
import { getGraphProfile } from './with-graph/graph';
```
Entkommentieren Sie in derselben Datei die Variable graphProfile.
```
let graphProfile={};
```

Heben Sie in derselben Datei die Auskommentierung der folgenden getGraphProfile-Zeilen in der get-profile-Route auf, um das Profil von Microsoft Graph zu erhalten:

// where did the profile come from
profileFromGraph=true;

// get the profile from Microsoft Graph
graphProfile = await getGraphProfile(accessToken);

// log the profile for debugging
console.log(`profile: ${JSON.stringify(graphProfile)}`);

Speichern Sie die Änderungen: STRG + S.

Erneutes Bereitstellen der Back-End-App:

az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name>

4. Überprüfen von Back-End-Code zum Austauschen des Back-End-API-Tokens für das Microsoft Graph-Token

Um das Back-End-API-Zielgruppentoken gegen ein Microsoft Graph-Token auszutauschen, muss die Back-End-App die Mandanten-ID finden und diese als Teil des „MSAL.js“-Konfigurationsobjekts verwenden. Da die Backend-App mit Microsoft als Identitätsanbieter konfiguriert wurde, sind die Mandanten-ID und mehrere andere erforderliche Werte bereits in den App-Service-App-Einstellungen enthalten.

Der folgende Code wird bereits für Sie in der Beispiel-App bereitgestellt. Sie müssen verstehen, warum es da ist und wie es funktioniert, damit Sie diese Arbeit auf andere Apps anwenden können, die Sie erstellen, die dieselbe Funktionalität benötigen.

Untersuchen des Codes zum Abrufen der Mandanten-ID

Öffnen Sie die Datei ./backend/src/with-graph/auth.js.

Überprüfen Sie die getTenantId() Funktion.

export function getTenantId() {

    const openIdIssuer = process.env.WEBSITE_AUTH_OPENID_ISSUER;
    const backendAppTenantId = openIdIssuer.replace(/https:\/\/sts\.windows\.net\/(.{1,36})\/v2\.0/gm, '$1');

    return backendAppTenantId;
}

Diese Funktion ruft die aktuelle Mandanten-ID aus der WEBSITE_AUTH_OPENID_ISSUER Umgebungsvariable ab. Die ID wird mit einem regulären Ausdruck aus der Variablen analysiert.

Code inspizieren, um Graph-Token mithilfe von MSAL.js abzurufen

Überprüfen Sie in der weiterhin geöffneten ./backend/src/with-graph/auth.js-Datei die Funktion getGraphToken().

Erstellen Sie das MSAL.js Konfigurationsobjekt, verwenden Sie die MSAL-Konfiguration, um die clientCredentialAuthority zu erstellen. Konfigurieren Sie die „Im Auftrag von“-Anforderung. Verwenden Sie dann das acquireTokenOnBehalfOf, um das Back-End-API-Zugriffstoken für ein Graph-Zugriffstoken auszutauschen.

// ./backend/src/auth.js
// Exchange current bearerToken for Graph API token
// Env vars were set by App Service
export async function getGraphToken(backEndAccessToken) {

    const config = {
        // MSAL configuration
        auth: {
            // the backend's authentication CLIENT ID 
            clientId: process.env.WEBSITE_AUTH_CLIENT_ID,
            // the backend's authentication CLIENT SECRET 
            clientSecret: process.env.MICROSOFT_PROVIDER_AUTHENTICATION_SECRET,
            // OAuth 2.0 authorization endpoint (v2)
            // should be: https://login.microsoftonline.com/BACKEND-TENANT-ID
            authority: `https://login.microsoftonline.com/${getTenantId()}`
        },
        // used for debugging
        system: {
            loggerOptions: {
                loggerCallback(loglevel, message, containsPii) {
                    console.log(message);
                },
                piiLoggingEnabled: true,
                logLevel: MSAL.LogLevel.Verbose,
            }
        }
    };

    const clientCredentialAuthority = new MSAL.ConfidentialClientApplication(config);

    const oboRequest = {
        oboAssertion: backEndAccessToken,
        // this scope must already exist on the backend authentication app registration 
        // and visible in resources.azure.com backend app auth config
        scopes: ["https://graph.microsoft.com/.default"]
    }

    // This example has App service validate token in runtime
    // from headers that can't be set externally

    // If you aren't using App service's authentication, 
    // you must validate your access token yourself
    // before calling this code
    try {
        const { accessToken } = await clientCredentialAuthority.acquireTokenOnBehalfOf(oboRequest);
        return accessToken;
    } catch (error) {
        console.log(`getGraphToken:error.type = ${error.type}  ${error.message}`);
    }
}

5. Überprüfen des Back-End-Codes für den Zugriff auf Microsoft Graph mit dem neuen Token

Um auf Microsoft Graph als Benutzer zuzugreifen, der bei der Front-End-Anwendung angemeldet ist, umfassen die Änderungen:

Konfiguration der Active Directory-App-Registrierung mit einer API-Berechtigung für den Downstreamdienst, also Microsoft Graph, mit dem erforderlichen Bereich User.Read.
Erteilen Sie der Administratorzustimmung, um den Benutzerzustimmungsbildschirm für die Back-End-App zu umgehen.
Ändern Sie den Anwendungscode, um das von der Front-End-App gesendete Zugriffstoken in ein Zugriffstoken mit der erforderlichen Berechtigung für den downstream-Dienst, Microsoft Graph, zu konvertieren.

Nachdem der Code nun über das richtige Token für Microsoft Graph verfügt, verwenden Sie ihn, um einen Client für Microsoft Graph zu erstellen und dann das Profil des Benutzers abzurufen.

Öffne ./backend/src/graph.js

Rufen Sie zuerst in der getGraphProfile()-Funktion das Token, dann den authentifizierten Client aus dem Token, und schließlich das Profil ab.

// 
import graph from "@microsoft/microsoft-graph-client";
import { getGraphToken } from "./auth.js";

// Create client from token with Graph API scope
export function getAuthenticatedClient(accessToken) {
    const client = graph.Client.init({
        authProvider: (done) => {
            done(null, accessToken);
        }
    });

    return client;
}
export async function getGraphProfile(accessToken) {
    // exchange current backend token for token with 
    // graph api scope
    const graphToken = await getGraphToken(accessToken);

    // use graph token to get Graph client
    const graphClient = getAuthenticatedClient(graphToken);

    // get profile of user
    const profile = await graphClient
        .api('/me')
        .get();

    return profile;
}

6. Testen Sie Ihre Änderungen

Verwenden Sie die Front-End-Website in einem Browser. Möglicherweise müssen Sie Ihr Token aktualisieren, wenn es abgelaufen ist.
Wählen Sie Get user's profileaus. Dadurch wird Ihre Authentifizierung im Bearertoken an das Back-End übergeben.
Das Back-End antwortet mit dem echten Microsoft Graph-Profil für Ihr Konto.

7. Bereinigen

In den vorherigen Schritten haben Sie Azure-Ressourcen in einer Ressourcengruppe erstellt.

Löschen Sie die Ressourcengruppe, indem Sie den folgenden Befehl in Cloud Shell ausführen. Die Ausführung dieses Befehls kann eine Minute in Anspruch nehmen.
```
az group delete --name myAuthResourceGroup
```
Verwenden Sie die Client-ID der Authentifizierungs-Apps, die Sie zuvor in den Abschnitten Enable authentication and authorization für die Back-End- und Front-End-Apps gefunden und notiert haben.

Löschen Sie App-Registrierungen für Front-End- und Back-End-Apps.

# delete app - do this for both frontend and backend client ids
az ad app delete <client-id>

Häufig gestellte Fragen

Ich habe einen Fehler `80049217`, was bedeutet es?

Dieser Fehler bedeutet, dass der Back-End-App-Dienst nicht autorisiert ist, CompactToken parsing failed with error code: 80049217das Microsoft Graph-Token zurückzugeben. Dieser Fehler wird dadurch verursacht, dass in der App-Registrierung die Berechtigung User.Read fehlt.

Ich habe einen Fehler `AADSTS65001`, was bedeutet es?

Dieser Fehler bedeutet, AADSTS65001: The user or administrator has not consented to use the application with ID \<backend-authentication-id>. Send an interactive authorization request for this user and resourcedass die Back-End-Authentifizierungs-App nicht für die Administratorzustimmung konfiguriert wurde. Da der Fehler im Protokoll für die Back-End-App angezeigt wird, kann die Frontend-Anwendung dem Benutzer nicht mitteilen, warum das Profil nicht in der Frontend-App angezeigt wurde.

Wie kann ich eine Verbindung mit einem anderen nachgeschalteten Azure-Dienst als Benutzer herstellen?

In diesem Lernprogramm wird eine API-App veranschaulicht, die bei Microsoft Graph authentifiziert wurde. Die gleichen allgemeinen Schritte können jedoch angewendet werden, um im Auftrag des Benutzers auf einen beliebigen Azure-Dienst zuzugreifen.

Keine Änderung an der Front-End-Anwendung. Nur Änderungen an der Authentifizierungs-App-Registrierung und des Back-End-App-Quellcodes.
Tauschen Sie das auf die Backend-API beschränkte Benutzertoken gegen ein Token für den Downstream-Dienst, auf den Sie zugreifen möchten, aus.
Verwenden Sie das Token im SDK des nachgeschalteten Diensts, um den Client zu erstellen.
Verwenden Sie den nachgeschalteten Client, um auf Dienstfunktionen zuzugreifen.

Nächste Schritte

Feedback

War diese Seite hilfreich?

Last updated on 2025-06-09