Esercitazione: accedere a Microsoft Graph da un'app protetta come utente

Passare ad Azure Resource Explorer e usare l'albero delle risorse per individuare l'app Web. L'URL della risorsa sarà simile a https://resources.azure.com/subscriptions/subscriptionId/resourceGroups/SecureWebApp/providers/Microsoft.Web/sites/SecureWebApp20200915115914.

Azure Resource Explorer viene aperto con l'app Web selezionata nell'albero delle risorse. Nella parte superiore della pagina fare clic su Lettura/Scrittura per abilitare la modifica delle risorse di Azure.

Nel browser di sinistra eseguire il drill-down per config>authsettingsV2.

Nella vista authsettingsV2 selezionare Modifica. Trovare la sezione login di identityProviders - >azureActiveDirectory e aggiungere le impostazioni loginParameters seguenti: "loginParameters":[ "response_type=code id_token","scope=openid offline_access profile https://graph.microsoft.com/User.Read" ].

"identityProviders": {
    "azureActiveDirectory": {
      "enabled": true,
      "login": {
        "loginParameters":[
          "response_type=code id_token",
          "scope=openid offline_access profile https://graph.microsoft.com/User.Read"
        ]
      }
    }
  }
},

Salvare le impostazioni selezionando PUT. Potrebbero essere necessari alcuni minuti prima che questa impostazione diventi effettiva. L'app Web è ora configurata per accedere a Microsoft Graph con un token di accesso appropriato. In caso contrario, Microsoft Graph restituisce un errore che indica che il formato del token compatto non è corretto.

Usare l'interfaccia della riga di comando di Azure per chiamare le API REST dell'app Web del servizio app per ottenere e aggiornare le impostazioni di configurazione così che l'app Web possa chiamare Microsoft Graph. Aprire una finestra di comando e accedere all'interfaccia della riga di comando di Azure:

az login

Ottenere le impostazioni "config/authsettingsv2" esistenti e salvarle in un file authsettings.json locale.

az rest --method GET --url '/subscriptions/{SUBSCRIPTION_ID}/resourceGroups/{RESOURCE_GROUP}/providers/Microsoft.Web/sites/{WEBAPP_NAME}/config/authsettingsv2/list?api-version=2020-06-01' > authsettings.json

Aprire il file authsettings.json usando l'editor di testo preferito. Trovare la sezione login di identityProviders - >azureActiveDirectory e aggiungere le impostazioni loginParameters seguenti: "loginParameters":[ "response_type=code id_token","scope=openid offline_access profile https://graph.microsoft.com/User.Read" ].

"identityProviders": {
    "azureActiveDirectory": {
      "enabled": true,
      "login": {
        "loginParameters":[
          "response_type=code id_token",
          "scope=openid offline_access profile https://graph.microsoft.com/User.Read"
        ]
      }
    }
  }
},

Salvare le modifiche apportate al file authsettings.json e caricare le impostazioni locali nell'app Web:

az rest --method PUT --url '/subscriptions/{SUBSCRIPTION_ID}/resourceGroups/{RESOURCE_GROUP}/providers/Microsoft.Web/sites/{WEBAPP_NAME}/config/authsettingsv2?api-version=2020-06-01' --body @./authsettings.json

Usando la libreria Microsoft.Identity.Web, l'app Web ottiene un token di accesso per l'autenticazione con Microsoft Graph. Nella versione 1.2.0 e successive la libreria Microsoft.Identity.Web si integra con il modulo di autenticazione/autorizzazione del servizio app e può essere eseguita unitamente ad esso. La libreria Microsoft.Identity.Web rileva che l'app Web è ospitata nel servizio app e ottiene il token di accesso dal modulo di autenticazione/autorizzazione del servizio app. Il token di accesso viene quindi passato alle richieste autenticate con l'API Microsoft Graph.

Per vedere questo codice come parte di un'applicazione di esempio, vedere l'esempio in GitHub.

Installare i pacchetti della libreria client

Installare i pacchetti NuGet Microsoft.Identity.Web e Microsoft.Identity.Web.GraphServiceClient nel progetto usando l'interfaccia della riga di comando di .NET o la console di Gestione pacchetti in Visual Studio.

CLI .NET

Aprire una riga di comando e passare alla directory che contiene il file di progetto.

Eseguire i comandi di installazione.

dotnet add package Microsoft.Identity.Web.GraphServiceClient

dotnet add package Microsoft.Identity.Web

Console di gestione pacchetti

Aprire il progetto o la soluzione in Visual Studio, quindi aprire la console selezionando Strumenti>Gestione pacchetti NuGet>Console di Gestione pacchetti.

Eseguire i comandi di installazione.

Install-Package Microsoft.Identity.Web.GraphServiceClient

Install-Package Microsoft.Identity.Web

Startup.cs

Nel file Startup.cs il metodo AddMicrosoftIdentityWebApp aggiunge la libreria Microsoft.Identity.Web all'app Web. Il metodo AddMicrosoftGraph aggiunge il supporto per Microsoft Graph.

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Identity.Web;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;

// Some code omitted for brevity.
public class Startup
{
    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
      services.AddOptions();
      string[] initialScopes = Configuration.GetValue<string>("DownstreamApi:Scopes")?.Split(' ');

