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

Meer informatie over het maken en configureren van een back-end-App-service om de gebruikersreferenties van een front-end-app te accepteren en deze vervolgens in te wisselen voor een downstream Azure-service. Hierdoor kan een gebruiker zich aanmelden bij een frontend App Service, de referenties doorgeven aan een backend App Service en vervolgens toegang krijgen tot een Azure-service met dezelfde identiteit.

In deze handleiding leer je hoe je:

De backend-authenticatie-app configureren om een token specifiek af te stemmen 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 deze zelfstudie start, maar verwijder de resources niet aan het einde van de zelfstudie. 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

In de zelfstudie ziet u 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:

Vorige zelfstudie behandelde:

Meld u aan bij een front-end-app-service 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 als doelgroep de back-end-API en een toepassingsgebied van user_impersonation.
De registratie van de back-end-app heeft de Microsoft Graph al met het toepassingsbereik User.Read. Dit 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 voor de back-end-app om een token uit te wisselen voor een nieuw token met de reikwijdte van een downstream Azure-service, zoals Microsoft Graph.
Geef code op om de backend-applicatie de nieuwe token te laten gebruiken om toegang te krijgen tot de downstream-service als de huidige geauthenticeerde gebruiker.
Back-end-app opnieuw implementeren met az webapp up.
Aan het einde van deze zelfstudie wordt een echt profiel geretourneerd naar de front-end-app omdat Graph is verbonden.

Deze handleiding doet dit niet:

Wijzig de frontend-app uit de vorige handleiding.
Wijzig de machtiging voor het bereik van de app voor achtergrondauthenticatie, omdat User.Read standaard is toegevoegd aan alle authenticatie-apps.

In de vorige zelfstudie, wanneer de gebruiker zich heeft aangemeld bij de front-end-app, wordt een pop-upvenster weergegeven waarin om toestemming van de gebruiker wordt gevraagd.

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 omzeilen door de app-registratie van de back-end-app in Microsoft Entra ID te configureren om beheerderstoestemming te verlenen. Dit is een instellingswijziging die doorgaans wordt uitgevoerd door een Active Directory-beheerder.

Open Azure Portal en zoek uw onderzoek naar de back-end-App Service.
Zoek de sectie Instellingen -> Verificatie .
Selecteer de id-provider om naar de verificatie-app te gaan.
Selecteer Beheren -> API-machtigingen in de authenticatie-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 vereiste de back-end-app geen npm-pakketten voor verificatie omdat de enige verificatie werd geleverd door het configureren van de identiteitsprovider in de Azure Portal. 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, maar Microsoft Entra ID en MSAL.js rechtstreeks.

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

Open de Azure Cloud Shell en navigeer naar de backend-app van de voorbeeldmap.
```
cd js-e2e-web-app-easy-auth-app-to-app/backend
```
Installeer het Azure MSAL npm-pakket:
```
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 voor het Microsoft Graph-token uit te wisselen

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 de identity provider, staan de Tenant-ID en verschillende andere vereiste waarden al in de instellingen van de App-service-app.

De volgende code is al 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 en gebruik de MSAL-configuratie om de clientCredentialAuthority te maken. Configureer het verzoek namens een ander. Gebruik vervolgens de acquireTokenOnBehalfOf om het toegangstoken voor de back-end-API uit 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. Inspecteer back-endcode 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 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.
Het 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.

Verwijder de resourcegroep door de volgende opdracht uit te voeren in Cloud Shell. Het kan een minuut duren voordat deze opdracht is uitgevoerd.
```
az group delete --name myAuthResourceGroup
```
Gebruik de client-id van de verificatie-apps, 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 frontend and backend 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 app voor back-endverificatie 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 hoe een API-app is geverifieerd bij Microsoft Graph, maar dezelfde algemene stappen kunnen worden toegepast om namens de gebruiker toegang te krijgen tot elke Azure-service.

Geen wijziging in de front-endtoepassing. Alleen wijzigingen in de registratie van de verificatie-app en broncode van de back-end-app.
Wissel het gebruikers-token met bereik voor de backend-API in voor een token voor 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.

Volgende stappen

Feedback

Is deze pagina nuttig?

Last updated on 2025-05-28