Zelfstudie: Authenticatie stroom van App Service via de back-end-API naar Microsoft Graph

Leer hoe u een back-end-App Service-app maakt en configureert om de gebruikersreferenties van een front-end-app te accepteren en deze vervolgens uit te wisselen voor een downstream Azure-service. Met deze methode kan een gebruiker zich aanmelden bij een front-end App Service-app, hun referentie doorgeven aan een back-end App Service en vervolgens toegang krijgen tot een Azure-service met dezelfde identiteit.

In deze handleiding leer je hoe je:

Configureer de backend-authenticatieapp om een token te leveren die specifiek is afgestemd op de downstream Azure-service.
Gebruik JavaScript-code om het toegangstoken van de aangemelde gebruiker uit te wisselen voor een nieuw token voor downstreamservice.
Gebruik JavaScript-code om toegang te krijgen tot de downstreamservice.

Vereiste voorwaarden

Voltooi de vorige zelfstudie, Access Microsoft Graph vanuit een beveiligde JavaScript-app als de gebruiker, voordat u met deze zelfstudie begint. Verwijder de hulpmiddelen aan het einde van de zelfstudie niet. In deze zelfstudie wordt ervan uitgegaan dat u de twee app-services en de bijbehorende verificatie-apps hebt.

In de vorige zelfstudie is Azure Cloud Shell gebruikt als shell voor de Azure CLI. Dit gebruik wordt in deze zelfstudie voortgezet.

Architectuur

De zelfstudie laat zien hoe u de gebruikersreferenties van de front-end-app doorgeeft aan de back-end-app en vervolgens aan een Azure-service. In deze zelfstudie is de downstreamservice Microsoft Graph. De gebruikersreferenties worden gebruikt om hun profiel op te halen uit Microsoft Graph.

Architectuurbeeld van App Service die namens een aangemelde gebruiker verbinding maakt met Microsoft Graph.

Authenticatiestroom voor een gebruiker om Microsoft Graph-informatie te verkrijgen in deze architectuur:

De vorige zelfstudie behandelde:

Meld u aan bij een front-end-app die is geconfigureerd voor het gebruik van Active Directory als id-provider.
De front-end-app-service geeft het token van de gebruiker door aan de back-end-app-service.
De back-end-app is beveiligd zodat de front-end een API-aanvraag kan indienen. Het toegangstoken van de gebruiker heeft een doelgroep van de back-end API en een scope van user_impersonation.
De registratie van de back-endtoepassing heeft al de Microsoft Graph met het bereik User.Read. Dit bereik wordt standaard toegevoegd aan alle app-registraties.
Aan het einde van de vorige zelfstudie werd een nepprofiel geretourneerd naar de front-end-app omdat Graph niet is verbonden.

In deze zelfstudie wordt de architectuur uitgebreid:

Ververleent beheerders toestemming om het scherm voor gebruikerstoestemming voor de back-end-app te omzeilen.
Wijzig de toepassingscode om het toegangstoken dat vanuit de front-end-app is verzonden, te converteren naar een toegangstoken met de vereiste machtiging voor Microsoft Graph.
Geef code op voor het uitwisselen van een back-end-app-token voor een nieuw token met het bereik van de downstream Azure-service, zoals Microsoft Graph.
Geef code op om back-end-apps nieuwe token te laten gebruiken om toegang te krijgen tot downstreamservice als de huidige geverifieerde gebruiker.
Back-end-app opnieuw implementeren met az webapp up.
Aan het einde van deze handleiding wordt een echt profiel geretourneerd naar de front-end-app omdat Graph verbonden is.

Deze handleiding doet dit niet:

Wijzig de front-end-applicatie uit de vorige handleiding.
Wijzig de machtigingsscope van de back-endverificatie-app, omdat User.Read standaard aan alle verificatie-apps wordt toegevoegd.

Wanneer de gebruiker zich in de vorige zelfstudie aanmeldt bij de front-end-app, vraagt een pop-upvenster om toestemming van de gebruiker.

