Zelfstudie: Microsoft Graph openen vanuit een beveiligde .NET-app als de gebruiker

Ontdek hoe u toegang tot Microsoft Graph krijgt vanuit een web-app die wordt uitgevoerd in Azure App Service.

Diagram that shows accessing Microsoft Graph.

U wilt toegang tot Microsoft Graph vanuit uw web-app toevoegen en een actie uitvoeren als de aangemelde gebruiker. In deze sectie wordt beschreven hoe u gedelegeerde machtigingen verleent aan de web-app en hoe u de profielgegevens van de aangemelde gebruiker opvragen uit Microsoft Entra ID.

In deze zelfstudie leert u het volgende:

  • Gedelegeerde machtigingen verlenen aan een web-app.
  • Microsoft Graph vanuit een web-app aanroepen voor een aangemelde gebruiker.

Als u geen Azure-abonnement hebt, kunt u een gratis Azure-account maken voordat u begint.

Vereisten

De front-end toegang verlenen om Microsoft Graph aan te roepen

Nu u verificatie en autorisatie voor uw web-app hebt ingeschakeld, wordt de web-app geregistreerd bij het Microsoft Identity Platform en wordt deze ondersteund door een Microsoft Entra-toepassing. In deze stap geeft u de web-app machtigingen voor toegang tot Microsoft Graph voor de gebruiker. (Technisch gezien geeft u de Microsoft Entra-toepassing van de web-app de machtigingen voor toegang tot de Microsoft Graph Microsoft Entra-toepassing voor de gebruiker.)

  1. Selecteer Toepassingen in het Microsoft Entra-beheercentrum.

  2. Selecteer App-registraties>Toepassingen in eigendom>Alle toepassingen in deze map weergeven. Selecteer de naam van uw web-app en selecteer vervolgens API-machtigingen.

  3. Selecteer Een machtiging toevoegen en selecteer vervolgens Microsoft-API's en Microsoft Graph.

  4. Selecteer Gedelegeerde machtigingen en selecteer vervolgens User.Read in de lijst. Selecteer Machtigingen toevoegen.

App Service configureren zodat een bruikbaar toegangstoken wordt geretourneerd

De web-app beschikt nu over de vereiste machtigingen voor toegang tot Microsoft Graph als de aangemelde gebruiker. In deze stap configureert u App Service-verificatie en -autorisatie zodat u een bruikbaar toegangstoken hebt voor toegang tot Microsoft Graph. Voor deze stap moet u het bereik User.Read toevoegen voor de downstreamservice (Microsoft Graph): https://graph.microsoft.com/User.Read.

Belangrijk

Als u App Service niet configureert om een bruikbaar toegangstoken te retourneren, ziet u de foutmelding CompactToken parsing failed with error code: 80049217 wanneer u Microsoft Graph-API's in uw code aanroept.

Ga naar Azure Resource Explorer en gebruik de resourcestructuur om de web-app te zoeken. De resource-URL moet er ongeveer zo uitzien: https://resources.azure.com/subscriptions/subscriptionId/resourceGroups/SecureWebApp/providers/Microsoft.Web/sites/SecureWebApp20200915115914.

De Azure Resource Explorer wordt nu geopend met uw web-app geselecteerd in de resourcestructuur.

  1. Selecteer boven aan de pagina Lezen/schrijven om de Azure-resources te kunnen bewerken.

  2. In de linkerbrowser kunt u inzoomen op configuratieauthsettingsV2>.

  3. Selecteer Bewerken in de weergave authsettingsV2.

  4. Zoek de aanmeldingssectie van identityProviders ->azureActiveDirectory en voeg de volgende loginParameters-instellingen toe: "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. Sla de instellingen op door PUT te selecteren. Het kan enkele minuten duren voordat deze instelling is doorgevoerd. Uw web-app is nu geconfigureerd voor toegang tot Microsoft Graph met het juiste toegangstoken. Als u dit niet goed configureert, retourneert Microsoft Graph een foutmelding waarin staat dat de indeling van het compacte token incorrect is.

Microsoft Graph aanroepen met .NET

Uw web-app heeft nu de vereiste machtigingen en voegt tevens de client-id van Microsoft Graph toe aan de aanmeldingsparameters.

De web-app maakt gebruik van de Microsoft.Identity.Web-bibliotheek om een toegangstoken op te halen voor verificatie bij Microsoft Graph. In versie 1.2.0 en later integreert de Microsoft.Identity.Web-bibliotheek met de module App Service-verificatie/-autorisatie en kan de bibliotheek daarnaast worden uitgevoerd. Microsoft.Identity.Web detecteert dat de web-app in App Service wordt gehost en haalt het toegangstoken op uit de module App Service-verificatie/-autorisatie. Het toegangstoken wordt vervolgens aan geverifieerde aanvragen doorgegeven met de Microsoft Graph-API.

Als u deze code wilt zien als onderdeel van een voorbeeldtoepassing, raadpleegt u het volgende:

Notitie

De Microsoft.Identity.Web-bibliotheek is niet vereist in de web-app voor basisverificatie/-autorisatie of om aanvragen te verifiëren met Microsoft Graph. Het is mogelijk om downstream-API's veilig aan te roepen terwijl alleen de module App Service-verificatie/-autorisatie is ingeschakeld.

