Esercitazione: Accedere a Microsoft Graph come app da un'app JavaScript protetta

Informazioni su come accedere a Microsoft Graph da un'app Web in esecuzione nel Servizio app di Azure.

Si vuole chiamare Microsoft Graph per l'app Web. Un modo sicuro per concedere all'app Web l'accesso ai dati consiste nell'usare un'identità gestita assegnata dal sistema. Un'identità gestita di Microsoft Entra ID consente al servizio app di accedere alle risorse tramite il controllo degli accessi in base al ruolo, senza richiedere le credenziali dell'app. Dopo aver assegnato un'identità gestita all'app Web, Azure si occupa della creazione e della distribuzione di un certificato. Non occorre preoccuparsi di gestire i segreti o le credenziali dell'app.

In questa esercitazione apprenderai a:

• Creare un'identità gestita assegnata dal sistema in un'app Web.
• Aggiungere le autorizzazioni dell'API Microsoft Graph a un'identità gestita.
• Chiamare Microsoft Graph da un'app Web usando identità gestite.

Se non si ha un account Azure, creare un account gratuito prima di iniziare.

Prerequisiti

• Un'applicazione Web in esecuzione nel Servizio app di Azure con il modulo di autenticazione/autorizzazione del servizio app abilitato.

Abilitare l'identità gestita nell'app

Se si crea e si pubblica l'app Web tramite Visual Studio, l'identità gestita è già stata abilitata automaticamente nell'app.

1. Nel servizio app selezionare Identità nel riquadro sinistro e quindi selezionare Assegnata dal sistema.

2. Verificare che lo Stato sia impostato su Sì. In caso contrario, selezionare Salva e quindi Sì per abilitare l'identità gestita assegnata dal sistema. Una volta abilitata l'identità gestita, lo stato è impostato su Sì e l'ID oggetto è disponibile.

3. Prendere nota del valore di ID oggetto, che sarà necessario nel passaggio successivo.

Concedere l'accesso a Microsoft Graph

Quando si accede a Microsoft Graph, l'identità gestita deve disporre delle autorizzazioni appropriate per l'operazione da eseguire. Attualmente, non è possibile assegnare tali autorizzazioni tramite l'interfaccia di amministrazione di Microsoft Entra.

1. Eseguire lo script seguente per aggiungere le autorizzazioni dell'API Microsoft Graph necessarie all'oggetto entità servizio dell'identità gestita.

   PowerShell

   # Install the module.
   # Install-Module Microsoft.Graph -Scope CurrentUser
   
   # The tenant ID
   $TenantId = "aaaabbbb-0000-cccc-1111-dddd2222eeee"
   
   # The name of your web app, which has a managed identity.
   $webAppName = "SecureWebApp-20201106120003" 
   $resourceGroupName = "SecureWebApp-20201106120003ResourceGroup"
   
   # The name of the app role that the managed identity should be assigned to.
   $appRoleName = "User.Read.All"
   
   # Get the web app's managed identity's object ID.
   Connect-AzAccount -Tenant $TenantId
   $managedIdentityObjectId = (Get-AzWebApp -ResourceGroupName $resourceGroupName -Name $webAppName).identity.principalid
   
   Connect-MgGraph -TenantId $TenantId -Scopes 'Application.Read.All','AppRoleAssignment.ReadWrite.All'
   
   # Get Microsoft Graph app's service principal and app role.
   $serverApplicationName = "Microsoft Graph"
   $serverServicePrincipal = (Get-MgServicePrincipal -Filter "DisplayName eq '$serverApplicationName'")
   $serverServicePrincipalObjectId = $serverServicePrincipal.Id
   
   $appRoleId = ($serverServicePrincipal.AppRoles | Where-Object {$_.Value -eq $appRoleName }).Id
   
   # Assign the managed identity access to the app role.
   New-MgServicePrincipalAppRoleAssignment `
       -ServicePrincipalId $managedIdentityObjectId `
       -PrincipalId $managedIdentityObjectId `
       -ResourceId $serverServicePrincipalObjectId `
       -AppRoleId $appRoleId
   

   Interfaccia della riga di comando di Azure

   az login
   
   webAppName="SecureWebApp-20201106120003"
   
   spId=$(az resource list -n $webAppName --query [*].identity.principalId --out tsv)
   
   graphResourceId=$(az ad sp list --display-name "Microsoft Graph" --query [0].id --out tsv)
   
   appRoleId=$(az ad sp list --display-name "Microsoft Graph" --query "[0].appRoles[?value=='User.Read.All' && contains(allowedMemberTypes, 'Application')].id" --output tsv)
   
   uri=https://graph.microsoft.com/v1.0/servicePrincipals/$spId/appRoleAssignments
   
   body="{'principalId':'$spId','resourceId':'$graphResourceId','appRoleId':'$appRoleId'}"
   
   az rest --method post --uri $uri --body $body --headers "Content-Type=application/json"
   

2. Dopo aver eseguito lo script, è possibile verificare nell’interfaccia di amministrazione di Microsoft Entra che le autorizzazioni API necessarie siano assegnate all'identità gestita.

