Esercitazione: Accedere Microsoft Graph da un'app .NET protetta come utente

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

Diagramma che mostra l'accesso a Microsoft Graph.

Si vuole aggiungere l'accesso a Microsoft Graph dall'app Web ed eseguire alcune azioni come utente connesso. Questa sezione descrive come concedere le autorizzazioni delegate all'app Web e ottenere le informazioni sul profilo dell'utente che ha eseguito l'accesso da Azure Active Directory (Azure AD).

In questa esercitazione verranno illustrate le procedure per:

  • Concedere le autorizzazioni delegate a un'app Web.
  • Chiamare Microsoft Graph da un'app Web per un utente connesso.

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

Prerequisiti

Concedere l'accesso front-end per chiamare Microsoft Graph

Dopo aver abilitato l'autenticazione e l'autorizzazione nell'app Web, l'app Web viene registrata con Microsoft Identity Platform ed è supportata da un'applicazione Azure AD. In questo passaggio si concedono all'app Web le autorizzazioni necessarie per accedere a Microsoft Graph per l'utente. Tecnicamente, si concedono all'applicazione Azure AD dell'app Web le autorizzazioni per accedere all'applicazione Azure AD di Microsoft Graph per l'utente.

  1. Nel menu del portale di Azure selezionare Azure Active Directory oppure cercare e selezionare Azure Active Directory da qualsiasi pagina.

  2. Selezionare Registrazioni app>Applicazioni di cui si è proprietari>Visualizza tutte le applicazioni nella directory. Selezionare il nome dell'app Web e quindi Autorizzazioni API.

  3. Selezionare Aggiungi un'autorizzazione, quindi API Microsoft e Microsoft Graph.

  4. Selezionare Autorizzazioni delegate e quindi User.Read nell'elenco. Selezionare Aggiungi autorizzazioni.

Configurare il servizio app per la restituzione di un token di accesso utilizzabile

L'app Web ha ora le autorizzazioni necessarie per accedere a Microsoft Graph come utente connesso. In questo passaggio si configurano l'autenticazione e l'autorizzazione del servizio app affinché forniscano un token di accesso utilizzabile per accedere a Microsoft Graph. Per questo passaggio, è necessario aggiungere l'ambito User.Read per il servizio downstream (Microsoft Graph): https://graph.microsoft.com/User.Read.

Importante

Se non si configura il servizio app per restituire un token di accesso utilizzabile, viene visualizzato un errore CompactToken parsing failed with error code: 80049217 quando si chiamano le API Microsoft Graph nel codice.

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.

  1. Nella parte superiore della pagina fare clic su Lettura/Scrittura per abilitare la modifica delle risorse di Azure.

  2. Nel browser a sinistra eseguire il drill-down per configurare>authsettingsV2.

  3. Nella visualizzazione authsettingsV2 selezionare Modifica.

  4. Trovare la sezione di accesso 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"
            ]
          }
        }
      }
    },
    
  5. 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.

Chiamare Microsoft Graph con .NET

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

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 visualizzare questo codice come parte di un'applicazione di esempio, vedere:

Nota

La libreria Microsoft.Identity.Web non è necessaria 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 gli scenari più complessi, ad esempio la gestione di attestazioni personalizzate, è necessario usare la libreria Microsoft.Identity.Web o Microsoft Authentication Library. Inizialmente richiede un maggior numero operazioni di configurazione, ma la libreria Microsoft.Identity.Web può essere eseguita 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 la libreria Microsoft.Identity.Web farà già parte dell'app.

Installare i pacchetti della libreria client

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

Riga di comando di .NET Core

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

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

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.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
                .AddMicrosoftIdentityWebApp(Configuration.GetSection("AzureAd"))
                    .EnableTokenAcquisitionToCallDownstreamApi()
                        .AddMicrosoftGraph(Configuration.GetSection("Graph"))
                        .AddInMemoryTokenCaches();

        services.AddRazorPages();
    }
}

appsettings.json

AzureAd specifica la configurazione per la libreria Microsoft.Identity.Web. Nel menu del portale di Azure selezionare Azure Active Directory e quindi Registrazioni app. Selezionare la registrazione dell'app creata quando è stato abilitato il modulo di autenticazione/autorizzazione del servizio app. Il nome visualizzato della registrazione app dovrebbe essere uguale a quello dell'app Web. L'ID tenant e l'ID client sono disponibili nella pagina di panoramica della registrazione app. Il nome di dominio è disponibile nella pagina di panoramica di Azure AD per il tenant.

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

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "fourthcoffeetest.onmicrosoft.com",
    "TenantId": "[tenant-id]",
    "ClientId": "[client-id]",
    // To call an API
    "ClientSecret": "[secret-from-portal]", // Not required by this scenario
    "CallbackPath": "/signin-oidc"
  },

  "Graph": {
    "BaseUrl": "https://graph.microsoft.com/v1.0",
    "Scopes": "user.read"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

Chiamare Microsoft Graph per conto dell'utente

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.

// Index.cshtml.cs
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.Request().GetAsync();
            ViewData["Me"] = user;
            ViewData["name"] = user.DisplayName;

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

Pulire le risorse

Se sono stati completati tutti i passaggi di questa esercitazione in più parti, sono stati creati un servizio app, un piano di hosting del servizio app e un account di archiviazione in un gruppo di risorse. È stata anche creata una registrazione app in Azure Active Directory. Quando non sono più necessarie, eliminare le risorse e la registrazione per non continuare ad accumulare costi.

In questa esercitazione verranno illustrate le procedure per:

  • Eliminare le risorse di Azure create durante l'esercitazione.

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.

Screenshot che mostra l'eliminazione del gruppo di risorse.

L'esecuzione di questo comando potrebbe richiedere diversi minuti.

Eliminare la registrazione app

Nel menu del portale selezionare Azure Active Directory>Registrazioni app. Selezionare quindi l'applicazione creata. Screenshot che mostra la selezione della registrazione app.

Nella panoramica della registrazione app selezionare Elimina. Screenshot che mostra l'eliminazione della registrazione app.

Passaggi successivi

In questa esercitazione sono state illustrate le procedure per:

  • Concedere le autorizzazioni delegate a un'app Web.
  • Chiamare Microsoft Graph da un'app Web per un utente connesso.