De module App Service-verificatie/-autorisatie is echter ontworpen voor eenvoudigere verificatiescenario's. Voor ingewikkeldere scenario's (bijvoorbeeld de verwerking van aangepaste claims) hebt u de Microsoft.Identity.Web-bibliotheek of Microsoft Authentication Library nodig. Aan het begin is er wat meer instellings- en configuratiewerk, maar de Microsoft.Identity.Web-bibliotheek kan naast de module App Service-verificatie/-autorisatie worden uitgevoerd. Later, wanneer uw web-app ingewikkeldere scenario's moet verwerken, kunt u de module App Service-verificatie/-autorisatie uitschakelen en zal Microsoft.Identity.Web al onderdeel van uw app zijn.

Clientbibliotheekpakketten installeren

Installeer de Pakketten Microsoft.Identity.Web en Microsoft.Identity.Web.MicrosoftGraph NuGet in uw project met behulp van de opdrachtregelinterface van .NET Core of de Pakketbeheer Console in Visual Studio.

.NET Core-opdrachtregel

Open een opdrachtregel en ga naar de map die uw projectbestand bevat.

Voer de installatieopdrachten uit.

dotnet add package Microsoft.Identity.Web.MicrosoftGraph

dotnet add package Microsoft.Identity.Web

Package Manager Console

Open het project/de oplossing in Visual Studio en open de console met de opdracht Hulpprogramma's>NuGet Package Manager>Package Manager Console.

Voer de installatieopdrachten uit.

Install-Package Microsoft.Identity.Web.GraphServiceClient

Install-Package Microsoft.Identity.Web

Startup.cs

In het bestand Startup.cs wordt Microsoft.Identity.Web aan uw web-app toegevoegd met de methode AddMicrosoftIdentityWebApp. Met de methode AddMicrosoftGraph wordt Microsoft Graph-ondersteuning toegevoegd. Lees dit voor informatie over het beheren van incrementele toestemming en voorwaardelijke toegang.

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

AzureAd specificeert de configuratie voor de Microsoft.Identity.Web-bibliotheek. Selecteer in het Microsoft Entra-beheercentrum toepassingen in het portalmenu en selecteer vervolgens App-registraties. Selecteer de app-registratie die is gemaakt toen u de module App Service-verificatie/-autorisatie hebt ingeschakeld. (De app-registratie moet dezelfde naam hebben als uw web-app.) U vindt de tenant-id en client-id op de overzichtspagina van de app-registratie. De domeinnaam vindt u op de overzichtspagina van Microsoft Entra voor uw tenant.

Graph specificeert het Microsoft Graph-eindpunt en de initiële bereiken die de app nodig heeft.

{
  "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 Microsoft Entra admin center. Select 'Endpoints' from the 'App registrations' blade and use the GUID in any of the URLs), e.g. da41245a5-11b3-996c-00a8-4d99re19f292]",
    "ClientId": "[Enter the Client Id (Application ID obtained from the Microsoft Entra admin center), e.g. ba74781c2-53c2-442a-97c2-3d60re42f403]",
    "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://learn.microsoft.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": "*"
}

Microsoft Graph aanroepen namens de gebruiker

Het volgende voorbeeld laat zien hoe u Microsoft Graph aanroept als de aangemelde gebruiker en hoe u wat gebruikersgegevens ophaalt. Het GraphServiceClient-object wordt in de controller geïnjecteerd en verificatie is voor u geconfigureerd via de Microsoft.Identity.Web-bibliotheek.

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

Resources opschonen

Als u alle stappen in deze meerdelige zelfstudie hebt voltooid, hebt u een app-service, een App Service-hostingplan en een opslagaccount gemaakt in een resourcegroep. U hebt ook een app-registratie gemaakt in Microsoft Entra ID. Wanneer de resources niet meer nodig zijn, verwijdert u deze en de app-registratie, zodat er geen kosten meer bij u in rekening worden gebracht.

In deze zelfstudie leert u het volgende:

  • De Azure-resources verwijderen die tijdens de zelfstudie zijn gemaakt.

De resourcegroep verwijderen

In de Azure-portal selecteert u Resourcegroepen in het portalmenu en selecteert u vervolgens de resourcegroep die uw app-service en App Service-plan bevat.

Selecteer Resourcegroep verwijderen om de resourcegroep en alle resources te verwijderen.

Screenshot that shows deleting the resource group.

Het uitvoeren van deze opdracht kan enkele minuten duren.

De app-registratie verwijderen

Selecteer Toepassingen> in het Microsoft Entra-beheercentrum App-registraties. Selecteer vervolgens de toepassing die u heeft gemaakt. Screenshot that shows selecting app registration.

Selecteer Verwijderen in het app-registratieoverzicht. Screenshot that shows deleting the app registration.

Volgende stappen

In deze zelfstudie heeft u het volgende geleerd:

  • Gedelegeerde machtigingen verlenen aan een web-app.
  • Microsoft Graph vanuit een web-app aanroepen voor een aangemelde gebruiker.