In deze zelfstudie moet de back-end-app, om het gebruikersprofiel van Microsoft Graph te lezen, het toegangstoken van de aangemelde gebruiker uitwisselen voor een nieuw toegangstoken met de vereiste machtigingen voor Microsoft Graph. Omdat de gebruiker niet rechtstreeks is verbonden met de back-end-app, heeft deze geen interactief toegang tot het toestemmingsscherm. U moet dit probleem omzeilen door de app-registratie van de back-end-app in Microsoft Entra-id te configureren om beheerderstoestemming te verlenen. Een Microsoft Entra-beheerder wijzigt deze instelling meestal.

Open de Azure-portal en zoek naar uw resource voor de back-end App Service.
Zoek de sectie Instellingen>Authenticatie.
Selecteer de id-provider om naar de verificatie-app te gaan.
Selecteer Beheren>API-machtigingen in de verificatie-app.
Selecteer Beheerderstoestemming verlenen voor de standaarddirectory.
Selecteer Ja in het pop-upvenster om de toestemming te bevestigen.
Controleer of de kolom Status zegt Toegewezen voor Standaarddirectory. Met deze instelling is de back-end-app niet meer vereist om een toestemmingsscherm weer te geven aan de aangemelde gebruiker en kan deze rechtstreeks een toegangstoken aanvragen. De aangemelde gebruiker heeft toegang tot de User.Read bereikinstelling, omdat dit het standaardbereik is waarmee de app-registratie wordt gemaakt.

2. Npm-pakketten installeren

In de vorige zelfstudie heeft de back-end-app geen npm-pakketten voor verificatie nodig omdat de enige verificatie is geleverd door de id-provider in Azure Portal te configureren. In deze handleiding moet het toegangstoken van de aangemelde gebruiker voor de back-end-API worden uitgewisseld voor een toegangstoken met Microsoft Graph in het bereik daarvan. Deze uitwisseling is voltooid met twee bibliotheken omdat deze exchange geen App Service-verificatie meer gebruikt. In plaats daarvan wordt microsoft Entra-id en MSAL.js rechtstreeks gebruikt.

@azure/msal-node: exchange-token
@microsoft/microsoft-graph-client: verbinding maken met Microsoft Graph

Open De Azure Cloud Shell en ga naar de back-end-app van de voorbeeldmap:
```
cd js-e2e-web-app-easy-auth-app-to-app/backend
```
Installeer het NPM-pakket (Microsoft Authentication Library) van Azure:
```
npm install @azure/msal-node
```

Installeer het Microsoft Graph NPM-pakket:

npm install @microsoft/microsoft-graph-client

3. Voeg code toe om het huidige token voor het Microsoft Graph-token uit te wisselen

De broncode voor het voltooien van deze stap wordt aan u verstrekt. Gebruik de volgende stappen om deze op te nemen.

Open het ./src/server.js-bestand.
Maak de volgende afhankelijkheid aan het begin van het bestand ongedaan:
```
import { getGraphProfile } from './with-graph/graph';
```
Verwijder in hetzelfde bestand de opmerking bij de graphProfile variabele:
```
let graphProfile={};
```

Verwijder in hetzelfde bestand de opmerkingen bij de volgende getGraphProfile regels in de get-profile route om het profiel op te halen uit Microsoft Graph:

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

Sla de wijzigingen op: Ctrl + s.

Implementeer de back-end-app opnieuw:

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

4. Inspecteer back-endcode om back-end-API-token uit te wisselen voor het Microsoft Graph-token

Als u het token voor de back-end-API-doelgroep voor een Microsoft Graph-token wilt wijzigen, moet de back-end-app de tenant-id vinden en deze gebruiken als onderdeel van het MSAL.js configuratieobject. Omdat de back-end-app is geconfigureerd met Microsoft als id-provider, bevinden de tenant-id en verschillende andere vereiste waarden zich al in de App Service-app-instellingen.

De volgende code wordt voor u opgegeven in de voorbeeld-app. U moet weten waarom het er is en hoe het werkt, zodat u dit werk kunt toepassen op andere apps die u bouwt die dezelfde functionaliteit nodig hebben.

Code controleren voor het ophalen van de tenant-id

Open het ./backend/src/with-graph/auth.js-bestand.

Controleer de getTenantId() functie.

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

