Delen via

Zelfstudie: Stroomverificatie van App Service via back-end-API naar Microsoft Graph

  • Artikel

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 front-end-App Service, de referenties doorgeven aan een back-end-App Service en vervolgens toegang krijgen tot een Azure-service met dezelfde identiteit.

In deze zelfstudie leert u het volgende:

  • De app voor back-endverificatie configureren om een tokenbereik te bieden voor 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.

Vereisten

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. In deze zelfstudie wordt dat gebruik 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 referenties van de gebruiker worden gebruikt om hun profiel op te halen uit Microsoft Graph.

Architectural image of App Service connecting to App Service connecting to Microsoft Graph on behalf of a signed-in user.

Verificatiestroom voor een gebruiker om Microsoft Graph-informatie op te halen in deze architectuur:

Vorige zelfstudie behandeld:

  1. Meld u aan bij een front-end-app-service die is geconfigureerd voor het gebruik van Active Directory als id-provider.
  2. De front-end-App Service geeft het token van de gebruiker door aan de back-end-App Service.
  3. De back-end-app is beveiligd zodat de front-end een API-aanvraag kan indienen. Het toegangstoken van de gebruiker heeft een doelgroep voor de back-end-API en het bereik van user_impersonation.
  4. De registratie van de back-end-app heeft de Microsoft Graph al met het bereik User.Read. Dit wordt standaard toegevoegd aan alle app-registraties.
  5. 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:

  1. Ververleent beheerders toestemming om het scherm voor gebruikerstoestemming voor de back-end-app te omzeilen.
  2. 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.
  3. Geef code op voor het uitwisselen van tokens voor back-end-apps voor een nieuw token met een bereik van downstream Azure-service, zoals Microsoft Graph.
  4. Geef code op om back-end-app nieuwe token te gebruiken om toegang te krijgen tot downstreamservice als de huidige verificatiegebruiker.
  5. Back-end-app opnieuw implementeren met az webapp up.
  6. Aan het einde van deze zelfstudie wordt een echt profiel geretourneerd naar de front-end-app omdat Graph is verbonden.

Deze zelfstudie doet het volgende niet:

  • Wijzig de front-end-app uit de vorige zelfstudie.
  • Wijzig de bereikmachtiging van de app voor back-endverificatie, omdat User.Read deze standaard wordt toegevoegd aan alle verificatie-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.

  1. Open Azure Portal en zoek uw onderzoek naar de back-end-App Service.

  2. Zoek de sectie Instellingen -> Verificatie.

  3. Selecteer de id-provider om naar de verificatie-app te gaan.

  4. Selecteer Beheren -> API-machtigingen in de verificatie-app.

  5. Selecteer Beheerderstoestemming verlenen voor De standaardmap.

    Screenshot of Azure portal authentication app with admin consent button highlighted.

  6. Selecteer Ja in het pop-upvenster om de toestemming te bevestigen.

  7. Controleer of de kolom Status is verleend voor standaardmap. 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.

    Screenshot of Azure portal authentication app with admin consent granted in status column.

2. Npm-pakketten installeren

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

  1. Open Azure Cloud Shell en ga naar de back-end-app van de voorbeeldmap:

    cd js-e2e-web-app-easy-auth-app-to-app/backend

  2. Installeer het Azure MSAL npm-pakket:

    npm install @azure/msal-node

  3. 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.

  1. Open het bestand ./src/server.js.

  2. Verwijder de opmerkingen bij de volgende afhankelijkheid boven aan het bestand:

    import { getGraphProfile } from './with-graph/graph';

  3. Verwijder in hetzelfde bestand de opmerking bij de graphProfile variabele:

    let graphProfile={};

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

  5. Sla de wijzigingen op: Ctrl + s.

  6. 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 dat gebruiken als onderdeel van het MSAL.js-configuratieobject. Omdat de back-end-app die is geconfigureerd met Microsoft als id-provider, de tenant-id en verschillende andere vereiste waarden al in de App Service-app-instellingen staan.

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

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

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

  3. 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 een Graph-token op te halen met MSAL.js

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

  2. Bouw het MSAL.js-configuratieobject en gebruik de MSAL-configuratie om de clientCredentialAuthority te maken. Configureer de aanvraag namens u. 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.

  1. Open de ./backend/src/graph.js

  2. 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

  1. Gebruik de front-endwebsite in een browser. De URL heeft de indeling .https://<front-end-app-name>.azurewebsites.net/ Mogelijk moet u het token vernieuwen als het is verlopen.

  2. Selecteer Get user's profile. Hiermee wordt uw verificatie in het bearer-token doorgegeven aan de back-end.

  3. Het back-end reageert met het echte Microsoft Graph-profiel voor uw account.

    Screenshot of web browser showing frontend application after successfully getting real profile from backend app.

7. Opschonen

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

  1. 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

  2. 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.

  3. 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 <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 Beheer toestemming. 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 kan ik verbinding maken met een andere downstream Azure-service als gebruiker?

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.

  1. Geen wijziging in de front-endtoepassing. Alleen wijzigingen in de registratie van de verificatie-app en broncode van de back-end-app.
  2. Exchange het tokenbereik van de gebruiker voor de back-end-API voor een token naar de downstreamservice die u wilt openen.
  3. Gebruik token in de SDK van de downstreamservice om de client te maken.
  4. Gebruik downstreamclient om toegang te krijgen tot de servicefunctionaliteit.

Volgende stappen