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

Erfahren Sie, wie Sie eine Back-End App Service-App erstellen und konfigurieren, um die Benutzeranmeldeinformationen einer Front-End-App zu akzeptieren und diese Anmeldeinformationen für einen nachgeschalteten Azure-Dienst auszutauschen. Mit diesem Ansatz kann sich ein Benutzer bei einer Front-End App Service-App 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 Sie die Back-End-Authentifizierungs-App, um ein Token bereitzustellen, das für den nachgelagerten Azure-Dienst gedacht 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

Führen Sie das vorherige Lernprogramm Zugriff auf Microsoft Graph von einer gesicherten JavaScript-App als Benutzer durch, bevor Sie dieses Lernprogramm starten. Entfernen Sie die Ressourcen nicht am Ende des Lernprogramms. 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 von der Front-End-App bereitgestellten Benutzeranmeldeinformationen 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:

Das vorherige Lernprogramm behandelt:

Melden Sie sich bei einer Front-End-App an, die für die Verwendung von Active Directory als Identitätsanbieter konfiguriert ist.
Der Front-End-App-Dienst übergibt das Token des Benutzers an den Back-End-App-Dienst.
Die Back-End-App ist gesichert, damit das Front-End eine API-Anforderung erstellen kann. Das Zugriffstoken des Benutzers verfügt über eine Zielgruppe für die Back-End-API und den Bereich user_impersonation.
Die Back-End-App-Registrierung verfügt bereits über Microsoft Graph mit dem Bereich User.Read. Dieser Bereich wird standardmäßig allen App-Registrierungen hinzugefügt.
Am Ende des vorherigen Lernprogramms wurde ein gefälschtes Profil an die Front-End-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 Downstream-Azure Service, wie z. B. Microsoft Graph, austauscht.
Stellen Sie Code bereit, damit die 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 erneut bereit.
Am Ende dieses Lernprogramms wird ein echtes Profil an die Front-End-App zurückgegeben, da Graph verbunden ist.

Dieses Lernprogramm funktioniert nicht:

Ändern Sie die Front-End-App aus dem vorherigen Lernprogramm.
Ändern Sie die Scope-Berechtigung der Back-End-Authentifizierungs-App, da User.Read standardmäßig zu allen Authentifizierungs-Apps hinzugefügt wird.

Wenn sich der Benutzer im vorherigen Lernprogramm bei der Front-End-App anmeldet, fordert ein Popupfenster die Zustimmung des Benutzers an.

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 dieses Problem umgehen, indem Sie die App-Registrierung der Back-End-App in der Microsoft Entra-ID konfigurieren, um Administratorzustimmungen zu erteilen. Ein Microsoft Entra-Administrator ändert diese Einstellung in der Regel.

Öffnen Sie das Azure-Portal, und suchen Sie nach Ihrer Ressource für den Back-End-App-Dienst.
Suchen Sie den Abschnitt Einstellungen>Authentifizierung.
Wählen Sie den Identitätsanbieter aus, um zur Authentifizierungs-App zu wechseln.
Wählen Sie in derAuthentifizierungs-App "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 benötigt die Back-End-App keine npm-Pakete für die Authentifizierung, 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 dieser Exchange die App Service-Authentifizierung nicht mehr verwendet. Stattdessen werden microsoft Entra-ID und MSAL.js direkt verwendet.

@azure/msal-node: Austauschtoken
@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 NPM-Paket (Azure Microsoft Authentication Library, MSAL):
```
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 Back-End-App mit Microsoft als Identitätsanbieter konfiguriert ist, befinden sich die Mandanten-ID und mehrere andere erforderliche Werte bereits in den App Service-App-Einstellungen.

Der folgende Code wird 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 ./backend/src/with-graph/auth.js Datei die getGraphToken() Funktion.

Erstellen Sie das MSAL.js Konfigurationsobjekt. Verwenden Sie die MSAL-Konfiguration, um clientCredentialAuthority zu erstellen. Konfigurieren Sie die „Im Auftrag von“-Anforderung. Verwenden Sie dann das acquireTokenOnBehalfOf, um das Back-End-API-Zugriffstoken gegen 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 von Back-End-Code 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.

Öffnen Sie die Datei ./backend/src/graph.js.

Rufen Sie in der getGraphProfile() Funktion das Token ab, dann den authentifizierten Client aus dem Token, und rufen Sie dann 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 die Authentifizierung in deinem Bearer-Token an das Back-End übermittelt.
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.

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

Löschen Sie App-Registrierungen sowohl für Front-End- als auch für Back-End-Apps.

# delete app - do this for both front-end and back-end client ids
az ad app delete --id <client-id>

Häufig gestellte Fragen

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

Dieser Fehler bedeutet, CompactToken parsing failed with error code: 80049217dass der Back-End-App-Dienst nicht autorisiert ist, das 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 Front-End-Anwendung dem Benutzer nicht mitteilen, warum das Profil nicht in der Front-End-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 angewendet werden, um im Namen des Benutzers auf einen beliebigen Azure-Dienst zuzugreifen.

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

Feedback

War diese Seite hilfreich?

Last updated on 2026-05-06