3. Passare a Applicazioni e quindi selezionare Applicazioni aziendali. Questo riquadro mostra tutte le entità servizio presenti nel tenant. Aggiungere un filtro per "Tipo di applicazione==Identità gestite" e selezionare l'entità servizio per l'identità gestita.

   Se si segue questa esercitazione, sono disponibili due entità servizio con lo stesso nome visualizzato, ad esempio SecureWebApp2020094113531. L'entità servizio con URL della home page rappresenta l'app Web nel tenant. L'entità servizio visualizzata in Identità gestitenon deve avere un URL della home page elencato e l'ID oggetto deve corrispondere al valore ID oggetto dell'identità gestita nel passaggio precedente.

4. Selezionare l'entità servizio per l'identità gestita.

   

5. In Panoramica selezionare Autorizzazioni per visualizzare le autorizzazioni aggiunte per Microsoft Graph.

   

Chiamare Microsoft Graph con Node.js

L'app Web ha ora le autorizzazioni necessarie e aggiunge inoltre l'ID client di Microsoft Graph ai parametri di accesso.

La classe DefaultAzureCredential del pacchetto @azure/identity viene usata per ottenere le credenziali token per il codice per autorizzare le richieste ad Archiviazione di Azure. Creare un'istanza della classe DefaultAzureCredential, che usa l'identità gestita per recuperare token e collegarli al client del servizio. L'esempio di codice seguente ottiene le credenziali del token autenticato e le usa per creare un oggetto client del servizio, che recupera gli utenti nel gruppo.

Nota

Il pacchetto @azure/identity non è necessario nell'app Web per l'autenticazione/autorizzazione di base o per autenticare le richieste con Microsoft Graph. È possibile chiamare in modo sicuro le API downstream solo con il modulo di autenticazione/autorizzazione del servizio app abilitato.

Tuttavia, il modulo di autenticazione/autorizzazione del servizio app è progettato per scenari di autenticazione più semplici. Per scenari più complessi, ad esempio la gestione di attestazioni personalizzate, è necessario il pacchetto @azure/identity. Inizialmente richiede un maggior numero operazioni di configurazione, ma il pacchetto @azure/identity può essere eseguito insieme al modulo di autenticazione/autorizzazione del servizio app. In seguito, quando l'app Web deve gestire scenari più complessi, è possibile disabilitare il modulo di autenticazione/autorizzazione del servizio app e @azure/identity farà già parte dell'app.

Installare i pacchetti della libreria client

Installare i pacchetti @azure/identity e @microsoft/microsoft-graph-client nel progetto con npm.

npm install @azure/identity @microsoft/microsoft-graph-client

Configurare le informazioni di autenticazione

// partial code in app.js
const appSettings = {
    appCredentials: {
        clientId: process.env.WEBSITE_AUTH_CLIENT_ID, // Enter the client Id here,
        tenantId: "common", // Enter the tenant info here,
        clientSecret: process.env.MICROSOFT_PROVIDER_AUTHENTICATION_SECRET // Enter the client secret here,
    },
    authRoutes: {
        redirect: "/.auth/login/aad/callback", // Enter the redirect URI here
        unauthorized: "/unauthorized" // enter the relative path to unauthorized route
    },
}

Chiamare Microsoft Graph per conto dell'app

Il codice seguente illustra come chiamare il controller Microsoft Graph come app e ottenere alcune informazioni sull'utente.

// graphController.js

const graphHelper = require('../utils/graphHelper');
const { DefaultAzureCredential } = require("@azure/identity");

exports.getUsersPage = async(req, res, next) => {

    const defaultAzureCredential = new DefaultAzureCredential();
    
    try {
        // get app's access token scoped to Microsoft Graph
        const tokenResponse = await defaultAzureCredential.getToken("https://graph.microsoft.com/.default");

        // use token to create Graph client
        const graphClient = graphHelper.getAuthenticatedClient(tokenResponse.token);

        // return profiles of users in Graph
        const users = await graphClient
            .api('/users')
            .get();

        res.render('users', { user: req.session.user, users: users });   
    } catch (error) {
        next(error);
    }
}

Il codice precedente si basa sulla funzione getAuthenticatedClient seguente per restituire il client Microsoft Graph.

// utils/graphHelper.js

const graph = require('@microsoft/microsoft-graph-client');

getAuthenticatedClient = (accessToken) => {
    // Initialize Graph client
    const client = graph.Client.init({
        // Use the provided access token to authenticate requests
        authProvider: (done) => {
            done(null, accessToken);
        }
    });

    return client;
}

Pulire le risorse

Se l'esercitazione è stata completata e l'app Web o le risorse associate non sono più necessarie, pulire le risorse create.

Eliminare il gruppo di risorse

Nel portale di Azure selezionare Gruppi di risorse dal menu del portale e selezionare il gruppo di risorse contenente il servizio app e il piano di servizio app.

Fare clic su Elimina gruppo di risorse per eliminare il gruppo e tutte le risorse al suo interno.

L'esecuzione di questo comando potrebbe richiedere diversi minuti.

Passaggi successivi

Questa esercitazione ha descritto come:

• Creare un'identità gestita assegnata dal sistema in un'app Web.
• Aggiungere le autorizzazioni dell'API Microsoft Graph a un'identità gestita.
• Chiamare Microsoft Graph da un'app Web usando identità gestite.

Informazioni su come connettere un'app .NET Core o un'app Node.js a un database.