Esercitazione: eseguire il flusso di autenticazione da servizio app tramite l'API back-end a Microsoft Graph

Informazioni su come creare e configurare un'app del servizio app back-end per accettare le credenziali utente di un'app front-end, quindi scambiare tali credenziali per un servizio di Azure downstream. Questo approccio consente a un utente di accedere a un'app del servizio app front-end, passare le credenziali a un servizio app back-end e quindi accedere a un servizio di Azure con la stessa identità.

In questa esercitazione si apprenderà come:

Configurare l'app di autenticazione back-end per fornire un token destinato a un servizio Azure a valle.
Usare il codice JavaScript per scambiare il token di accesso dell'utente connesso per un nuovo token per il servizio downstream.
Usare il codice JavaScript per accedere al servizio downstream.

Prerequisiti

Completare l'esercitazione precedente, Accedere a Microsoft Graph da un'app JavaScript protetta come utente, prima di iniziare questa esercitazione. Non rimuovere le risorse alla fine dell'esercitazione. Questa esercitazione presuppone che siano disponibili i due servizi app e le app di autenticazione corrispondenti.

Nella precedente esercitazione, è stato utilizzato Azure Cloud Shell come ambiente shell per l'uso dell'interfaccia della riga di comando di Azure. Questo tutorial continua l'utilizzo.

Architettura

L'esercitazione illustra come passare le credenziali utente fornite dall'applicazione front-end all'applicazione back-end e quindi a un servizio di Azure. In questa esercitazione il servizio downstream è Microsoft Graph. Le credenziali dell'utente vengono usate per ottenere il proprio profilo da Microsoft Graph.

Immagine dell'architettura del Servizio App che si collega a Microsoft Graph per conto di un utente autenticato.

Flusso di autenticazione per consentire a un utente di ottenere informazioni su Microsoft Graph in questa architettura:

L'esercitazione precedente ha illustrato:

Effettuare l'accesso di un utente su un'app front-end configurata per utilizzare Active Directory come provider di identità.
Il servizio app front-end passa il token dell'utente al servizio app back-end.
L'app back-end è protetta per consentire al front-end di effettuare una richiesta API. Il token di accesso utente ha un gruppo di destinatari per l'API back-end e l'ambito di user_impersonation.
La registrazione dell'app back-end ha già Microsoft Graph con l'ambito User.Read. Questo ambito viene aggiunto per impostazione predefinita a tutte le registrazioni dell'app.
Alla fine dell'esercitazione precedente, un profilo falso è stato restituito all'app front-end perché Graph non era connesso.

Questa esercitazione estende l'architettura del sistema:

Concedere all'amministratore il consenso per ignorare la schermata di consenso dell'utente per l'app back-end.
Modificare il codice dell'applicazione per convertire il token di accesso inviato dall'app front-end a un token di accesso con l'autorizzazione necessaria per Microsoft Graph.
Specificare il codice per far sì che l'applicazione back-end scambi il token con un nuovo token con ambito del servizio Azure a valle, come Microsoft Graph.
Specificare il codice per fare in modo che l'app back-end usi un nuovo token per accedere al servizio downstream come utente autenticato corrente.
Ridistribuire l'app back-end con az webapp up.
Alla fine di questa esercitazione viene restituito un profilo reale all'app front-end perché Graph è connesso.

Questo tutorial non:

Modificare l'app front-end del tutorial precedente.
Modificare l'autorizzazione di ambito dell'app di autenticazione back-end perché User.Read viene aggiunta per impostazione predefinita a tutte le app di autenticazione.

Nell'esercitazione precedente, quando l'utente accede all'app front-end, una finestra popup richiede il consenso dell'utente.

In questa esercitazione, per leggere il profilo utente da Microsoft Graph, l'app back-end deve scambiare il token di accesso dell'utente connesso per un nuovo token di accesso con le autorizzazioni necessarie per Microsoft Graph. Poiché l'utente non è connesso direttamente all'app back-end, non può accedere alla schermata di consenso in modo interattivo. È necessario aggirare questo problema configurando la registrazione dell'app back-end in Microsoft Entra ID per concedere il consenso dell'amministratore. Un amministratore di Microsoft Entra apporta in genere questa modifica all'impostazione.

Aprire il portale di Azure e cercare la risorsa per il Servizio di app back-end.
Trovarela sezione>.
Selezionare il provider di identità per passare all'app di autenticazione.
Nell'app di autenticazione selezionare Gestisci>autorizzazioni API.
Selezionare Concedi consenso amministratore per directory predefinita.
Nella finestra popup selezionare Sì per confermare il consenso.
Verificare che la colonna Stato sia Concessa per la directory predefinita. Con questa impostazione, l'app back-end non è più necessaria per visualizzare una schermata di consenso all'utente connesso e può richiedere direttamente un token di accesso. L'utente connesso ha accesso all'impostazione dell'ambito User.Read perché è l'ambito predefinito con cui viene creata la registrazione dell'app.

2. Installare pacchetti npm

Nell'esercitazione precedente l'app back-end non ha bisogno di pacchetti npm per l'autenticazione perché l'unica autenticazione è stata fornita configurando il provider di identità nel portale di Azure. In questa esercitazione, il token di accesso dell'utente connesso per l'API back-end deve essere scambiato per un token di accesso con Microsoft Graph nel relativo ambito. Questo scambio viene completato con due librerie perché questo scambio non usa più l'autenticazione del servizio app. Usa invece direttamente microsoft Entra ID e MSAL.js.

@azure/msal-node: token di scambio
@microsoft/microsoft-graph-client: connettersi a Microsoft Graph

