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

Informazioni su come accedere alle Microsoft Graph da un'app Web in esecuzione in Azure App Service.

Diagram che mostra l'accesso a Microsoft Graph.

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 da 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 di Microsoft Graph API a un'identità gestita.
  • Chiamare Microsoft Graph da un'app Web usando le identità gestite.

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

Prerequisiti

  • Applicazione Web in esecuzione in Azure App Service con il modulo di autenticazione/autorizzazione App abilitato.

Abilitare l'identità gestita nell'app

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

  1. Nel servizio dell'app selezionare Identità nel riquadro sinistro e quindi selezionare Sistema assegnato.

  2. Verificare che lo Stato sia impostato su Sì.

    In caso contrario, impostarlo su Sì, quindi selezionare Salva e quindi selezionare 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 id oggetto , necessario nella sezione successiva.

    Screenshot che mostra l'identità assegnata dal sistema.

Concedere l'accesso a Microsoft Graph

Quando si accede al Microsoft Graph, l'identità gestita deve disporre delle autorizzazioni appropriate per l'operazione da eseguire. Attualmente, non è possibile assegnare tali autorizzazioni tramite il Microsoft Entra admin center.

  1. Esegui il seguente script per aggiungere le autorizzazioni richieste di Microsoft Graph API all'oggetto servizio principale dell'identità gestita.

    # 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

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

  3. Passare ad Applicazioni. Questo riquadro mostra tutte le entità servizio presenti nel tenant. Selezionare Aggiungi filtri e quindi immettere Tipo di applicazione==Identità gestite.

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

    Se si segue questa esercitazione, esistono due principali di servizio con lo stesso nome visualizzato, ad esempio secureWebApp. 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 nella sezione precedente.

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

    Screenshot che mostra l'opzione Tutte le applicazioni.

  6. In Panoramica selezionare Autorizzazioni. Vengono visualizzate le autorizzazioni aggiunte per Microsoft Graph.

    Screenshot che mostra il riquadro Autorizzazioni.

Chiamare Microsoft Graph con Node.js

L'app Web dispone ora delle autorizzazioni necessarie. Aggiunge anche l'ID client di Microsoft Graph ai parametri di accesso.

La classe DefaultAzureCredential del pacchetto @azure/identity viene usata per ottenere una credenziale del token di accesso per il tuo codice, per autorizzare le richieste ad Azure Storage. 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 di autenticazione e le usa per creare un oggetto cliente 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 di @azure/identità .

All'inizio sono disponibili altre operazioni di installazione e configurazione, ma il @azure/identity pacchetto può essere eseguito insieme al modulo di autenticazione/autorizzazione del servizio app. In un secondo momento, quando l'app Web deve gestire scenari più complessi, è possibile disabilitare il modulo di autenticazione/autorizzazione del servizio app perché il @azure/identity pacchetto fa già parte dell'app.

Installare i pacchetti della libreria client

Installare i pacchetti @azure/identity e i pacchetti @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 Microsoft Graph controller 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 seguente getAuthenticatedClient 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 completi questa esercitazione e non hai più bisogno dell'app web o delle risorse associate, elimina le risorse che hai creato.

Eliminare il gruppo di risorse

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

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

    Screenshot che mostra l'eliminazione del gruppo di risorse.

  3. Immettere il nome del gruppo di risorse da confermare.

L'esecuzione di questo processo potrebbe richiedere alcuni minuti.

Contenuti correlati

In questo tutorial hai imparato come:

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

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

  • Last updated on