Met deze functie wordt de huidige tenant-id opgehaald uit de WEBSITE_AUTH_OPENID_ISSUER omgevingsvariabele. De id wordt uit de variabele geparseerd met een reguliere expressie.

Code controleren om graph-token op te halen met behulp van MSAL.js

Controleer de ./backend/src/with-graph/auth.js functie in het getGraphToken() bestand.

Bouw het MSAL.js configuratieobject. Gebruik de MSAL-configuratie om de clientCredentialAuthority te creëren. Configureer de aanvraag namens u. Gebruik vervolgens het acquireTokenOnBehalfOf om het toegangstoken voor de back-end-API in te wisselen voor een Graph-toegangstoken.

// ./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. De back-endcode inspecteren voor toegang tot Microsoft Graph met het nieuwe token

Voor toegang tot Microsoft Graph als gebruiker die is aangemeld bij de front-endtoepassing, zijn de wijzigingen onder andere:

Configuratie van de Active Directory-app-registratie met een API-machtiging voor de downstreamservice, Microsoft Graph, met het benodigde bereik.User.Read
Ververleent beheerders toestemming om het scherm voor gebruikerstoestemming voor de back-end-app te omzeilen.
Wijzig de toepassingscode om het toegangstoken dat vanuit de front-end-app is verzonden, te converteren naar een toegangstoken met de vereiste machtiging voor de downstreamservice, Microsoft Graph.

Nu de code het juiste token voor Microsoft Graph heeft, kunt u deze gebruiken om een client te maken bij Microsoft Graph en vervolgens het profiel van de gebruiker op te halen.

Open de ./backend/src/graph.js

Haal in de getGraphProfile() functie het token op, vervolgens de geverifieerde client van het token en haal vervolgens het profiel op.

// 
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. Uw wijzigingen testen

Gebruik de front-endwebsite in een browser. Mogelijk moet u het token vernieuwen als het is verlopen.
Selecteer Get user's profile. Hiermee wordt uw verificatie in het Bearer-token doorgegeven aan de back-end.
De back-end reageert met het echte Microsoft Graph-profiel voor uw account.

7. Opruimen

In de voorgaande stappen hebt u Azure-resources in een resourcegroep gemaakt.

Als u de resourcegroep wilt verwijderen, voert u de volgende opdracht uit in Cloud Shell. Het uitvoeren van deze opdracht kan een minuut duren.
```
az group delete --name myAuthResourceGroup
```
Gebruik de client-id's die u eerder hebt gevonden en genoteerd in de Enable authentication and authorization secties voor de back-end- en front-end-apps.

Verwijder app-registraties voor zowel front-end- als back-end-apps.

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

Veelgestelde vragen

Ik krijg een foutmelding `80049217`, wat betekent het?

Deze fout CompactToken parsing failed with error code: 80049217betekent dat de back-end-App Service niet is gemachtigd om het Microsoft Graph-token te retourneren. Deze fout wordt veroorzaakt omdat de app-registratie de User.Read machtiging mist.

Ik krijg een foutmelding `AADSTS65001`, wat betekent het?

Deze fout 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 resourcebetekent dat de back-endverificatie-app niet is geconfigureerd voor beheerderstoestemming. Omdat de fout wordt weergegeven in het logboek voor de back-end-app, kan de front-endtoepassing de gebruiker niet laten weten waarom ze hun profiel niet in de front-end-app hebben gezien.

Hoe maak ik als gebruiker verbinding met een andere downstream Azure-service?

In deze zelfstudie ziet u een API-app die is geverifieerd bij Microsoft Graph. Dezelfde algemene stappen kunnen worden toegepast voor toegang tot elke Azure-service namens de gebruiker.

Geen wijziging in de front-endtoepassing. Alleen wijzigingen in de registratie van de authenticatie-app van de back-end en in de broncode van de back-end-app.
Wissel het gebruikersspecifieke token voor een back-end-API in voor een token dat toegang verleent tot de downstreamservice die u wilt benaderen.
Gebruik token in de SDK van de downstreamservice om de client te maken.
Gebruik downstreamclient om toegang te krijgen tot de servicefunctionaliteit.

Feedback

Is deze pagina nuttig?

Last updated on 2026-04-24