Aprire Azure Cloud Shell e passare all'app back-end della directory esemplare:
```
cd js-e2e-web-app-easy-auth-app-to-app/backend
```
Installa il pacchetto npm di Azure Microsoft Authentication Library (MSAL):
```
npm install @azure/msal-node
```

Installare il pacchetto npm di Microsoft Graph:

npm install @microsoft/microsoft-graph-client

3. Aggiungere codice per scambiare il token corrente per il token Microsoft Graph

Il codice sorgente per completare questo passaggio viene fornito. Per includerlo, seguire questa procedura.

Aprire il file ./src/server.js.
Decommentare la seguente dipendenza all’inizio del file:
```
import { getGraphProfile } from './with-graph/graph';
```
Nello stesso file, decommenta la variabile graphProfile.
```
let graphProfile={};
```

Nello stesso file rimuovere il commento dalle seguenti getGraphProfile righe nella get-profile route per ottenere il profilo da 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)}`);

Salvare le modifiche: CTRL + S.

Ridistribuire l'applicazione back-end:

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

4. Esaminare il codice back-end per convertire il token API di back-end con il token Microsoft Graph

Per modificare il token di pubblico dell'API back-end per un token di Microsoft Graph, l'app back-end deve trovare l'ID Tenant e utilizzarlo come parte dell'oggetto di configurazione di MSAL.js. Poiché l'app back-end è configurata con Microsoft come provider di identità, l'ID tenant e diversi altri valori obbligatori sono già presenti nelle impostazioni dell'app del servizio App Service.

Nell'app di esempio viene fornito il codice seguente. È necessario capire perché è presente e come funziona in modo da poter applicare questo lavoro ad altre app che si creano che necessitano di questa stessa funzionalità.

Esaminare il codice per ottenere l'ID tenant

Aprire il file ./backend/src/with-graph/auth.js.

Esaminare la funzione getTenantId().

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

Questa funzione ottiene l'ID tenant corrente dalla WEBSITE_AUTH_OPENID_ISSUER variabile di ambiente. L'ID viene estratto dalla variabile con un'espressione regolare.

Esaminare il codice per ottenere il token Graph usando MSAL.js

Esaminare la funzione getGraphToken() nel file ./backend/src/with-graph/auth.js.

Compilare l'oggetto di configurazione MSAL.js. Usare la configurazione MSAL per creare clientCredentialAuthority. Configurare la richiesta per conto di. Usare quindi acquireTokenOnBehalfOf per scambiare il token di accesso all'API back-end per un token di accesso graph.

// ./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. Esaminare il codice back-end per accedere a Microsoft Graph con il nuovo token

Per accedere a Microsoft Graph come utente che ha eseguito l'accesso all'applicazione front-end, le modifiche includono:

Configurazione della registrazione dell'app Active Directory con un'autorizzazione API per il servizio downstream, Microsoft Graph, con l'ambito necessario di User.Read.
Concedere all'amministratore il consenso per ignorare la schermata di consenso dell'utente per l'app back-end.
Modificare il codice dell'applicazione per convertire il token di accesso inviato dall'app front-end a un token di accesso con l'autorizzazione necessaria per il servizio downstream, Microsoft Graph.

Ora che il codice ha il token corretto per Microsoft Graph, usarlo per creare un client a Microsoft Graph e quindi ottenere il profilo dell'utente.

Aprire il file ./backend/src/graph.js

Nella funzione getGraphProfile(), ottieni il token, poi il client autenticato dal token, e infine ottieni il profilo.

// 
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. Testare le modifiche

Usare l'interfaccia utente del sito web in un browser. Potrebbe essere necessario aggiornare il token se è scaduto.
Seleziona Get user's profile. Questa operazione passa l'autenticazione nel token di connessione al back-end.
Il back-end risponde con il profilo reale di Microsoft Graph per l'account.

7. Eseguire la pulizia.

Nei passaggi precedenti sono state create risorse di Azure in un gruppo di risorse.

Per eliminare il gruppo di risorse, eseguire il comando seguente in Cloud Shell. L'esecuzione del comando può richiedere un minuto.
```
az group delete --name myAuthResourceGroup
```
Usare gli ID Client trovati in precedenza e annotati nelle sezioni per le app back-end e front-end. Enable authentication and authorization sections for the back-end and front-end apps.

Eliminare le registrazioni delle app sia per le app front-end che per le app back-end.

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

Domande frequenti

Si è verificato un errore `80049217`, cosa significa?

Questo errore indica CompactToken parsing failed with error code: 80049217che il servizio app back-end non è autorizzato a restituire il token di Microsoft Graph. Questo errore è causato perché la registrazione dell'app non ha l'autorizzazione User.Read .

Si è verificato un errore `AADSTS65001`, cosa significa?

Questo errore indica 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 resourceche l'app di autenticazione back-end non è stata configurata per il consenso amministratore. Poiché l'errore viene visualizzato nel log per l'app back-end, l'applicazione front-end non può indicare all'utente perché non ha visualizzato il proprio profilo nell'app front-end.

Come ci si connette a un altro servizio downstream di Azure come utente?

Questa esercitazione illustra un'app per le API autenticata in Microsoft Graph. Gli stessi passaggi generali possono essere applicati per accedere a qualsiasi servizio di Azure per conto dell'utente.

Nessuna modifica all'applicazione front-end. Solo le modifiche apportate alla registrazione dell'app di autenticazione del back-end e al codice sorgente dell'app back-end.
Scambiando il token dell'utente che ha accesso all'API back-end per un token per il servizio downstream che si desidera utilizzare.
Usare il token nell'SDK del servizio downstream per creare il client.
Usare il client downstream per accedere alle funzionalità del servizio.

Commenti e suggerimenti

Questa pagina è stata utile?

Last updated on 2026-05-05