      services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
              .AddMicrosoftIdentityWebApp(Configuration.GetSection("AzureAd"))
              .EnableTokenAcquisitionToCallDownstreamApi(initialScopes)
                      .AddMicrosoftGraph(Configuration.GetSection("DownstreamApi"))
                      .AddInMemoryTokenCaches(); 

      services.AddAuthorization(options =>
      {
          // By default, all incoming requests will be authorized according to the default policy
          options.FallbackPolicy = options.DefaultPolicy;
      });
      services.AddRazorPages()
          .AddMvcOptions(options => {})                
          .AddMicrosoftIdentityUI();

      services.AddControllersWithViews()
              .AddMicrosoftIdentityUI();
    }
}

appsettings.json

Microsoft Entra ID specifica la configurazione per la libreria Microsoft.Identity.Web. Nell'interfaccia di amministrazione di Microsoft Entra, selezionare Applicazioni dal menu del portale e quindi selezionare Registrazioni app. Selezionare la registrazione dell'app creata quando è stato abilitato il modulo di autenticazione/autorizzazione del servizio app. (La registrazione dell'app deve avere lo stesso nome dell'app Web.) È possibile trovare l'ID tenant e l'ID client nella pagina di panoramica della registrazione dell'app. Il nome di dominio è disponibile nella pagina di panoramica di Microsoft Entra per il tenant.

Graph specifica l'endpoint Microsoft Graph e gli ambiti iniziali necessari per l'app.

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "[Enter the domain of your tenant, e.g. contoso.onmicrosoft.com]",
    "TenantId": "[Enter 'common', or 'organizations' or the Tenant Id (Obtained from the Entra admin center. Select 'Endpoints' from the 'App registrations' blade and use the GUID in any of the URLs), e.g. aaaabbbb-0000-cccc-1111-dddd2222eeee]",
    "ClientId": "[Enter the Client Id (Application ID obtained from the Microsoft Entra admin center), e.g. 00001111-aaaa-2222-bbbb-3333cccc4444]",
    "ClientSecret": "[Copy the client secret added to the app from the Microsoft Entra admin center]",
    "ClientCertificates": [
    ],
    // the following is required to handle Continuous Access Evaluation challenges
    "ClientCapabilities": [ "cp1" ],
    "CallbackPath": "/signin-oidc"
  },
  "DownstreamApis": {
    "MicrosoftGraph": {
      // Specify BaseUrl if you want to use Microsoft graph in a national cloud.
      // See https://video2.skills-academy.com/graph/deployments#microsoft-graph-and-graph-explorer-service-root-endpoints
      // "BaseUrl": "https://graph.microsoft.com/v1.0",

      // Set RequestAppToken this to "true" if you want to request an application token (to call graph on 
      // behalf of the application). The scopes will then automatically
      // be ['https://graph.microsoft.com/.default'].
      // "RequestAppToken": false

      // Set Scopes to request (unless you request an app token).
      "Scopes": [ "User.Read" ]

      // See https://aka.ms/ms-id-web/downstreamApiOptions for all the properties you can set.
    }
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

Index.cshtml.cs

L'esempio seguente mostra come chiamare Microsoft Graph come utente connesso e ottenere alcune informazioni sull'utente. L'oggetto GraphServiceClient viene inserito nel controller e l'autenticazione è stata configurata automaticamente dalla libreria Microsoft.Identity.Web.

using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Graph;
using System.IO;
using Microsoft.Identity.Web;
using Microsoft.Extensions.Logging;

// Some code omitted for brevity.

[AuthorizeForScopes(Scopes = new[] { "User.Read" })]
public class IndexModel : PageModel
{
    private readonly ILogger<IndexModel> _logger;
    private readonly GraphServiceClient _graphServiceClient;

    public IndexModel(ILogger<IndexModel> logger, GraphServiceClient graphServiceClient)
    {
        _logger = logger;
        _graphServiceClient = graphServiceClient;
    }

    public async Task OnGetAsync()
    {
        try
        {
            var user = await _graphServiceClient.Me.GetAsync();
            ViewData["Me"] = user;
            ViewData["name"] = user.DisplayName;

            using (var photoStream = await _graphServiceClient.Me.Photo.Content.GetAsync())
            {
                byte[] photoByte = ((MemoryStream)photoStream).ToArray();
                ViewData["photo"] = Convert.ToBase64String(photoByte);
            }
        }
        catch (Exception ex)
        {
            ViewData["photo"] = null;
        }
    }
}

Usando una classe AuthProvider personalizzata che incapsula la logica di autenticazione, l'app Web ottiene il token di accesso dell'utente dall'intestazione delle richieste in ingresso. L'istanza AuthProvider rileva che l'app Web è ospitata nel servizio app e ottiene il token di accesso dal modulo di autenticazione/autorizzazione del servizio app. Il token di accesso viene quindi passato al client Microsoft Graph SDK per effettuare una richiesta autenticata all'endpoint /me.

const graphHelper = require('../utils/graphHelper');

// Some code omitted for brevity.

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

    try {
        const graphClient = graphHelper.getAuthenticatedClient(req.session.protectedResources["graphAPI"].accessToken);

        const profile = await graphClient
            .api('/me')
            .get();

        res.render('profile', { isAuthenticated: req.session.isAuthenticated, profile: profile, appServiceName: appServiceName });   
    } catch (error) {
        next(error);
    }
}

Per eseguire query su Microsoft Graph, usare l'SDK Microsoft Graph JavaScript.

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

// Some code omitted for brevity.

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