Verwenden der Graph-API mit der Blazor WebAssembly von ASP.NET Core

Die folgenden Hinweise gelten für Microsoft Graph v5.

Das Microsoft Graph SDK für die Verwendung in Blazor Anwendungen heißt Microsoft Graph .NET Client Library.

• Microsoft.AspNetCore.Components.WebAssembly.Authentication
• Microsoft.Authentication.WebAssembly.Msal
• Microsoft.Extensions.Http
• Microsoft.Graph

Erteilen Sie im Azure-Portal delegierte Berechtigungen (Bereiche)† für Microsoft Graph-Daten, auf die die App im Namen eines Benutzers zugreifen kann. Im Beispiel in diesem Artikel sollte die Registrierung der App delegierte Berechtigungen zum Lesen von Benutzerdaten enthalten (Microsoft.Graph>User.Read Bereich in API-Berechtigungen, Typ: Delegiert). Der User.Read-Bereich ermöglicht Benutzenden die Anmeldung bei der App und der App das Lesen der Profil- und Firmeninformationen angemeldeter Benutzerinnen und Benutzer. Weitere Informationen finden Sie unter Übersicht über Berechtigungen und Zustimmung in der Microsoft identity-Plattform und Übersicht über Microsoft Graph-Berechtigungen.

†Berechtigungen und Bereiche bedeuten dasselbe und werden in der Sicherheitsdokumentation und im Azure-Portal synonym verwendet. Sofern sich der Text nicht auf das Azure-Portal bezieht, verwendet dieser Artikel Scope/Scopes, wenn er sich auf Graph-Berechtigungen bezieht.

Die Groß- und Kleinschreibung spielt keine Rolle, also ist User.Read dasselbe wie user.read. Sie können beide Formate verwenden, aber wir empfehlen eine konsistente Auswahl für den gesamten Anwendungscode.

Nachdem Sie die Microsoft Graph-API-Bereiche zur App-Registrierung im Azure-Portal hinzugefügt haben, fügen Sie der Datei wwwroot/appsettings.json in der App die folgende Konfiguration mit App-Einstellungen hinzu, die die Graph-Basis-URL mit der Microsoft Graph-Version und Bereiche enthält. Im folgenden Beispiel wird der User.Read-Bereich für die Beispiele in späteren Abschnitten dieses Artikels angegeben. Die Groß-/Kleinschreibung wird bei Bereichen nicht beachtet.

"MicrosoftGraph": {
  "BaseUrl": "https://graph.microsoft.com",
  "Version": "{VERSION}",
  "Scopes": [
    "user.read"
  ]
}

Im vorherigen Beispiel steht der Platzhalter {VERSION} für die Version der Microsoft Graph-API (z. B. v1.0).

Im Folgenden finden Sie ein Beispiel für eine vollständige wwwroot/appsettings.json-Konfigurationsdatei für eine Anwendung, die ME-ID als identity-Provider verwendet, wobei das Lesen von Benutzerdaten (user.read Scope) für Microsoft Graph angegeben ist:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/{TENANT ID}",
    "ClientId": "{CLIENT ID}",
    "ValidateAuthority": true
  },
  "MicrosoftGraph": {
    "BaseUrl": "https://graph.microsoft.com",
    "Version": "v1.0",
    "Scopes": [
      "user.read"
    ]
  }
}

Im vorherigen Beispiel ist der {TENANT ID}-Platzhalter die Verzeichnis-ID (Mandant), und der {CLIENT ID}-Platzhalter ist die Anwendungs-ID (Client). Weitere Informationen finden Sie unter Sichern einer eigenständigen ASP.NET Core-Blazor WebAssembly-App mit Microsoft Entra ID.

Wenn kein Zugriffstoken abgerufen wird, wird mit dem folgenden Code kein Bearertoken-Autorisierungsheader für Graph-Anforderungen festgelegt.

GraphClientExtensions.cs:

using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.Authentication.WebAssembly.Msal.Models;
using Microsoft.Graph;
using Microsoft.Kiota.Abstractions;
using Microsoft.Kiota.Abstractions.Authentication;
using IAccessTokenProvider = 
    Microsoft.AspNetCore.Components.WebAssembly.Authentication.IAccessTokenProvider;

namespace BlazorSample;

internal static class GraphClientExtensions
{
    public static IServiceCollection AddGraphClient(
            this IServiceCollection services, string? baseUrl, List<string>? scopes)
    {
        if (string.IsNullOrEmpty(baseUrl) || scopes?.Count == 0)
        {
            return services;
        }

        services.Configure<RemoteAuthenticationOptions<MsalProviderOptions>>(
            options =>
            {
                scopes?.ForEach((scope) =>
                {
                    options.ProviderOptions.DefaultAccessTokenScopes.Add(scope);
                });
            });

        services.AddScoped<IAuthenticationProvider, GraphAuthenticationProvider>();

        services.AddScoped(sp =>
        {
            return new GraphServiceClient(
                new HttpClient(),
                sp.GetRequiredService<IAuthenticationProvider>(),
                baseUrl);
        });

        return services;
    }

    private class GraphAuthenticationProvider(IAccessTokenProvider tokenProvider, 
        IConfiguration config) : IAuthenticationProvider
    {
        private readonly IConfiguration config = config;

        public IAccessTokenProvider TokenProvider { get; } = tokenProvider;

        public async Task AuthenticateRequestAsync(RequestInformation request, 
            Dictionary<string, object>? additionalAuthenticationContext = null, 
            CancellationToken cancellationToken = default)
        {
            var result = await TokenProvider.RequestAccessToken(
                new AccessTokenRequestOptions()
                {
                    Scopes = 
                        config.GetSection("MicrosoftGraph:Scopes").Get<string[]>() ??
                        [ "user.read" ]
                });

            if (result.TryGetToken(out var token))
            {
                request.Headers.Add("Authorization", 
                    $"{CoreConstants.Headers.Bearer} {token.Value}");
            }
        }
    }
}

Fügen Sie in der Datei Program die Graph-Client-Dienste und die Konfiguration mit der Erweiterungsmethode AddGraphClient hinzu. Der folgende Code verwendet standardmäßig die Microsoft Graph-Basisadresse der Version 1.0 und User.Read-Bereiche, wenn diese Einstellungen nicht in der Einstellungsdatei der Anwendung gefunden werden:

var baseUrl = string.Join("/",
    builder.Configuration.GetSection("MicrosoftGraph")["BaseUrl"] ??
        "https://graph.microsoft.com",
    builder.Configuration.GetSection("MicrosoftGraph")["Version"] ??
        "v1.0");
var scopes = builder.Configuration.GetSection("MicrosoftGraph:Scopes")
    .Get<List<string>>() ?? [ "user.read" ];

builder.Services.AddGraphClient(baseUrl, scopes);

Aufrufen der Graph-API aus einer Komponente mithilfe des Graph SDK

In der folgenden UserData-Komponente wird ein injizierter GraphServiceClient verwendet, um die Daten zum ME-ID-Profil des Benutzers abzurufen und seine Mobiltelefonnummer anzuzeigen.

Stellen Sie für jeden Testbenutzer, den Sie in ME-ID erstellen, sicher, dass Sie dem ME-ID-Profil des Benutzers im Azure-Portal eine Mobiltelefonnummer zuweisen.

UserData.razor:

@page "/user-data"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.Graph
@attribute [Authorize]
@inject GraphServiceClient Client

<PageTitle>User Data</PageTitle>

<h1>Microsoft Graph User Data</h1>

@if (!string.IsNullOrEmpty(user?.MobilePhone))
{
    <p>Mobile Phone: @user.MobilePhone</p>
}

@code {
    private Microsoft.Graph.Models.User? user;

    protected override async Task OnInitializedAsync()
    {
        user = await Client.Me.GetAsync();
    }
}

Hinzufügen eines Links zur Seite der Komponente in der NavMenu-Komponente (Layout/NavMenu.razor):

<div class="nav-item px-3">
    <NavLink class="nav-link" href="user-data">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> User Data
    </NavLink>
</div>

Wenn Sie mit dem Graph SDK lokal testen, empfehlen wir, für jeden Test eine neue InPrivate/Incognito-Browsersitzung zu verwenden, um zu verhindern, dass verbleibende Cookies die Tests stören. Weitere Informationen finden Sie unter Sichern einer eigenständigen ASP.NET Core-Blazor WebAssembly-App mit Microsoft Entra ID.

Anpassen von Benutzeransprüchen mit dem Graph SDK

Im folgenden Beispiel erstellt die App Ansprüche für die Mobiltelefonnummer und den Bürostandort eines Benutzers aus den Daten in seinem ME-ID-Benutzerprofil. Für die App muss der Graph-API-Bereich User.Read in ME-ID konfiguriert sein. Alle Testbenutzer für dieses Szenario müssen über eine Mobiltelefonnummer und einen Bürostandort in ihrem ME-ID-Profil verfügen, die über das Azure-Portal hinzugefügt werden können.

In der folgenden benutzerdefinierten Benutzerkontofactory:

• Für den Fall, dass Sie Informationen oder Fehler in der CreateUserAsync-Methode protokollieren möchten, ist der Einfachheit halber ein ILogger (logger) enthalten.
• Wenn ein AccessTokenNotAvailableException ausgelöst wird, wird der Benutzer zum identity-Anbieter umgeleitet, um sich bei seinem Konto anzumelden. Zusätzliche oder andere Aktionen können ausgeführt werden, wenn beim Anfordern eines Zugriffstokens ein Fehler auftritt. Beispielsweise kann die App die AccessTokenNotAvailableException protokollieren und ein Supportticket für die weitere Untersuchung erstellen.
• Das RemoteUserAccount des Frameworks stellt das Konto des Benutzers dar. Wenn die App eine benutzerdefinierte Benutzerkontoklasse erfordert, mit der RemoteUserAccount erweitert wird, tauschen Sie die benutzerdefinierte Benutzerkontoklasse im folgenden Code gegen RemoteUserAccount aus.

CustomAccountFactory.cs:

using System.Security.Claims;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication.Internal;
using Microsoft.Graph;
using Microsoft.Kiota.Abstractions.Authentication;

public class CustomAccountFactory(IAccessTokenProviderAccessor accessor,
        IServiceProvider serviceProvider, ILogger<CustomAccountFactory> logger,
        IConfiguration config) 
    : AccountClaimsPrincipalFactory<RemoteUserAccount>(accessor)
{
    private readonly ILogger<CustomAccountFactory> logger = logger;
    private readonly IServiceProvider serviceProvider = serviceProvider;
    private readonly string? baseUrl = string.Join("/",
        config.GetSection("MicrosoftGraph")["BaseUrl"] ?? 
            "https://graph.microsoft.com",
        config.GetSection("MicrosoftGraph")["Version"] ??
            "v1.0");

    public override async ValueTask<ClaimsPrincipal> CreateUserAsync(
        RemoteUserAccount account,
        RemoteAuthenticationUserOptions options)
    {
        var initialUser = await base.CreateUserAsync(account, options);

        if (initialUser.Identity is not null &&
            initialUser.Identity.IsAuthenticated)
        {
            var userIdentity = initialUser.Identity as ClaimsIdentity;

            if (userIdentity is not null && !string.IsNullOrEmpty(baseUrl))
            {
                try
                {
                    var client = new GraphServiceClient(
                        new HttpClient(),
                        serviceProvider
                            .GetRequiredService<IAuthenticationProvider>(),
                        baseUrl);

                    var user = await client.Me.GetAsync();

                    if (user is not null)
                    {
                        userIdentity.AddClaim(new Claim("mobilephone",
                            user.MobilePhone ?? "(000) 000-0000"));
                        userIdentity.AddClaim(new Claim("officelocation",
                            user.OfficeLocation ?? "Not set"));
                    }
                }
                catch (AccessTokenNotAvailableException exception)
                {
                    exception.Redirect();
                }
            }
        }

        return initialUser;
    }
}

Konfigurieren Sie MSAL-Authentifizierung für die Verwendung der benutzerdefinierten Benutzerkontofactory.

Vergewissern Sie sich, dass die Datei Program den Microsoft.AspNetCore.Components.WebAssembly.Authentication-Namespace verwendet:

using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

Das Beispiel in diesem Abschnitt baut auf dem Ansatz auf, die Basis-URL mit Version und Bereiche aus der App-Konfiguration über den Abschnitt MicrosoftGraph in der Datei wwwroot/appsettings.json zu lesen. Die folgenden Zeilen sollten bereits in der Program-Datei gemäß dem Leitfadens weiter oben in diesem Artikel enthalten sein:

var baseUrl = string.Join("/",
    builder.Configuration.GetSection("MicrosoftGraph")["BaseUrl"] ??
        "https://graph.microsoft.com",
    builder.Configuration.GetSection("MicrosoftGraph")["Version"] ??
        "v1.0");
var scopes = builder.Configuration.GetSection("MicrosoftGraph:Scopes")
    .Get<List<string>>() ?? [ "user.read" ];

builder.Services.AddGraphClient(baseUrl, scopes);

Suchen Sie in der Program-Datei nach dem Aufruf der AddMsalAuthentication-Erweiterungsmethode. Aktualisieren Sie den Code wie folgt, der einen Aufruf von AddAccountClaimsPrincipalFactory enthält, der eine Kontoanspruchs-Prinzipalfactory mit CustomAccountFactory hinzufügt.

Wenn die App eine benutzerdefinierte Benutzerkontoklasse verwendet, mit der RemoteUserAccount erweitert wird, tauschen Sie die benutzerdefinierte Benutzerkontoklasse im folgenden Code gegen RemoteUserAccount aus.

builder.Services.AddMsalAuthentication<RemoteAuthenticationState,
    RemoteUserAccount>(options =>
    {
        builder.Configuration.Bind("AzureAd", 
            options.ProviderOptions.Authentication);
    })
    .AddAccountClaimsPrincipalFactory<RemoteAuthenticationState, RemoteUserAccount,
        CustomAccountFactory>();

Sie können die folgende UserClaims-Komponente verwenden, um die Ansprüche des Benutzers zu untersuchen, nachdem sich der Benutzer bei ME-ID authentifiziert hat:

UserClaims.razor:

@page "/user-claims"
@using System.Security.Claims
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]
@inject AuthenticationStateProvider AuthenticationStateProvider

<h1>User Claims</h1>

@if (claims.Any())
{
    <ul>
        @foreach (var claim in claims)
        {
            <li>@claim.Type: @claim.Value</li>
        }
    </ul>
}
else
{
    <p>No claims found.</p>
}

@code {
    private IEnumerable<Claim> claims = Enumerable.Empty<Claim>();

    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthenticationStateProvider
            .GetAuthenticationStateAsync();
        var user = authState.User;

        claims = user.Claims;
    }
}

Hinzufügen eines Links zur Seite der Komponente in der NavMenu-Komponente (Layout/NavMenu.razor):

<div class="nav-item px-3">
    <NavLink class="nav-link" href="user-claims">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> User Claims
    </NavLink>
</div>

Wenn Sie mit dem Graph SDK lokal testen, empfehlen wir, für jeden Test eine neue InPrivate/Incognito-Browsersitzung zu verwenden, um zu verhindern, dass verbleibende Cookies die Tests stören. Weitere Informationen finden Sie unter Sichern einer eigenständigen ASP.NET Core-Blazor WebAssembly-App mit Microsoft Entra ID.

Der folgende Leitfaden gilt für Microsoft Graph v4. Wenn Sie ein Upgrade einer App von SDK v4 auf v5 durchführen, lesen Sie das Microsoft Graph .NET SDK v5-Änderungsprotokoll und Upgradehandbuch.

Das Microsoft Graph SDK für die Verwendung in Blazor-Apps wird als Microsoft Graph .NET-Clientbibliothek bezeichnet.

• Microsoft.AspNetCore.Components.WebAssembly.Authentication
• Microsoft.Authentication.WebAssembly.Msal
• Microsoft.Extensions.Http
• Microsoft.Graph

Erteilen Sie im Azure-Portal delegierte Berechtigungen (Bereiche)† für Microsoft Graph-Daten, auf die die App im Namen eines Benutzers zugreifen kann. Im Beispiel in diesem Artikel sollte die Registrierung der App delegierte Berechtigungen zum Lesen von Benutzerdaten enthalten (Microsoft.Graph>User.Read Bereich in API-Berechtigungen, Typ: Delegiert). Der User.Read-Bereich ermöglicht Benutzenden die Anmeldung bei der App und der App das Lesen der Profil- und Firmeninformationen angemeldeter Benutzerinnen und Benutzer. Weitere Informationen finden Sie unter Übersicht über Berechtigungen und Zustimmung in der Microsoft identity-Plattform und Übersicht über Microsoft Graph-Berechtigungen.

†Berechtigungen und Bereiche bedeuten dasselbe und werden in der Sicherheitsdokumentation und im Azure-Portal synonym verwendet. Sofern sich der Text nicht auf das Azure-Portal bezieht, verwendet dieser Artikel Scope/Scopes, wenn er sich auf Graph-Berechtigungen bezieht.

Die Groß- und Kleinschreibung spielt keine Rolle, also ist User.Read dasselbe wie user.read. Sie können beide Formate verwenden, aber wir empfehlen eine konsistente Auswahl für den gesamten Anwendungscode.

Nachdem Sie die Microsoft Graph-API-Bereiche zur App-Registrierung im Azure-Portal hinzugefügt haben, fügen Sie der Datei wwwroot/appsettings.json in der App die folgende Konfiguration mit App-Einstellungen hinzu, die die Graph-Basis-URL mit der Microsoft Graph-Version und Bereiche enthält. Im folgenden Beispiel wird der User.Read-Bereich für die Beispiele in späteren Abschnitten dieses Artikels angegeben. Die Groß-/Kleinschreibung wird bei Bereichen nicht beachtet.

"MicrosoftGraph": {
  "BaseUrl": "https://graph.microsoft.com",
  "Version": "{VERSION}",
  "Scopes": [
    "user.read"
  ]
}

Im vorherigen Beispiel steht der Platzhalter {VERSION} für die Version der Microsoft Graph-API (z. B. v1.0).

Im Folgenden finden Sie ein Beispiel für eine vollständige wwwroot/appsettings.json-Konfigurationsdatei für eine Anwendung, die ME-ID als identity-Provider verwendet, wobei das Lesen von Benutzerdaten (user.read Scope) für Microsoft Graph angegeben ist:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/{TENANT ID}",
    "ClientId": "{CLIENT ID}",
    "ValidateAuthority": true
  },
  "MicrosoftGraph": {
    "BaseUrl": "https://graph.microsoft.com",
    "Version": "v1.0",
    "Scopes": [
      "user.read"
    ]
  }
}

Im vorherigen Beispiel ist der {TENANT ID}-Platzhalter die Verzeichnis-ID (Mandant), und der {CLIENT ID}-Platzhalter ist die Anwendungs-ID (Client). Weitere Informationen finden Sie unter Sichern einer eigenständigen ASP.NET Core-Blazor WebAssembly-App mit Microsoft Entra ID.

Wenn kein Zugriffstoken abgerufen wird, wird mit dem folgenden Code kein Bearertoken-Autorisierungsheader für Graph-Anforderungen festgelegt.

GraphClientExtensions.cs:

using System.Net.Http.Headers;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.Authentication.WebAssembly.Msal.Models;
using Microsoft.Graph;

namespace BlazorSample;

internal static class GraphClientExtensions
{
    public static IServiceCollection AddGraphClient(
        this IServiceCollection services, string? baseUrl, List<string>? scopes)
    {
        if (string.IsNullOrEmpty(baseUrl) || scopes?.Count == 0)
        {
            return services;
        }

        services.Configure<RemoteAuthenticationOptions<MsalProviderOptions>>(
            options =>
            {
                scopes?.ForEach((scope) =>
                {
                    options.ProviderOptions.DefaultAccessTokenScopes.Add(scope);
                });
            });

        services.AddScoped<IAuthenticationProvider, GraphAuthenticationProvider>();

        services.AddScoped<IHttpProvider, HttpClientHttpProvider>(sp =>
            new HttpClientHttpProvider(new HttpClient()));

        services.AddScoped(sp =>
        {
            return new GraphServiceClient(
                baseUrl,
                sp.GetRequiredService<IAuthenticationProvider>(),
                sp.GetRequiredService<IHttpProvider>());
        });

        return services;
    }

    private class GraphAuthenticationProvider(IAccessTokenProvider tokenProvider, 
        IConfiguration config) : IAuthenticationProvider
    {
        private readonly IConfiguration config = config;

        public IAccessTokenProvider TokenProvider { get; } = tokenProvider;

        public async Task AuthenticateRequestAsync(HttpRequestMessage request)
        {
            var result = await TokenProvider.RequestAccessToken(
                new AccessTokenRequestOptions()
                { 
                    Scopes = config.GetSection("MicrosoftGraph:Scopes").Get<string[]>()
                });

            if (result.TryGetToken(out var token))
            {
                request.Headers.Authorization ??= new AuthenticationHeaderValue(
                    "Bearer", token.Value);
            }
        }
    }

    private class HttpClientHttpProvider(HttpClient client) : IHttpProvider
    {
        private readonly HttpClient client = client;

        public ISerializer Serializer { get; } = new Serializer();

        public TimeSpan OverallTimeout { get; set; } = TimeSpan.FromSeconds(300);

        public Task<HttpResponseMessage> SendAsync(HttpRequestMessage request)
        {
            return client.SendAsync(request);
        }

        public Task<HttpResponseMessage> SendAsync(HttpRequestMessage request,
            HttpCompletionOption completionOption,
            CancellationToken cancellationToken)
        {
            return client.SendAsync(request, completionOption, cancellationToken);
        }

        public void Dispose()
        {
        }
    }
}

Fügen Sie in der Datei Program die Graph-Client-Dienste und die Konfiguration mit der Erweiterungsmethode AddGraphClient hinzu:

var baseUrl = string.Join("/",
    builder.Configuration.GetSection("MicrosoftGraph")["BaseUrl"] ??
        "https://graph.microsoft.com",
    builder.Configuration.GetSection("MicrosoftGraph")["Version"] ??
        "v1.0");
var scopes = builder.Configuration.GetSection("MicrosoftGraph:Scopes")
    .Get<List<string>>() ?? [ "user.read" ];

builder.Services.AddGraphClient(baseUrl, scopes);

Aufrufen der Graph-API aus einer Komponente mithilfe des Graph SDK

In der folgenden UserData-Komponente wird ein injizierter GraphServiceClient verwendet, um die Daten zum ME-ID-Profil des Benutzers abzurufen und seine Mobiltelefonnummer anzuzeigen. Stellen Sie für jeden Testbenutzer, den Sie in ME-ID erstellen, sicher, dass Sie dem ME-ID-Profil des Benutzers im Azure-Portal eine Mobiltelefonnummer zuweisen.

UserData.razor:

@page "/user-data"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.Graph
@attribute [Authorize]
@inject GraphServiceClient Client

<PageTitle>User Data</PageTitle>

<h1>Microsoft Graph User Data</h1>

@if (!string.IsNullOrEmpty(user?.MobilePhone))
{
    <p>Mobile Phone: @user.MobilePhone</p>
}

@code {
    private Microsoft.Graph.User? user;

    protected override async Task OnInitializedAsync()
    {
        var request = Client.Me.Request();
        user = await request.GetAsync();
    }
}

Hinzufügen eines Links zur Seite der Komponente in der NavMenu-Komponente (Layout/NavMenu.razor):

<div class="nav-item px-3">
    <NavLink class="nav-link" href="user-data">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> User Data
    </NavLink>
</div>

Wenn Sie mit dem Graph SDK lokal testen, empfehlen wir, für jeden Test eine neue InPrivate/Incognito-Browsersitzung zu verwenden, um zu verhindern, dass verbleibende Cookies die Tests stören. Weitere Informationen finden Sie unter Sichern einer eigenständigen ASP.NET Core-Blazor WebAssembly-App mit Microsoft Entra ID.

Anpassen von Benutzeransprüchen mit dem Graph SDK

Im folgenden Beispiel erstellt die App Ansprüche für die Mobiltelefonnummer und den Bürostandort eines Benutzers aus den Daten in seinem ME-ID-Benutzerprofil. Für die App muss der Graph-API-Bereich User.Read in ME-ID konfiguriert sein. Alle Testbenutzer für dieses Szenario müssen über eine Mobiltelefonnummer und einen Bürostandort in ihrem ME-ID-Profil verfügen, die über das Azure-Portal hinzugefügt werden können.

In der folgenden benutzerdefinierten Benutzerkontofactory:

• Für den Fall, dass Sie Informationen oder Fehler in der CreateUserAsync-Methode protokollieren möchten, ist der Einfachheit halber ein ILogger (logger) enthalten.
• Wenn ein AccessTokenNotAvailableException ausgelöst wird, wird der Benutzer zum identity-Anbieter umgeleitet, um sich bei seinem Konto anzumelden. Zusätzliche oder andere Aktionen können ausgeführt werden, wenn beim Anfordern eines Zugriffstokens ein Fehler auftritt. Beispielsweise kann die App die AccessTokenNotAvailableException protokollieren und ein Supportticket für die weitere Untersuchung erstellen.
• Das RemoteUserAccount des Frameworks stellt das Konto des Benutzers dar. Wenn die App eine benutzerdefinierte Benutzerkontoklasse erfordert, mit der RemoteUserAccount erweitert wird, tauschen Sie die benutzerdefinierte Benutzerkontoklasse im folgenden Code gegen RemoteUserAccount aus.

CustomAccountFactory.cs:

using System.Security.Claims;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication.Internal;
using Microsoft.Graph;

public class CustomAccountFactory(IAccessTokenProviderAccessor accessor, 
        IServiceProvider serviceProvider, ILogger<CustomAccountFactory> logger)
    : AccountClaimsPrincipalFactory<RemoteUserAccount>(accessor)
{
    private readonly ILogger<CustomAccountFactory> logger = logger;
    private readonly IServiceProvider serviceProvider = serviceProvider;

    public override async ValueTask<ClaimsPrincipal> CreateUserAsync(
        RemoteUserAccount account,
        RemoteAuthenticationUserOptions options)
    {
        var initialUser = await base.CreateUserAsync(account, options);

        if (initialUser.Identity is not null && 
            initialUser.Identity.IsAuthenticated)
        {
            var userIdentity = initialUser.Identity as ClaimsIdentity;

            if (userIdentity is not null)
            {
                try
                {
                    var client = ActivatorUtilities
                        .CreateInstance<GraphServiceClient>(serviceProvider);
                    var request = client.Me.Request();
                    var user = await request.GetAsync();

                    if (user is not null)
                    {
                        userIdentity.AddClaim(new Claim("mobilephone",
                            user.MobilePhone ?? "(000) 000-0000"));
                        userIdentity.AddClaim(new Claim("officelocation",
                            user.OfficeLocation ?? "Not set"));
                    }
                }
                catch (AccessTokenNotAvailableException exception)
                {
                    exception.Redirect();
                }
            }
        }

        return initialUser;
    }
}

Konfigurieren Sie MSAL-Authentifizierung für die Verwendung der benutzerdefinierten Benutzerkontofactory.

Vergewissern Sie sich, dass die Datei Program den Microsoft.AspNetCore.Components.WebAssembly.Authentication-Namespace verwendet:

using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

Das Beispiel in diesem Abschnitt baut auf dem Ansatz auf, die Basis-URL mit Version und Bereiche aus der App-Konfiguration über den Abschnitt MicrosoftGraph in der Datei wwwroot/appsettings.json zu lesen. Die folgenden Zeilen sollten bereits in der Program-Datei gemäß dem Leitfadens weiter oben in diesem Artikel enthalten sein:

var baseUrl = string.Join("/",
    builder.Configuration.GetSection("MicrosoftGraph")["BaseUrl"] ??
        "https://graph.microsoft.com",
    builder.Configuration.GetSection("MicrosoftGraph")["Version"] ??
        "v1.0");
var scopes = builder.Configuration.GetSection("MicrosoftGraph:Scopes")
    .Get<List<string>>() ?? [ "user.read" ];

builder.Services.AddGraphClient(baseUrl, scopes);

Suchen Sie in der Program-Datei nach dem Aufruf der AddMsalAuthentication-Erweiterungsmethode. Aktualisieren Sie den Code wie folgt, der einen Aufruf von AddAccountClaimsPrincipalFactory enthält, der eine Kontoanspruchs-Prinzipalfactory mit CustomAccountFactory hinzufügt.

Wenn die App eine benutzerdefinierte Benutzerkontoklasse verwendet, mit der RemoteUserAccount erweitert wird, tauschen Sie die benutzerdefinierte Benutzerkontoklasse im folgenden Code gegen RemoteUserAccount aus.

builder.Services.AddMsalAuthentication<RemoteAuthenticationState,
    RemoteUserAccount>(options =>
    {
        builder.Configuration.Bind("AzureAd", 
            options.ProviderOptions.Authentication);
    })
    .AddAccountClaimsPrincipalFactory<RemoteAuthenticationState, RemoteUserAccount,
        CustomAccountFactory>();

Sie können die folgende UserClaims-Komponente verwenden, um die Ansprüche des Benutzers zu untersuchen, nachdem sich der Benutzer bei ME-ID authentifiziert hat:

UserClaims.razor:

@page "/user-claims"
@using System.Security.Claims
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]
@inject AuthenticationStateProvider AuthenticationStateProvider

<h1>User Claims</h1>

@if (claims.Any())
{
    <ul>
        @foreach (var claim in claims)
        {
            <li>@claim.Type: @claim.Value</li>
        }
    </ul>
}
else
{
    <p>No claims found.</p>
}

@code {
    private IEnumerable<Claim> claims = Enumerable.Empty<Claim>();

    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthenticationStateProvider
            .GetAuthenticationStateAsync();
        var user = authState.User;

        claims = user.Claims;
    }
}

Hinzufügen eines Links zur Seite der Komponente in der NavMenu-Komponente (Layout/NavMenu.razor):

<div class="nav-item px-3">
    <NavLink class="nav-link" href="user-claims">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> User Claims
    </NavLink>
</div>

Wenn Sie mit dem Graph SDK lokal testen, empfehlen wir, für jeden Test eine neue InPrivate/Incognito-Browsersitzung zu verwenden, um zu verhindern, dass verbleibende Cookies die Tests stören. Weitere Informationen finden Sie unter Sichern einer eigenständigen ASP.NET Core-Blazor WebAssembly-App mit Microsoft Entra ID.

In den folgenden Beispielen wird ein benannter HttpClient für Graph-API-Aufrufe verwendet, um die Mobiltelefonnummer eines Benutzers zum Verarbeiten eines Anrufs abzurufen oder die Ansprüche eines Benutzers so anzupassen, dass sie einen Mobiltelefonnummer-Anspruch und einen Bürostandortanspruch enthalten.

Erteilen Sie im Azure-Portal delegierte Berechtigungen (Bereiche)† für Microsoft Graph-Daten, auf die die App im Namen eines Benutzers zugreifen kann. Im Beispiel in diesem Artikel sollte die Registrierung der App delegierte Berechtigungen zum Lesen von Benutzerdaten enthalten (Microsoft.Graph>User.Read Bereich in API-Berechtigungen, Typ: Delegiert). Der User.Read-Bereich ermöglicht Benutzenden die Anmeldung bei der App und der App das Lesen der Profil- und Firmeninformationen angemeldeter Benutzerinnen und Benutzer. Weitere Informationen finden Sie unter Übersicht über Berechtigungen und Zustimmung in der Microsoft identity-Plattform und Übersicht über Microsoft Graph-Berechtigungen.

†Berechtigungen und Bereiche bedeuten dasselbe und werden in der Sicherheitsdokumentation und im Azure-Portal synonym verwendet. Sofern sich der Text nicht auf das Azure-Portal bezieht, verwendet dieser Artikel Scope/Scopes, wenn er sich auf Graph-Berechtigungen bezieht.

Die Groß- und Kleinschreibung spielt keine Rolle, also ist User.Read dasselbe wie user.read. Sie können beide Formate verwenden, aber wir empfehlen eine konsistente Auswahl für den gesamten Anwendungscode.

Nachdem Sie die Microsoft Graph-API-Bereiche zur App-Registrierung im Azure-Portal hinzugefügt haben, fügen Sie der Datei wwwroot/appsettings.json in der App die folgende Konfiguration mit App-Einstellungen hinzu, die die Graph-Basis-URL mit der Microsoft Graph-Version und Bereiche enthält. Im folgenden Beispiel wird der User.Read-Bereich für die Beispiele in späteren Abschnitten dieses Artikels angegeben. Die Groß-/Kleinschreibung wird bei Bereichen nicht beachtet.

"MicrosoftGraph": {
  "BaseUrl": "https://graph.microsoft.com",
  "Version": "{VERSION}",
  "Scopes": [
    "user.read"
  ]
}

Im vorherigen Beispiel steht der Platzhalter {VERSION} für die Version der Microsoft Graph-API (z. B. v1.0).

Im Folgenden finden Sie ein Beispiel für eine vollständige wwwroot/appsettings.json-Konfigurationsdatei für eine Anwendung, die ME-ID als identity-Provider verwendet, wobei das Lesen von Benutzerdaten (user.read Scope) für Microsoft Graph angegeben ist:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/{TENANT ID}",
    "ClientId": "{CLIENT ID}",
    "ValidateAuthority": true
  },
  "MicrosoftGraph": {
    "BaseUrl": "https://graph.microsoft.com",
    "Version": "v1.0",
    "Scopes": [
      "user.read"
    ]
  }
}

Im vorherigen Beispiel ist der {TENANT ID}-Platzhalter die Verzeichnis-ID (Mandant), und der {CLIENT ID}-Platzhalter ist die Anwendungs-ID (Client). Weitere Informationen finden Sie unter Sichern einer eigenständigen ASP.NET Core-Blazor WebAssembly-App mit Microsoft Entra ID.

Erstellen Sie die folgende GraphAuthorizationMessageHandler-Klasse und -Projektkonfiguration in der Program-Datei für das Arbeiten mit der Graph-API. Die Basis-URL und die Bereiche werden für den Handler aus der Konfiguration bereitgestellt.

GraphAuthorizationMessageHandler.cs:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

namespace BlazorSample;

public class GraphAuthorizationMessageHandler : AuthorizationMessageHandler
{
    public GraphAuthorizationMessageHandler(IAccessTokenProvider provider,
        NavigationManager navigation, IConfiguration config)
        : base(provider, navigation)
    {
        ConfigureHandler(
            authorizedUrls: [ 
                string.Join("/",
                    config.GetSection("MicrosoftGraph")["BaseUrl"] ??
                        "https://graph.microsoft.com",
                    config.GetSection("MicrosoftGraph")["Version"] ??
                        "v1.0")
            ],
            scopes: config.GetSection("MicrosoftGraph:Scopes")
                        .Get<List<string>>() ?? [ "user.read" ]);
    }
}

Der nachgestellte Schrägstrich (/) der autorisierten URL ist erforderlich. Der vorangehende Code erstellt die folgende autorisierte URL aus der Konfiguration der App-Einstellungen oder gibt die folgende autorisierte URL vor, wenn die Konfiguration der App-Einstellungen fehlt: https://graph.microsoft.com/v1.0/.

Konfigurieren Sie in der Program-Datei den benannten HttpClient für die Graph-API:

builder.Services.AddTransient<GraphAuthorizationMessageHandler>();

builder.Services.AddHttpClient("GraphAPI",
        client => client.BaseAddress = new Uri(
            string.Join("/",
                builder.Configuration.GetSection("MicrosoftGraph")["BaseUrl"] ??
                    "https://graph.microsoft.com",
                builder.Configuration.GetSection("MicrosoftGraph")["Version"] ??
                    "v1.0",
                string.Empty)))
    .AddHttpMessageHandler<GraphAuthorizationMessageHandler>();

Im vorherigen Beispiel wird der GraphAuthorizationMessageHandler DelegatingHandler als vorübergehender Dienst für AddHttpMessageHandler registriert. Die vorübergehende Registrierung wird für IHttpClientFactory empfohlen, da sie eigene DI-Bereiche verwaltet. Weitere Informationen finden Sie in den folgenden Ressourcen:

• Hilfsprogramm-Basiskomponentenklassen zur Verwaltung eines Bereichs für die Abhängigkeitsinjektion
• Erkennung clientseitiger vorübergehender Elemente, die verworfen werden können

Ein nachgestellter Schrägstrich (/) auf der Basisadresse ist erforderlich. Im vorangehenden Code ist das dritte Argument für string.Join string.Empty, um sicherzustellen, dass der abschließende Schrägstrich vorhanden ist: https://graph.microsoft.com/v1.0/.

Aufrufen der Graph-API aus einer Komponente mithilfe eines benannten HttpClient

Die Klasse UserInfo.cs bezeichnet die erforderlichen Eigenschaften des Benutzerprofils mit dem Attribut JsonPropertyNameAttribute und dem von ME-ID verwendeten JSON-Namen. Im folgenden Beispiel werden Eigenschaften für die Mobiltelefonnummer und den Bürostandort des Benutzers eingerichtet.

UserInfo.cs:

using System.Text.Json.Serialization;

namespace BlazorSample;

public class UserInfo
{
    [JsonPropertyName("mobilePhone")]
    public string? MobilePhone { get; set; }

    [JsonPropertyName("officeLocation")]
    public string? OfficeLocation { get; set; }
}

In der folgenden UserData-Komponente wird HttpClient für die Graph-API erstellt, um eine Anforderung für die Profildaten des Benutzers auszugeben. Die me-Ressource (me) wird der Basis-URL mit Version für die Graph-API-Anforderung hinzugefügt. Die von Graph zurückgegebenen JSON-Daten werden in die Eigenschaften der Klasse UserInfo deserialisiert. Im folgenden Beispiel wird die Mobiltelefonnummer abgerufen. Sie können ähnlichen Code hinzufügen, um den Bürostandort des ME-ID-Profils des Benutzers einzuschließen, wenn dies gewünscht wird (userInfo.OfficeLocation). Wenn die Zugriffstokenanforderung fehlschlägt, wird der Benutzer umgeleitet, um sich bei der App für ein neues Zugriffstoken anzumelden.

UserData.razor:

@page "/user-data"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@attribute [Authorize]
@inject IConfiguration Config
@inject IHttpClientFactory ClientFactory

<PageTitle>User Data</PageTitle>

<h1>Microsoft Graph User Data</h1>

@if (!string.IsNullOrEmpty(userInfo?.MobilePhone))
{
    <p>Mobile Phone: @userInfo.MobilePhone</p>
}

@code {
    private UserInfo? userInfo;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            var client = ClientFactory.CreateClient("GraphAPI");

            userInfo = await client.GetFromJsonAsync<UserInfo>("me");
        }
        catch (AccessTokenNotAvailableException exception)
        {
            exception.Redirect();
        }
    }
}

Hinzufügen eines Links zur Seite der Komponente in der NavMenu-Komponente (Layout/NavMenu.razor):

<div class="nav-item px-3">
    <NavLink class="nav-link" href="user-data">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> User Data
    </NavLink>
</div>

Die folgende Sequenz beschreibt den neuen Benutzerfluss für Graph-API-Bereiche:

1. Der neue Benutzer meldet sich zum ersten Mal bei der App an.
2. Der Benutzer stimmt in der Azure-Zustimmungsoberfläche der Verwendung der App zu.
3. Der Benutzer greift auf eine Komponentenseite zu, die zum ersten Mal Graph-API-Daten anfordert.
4. Der Benutzer wird zur Azure-ZustimmungsoberfIäche weitergeleitet, um Graph-API-Bereichen zuzustimmen.
5. Es werden Graph-API-Benutzerdaten zurückgegeben.

Wenn Sie möchten, dass die Bereichsbereitstellung (Zustimmung für Graph-API-Bereiche) bei der ersten Anmeldung erfolgt, geben Sie die Bereiche der MSAL-Authentifizierung in der Datei Program als Standardzugriffstokenbereiche an:

+ var scopes = builder.Configuration.GetSection("MicrosoftGraph:Scopes")
+     .Get<List<string>>() ?? [ "user.read" ];

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);

+   foreach (var scope in scopes)
+   {
+       options.ProviderOptions.DefaultAccessTokenScopes.Add(scope);
+   }
});

Wenn die vorstehenden Änderungen an der App vorgenommen werden, übernimmt der Benutzerfluss die folgende Sequenz:

1. Der neue Benutzer meldet sich zum ersten Mal bei der App an.
2. Der Benutzer stimmt in der Azure-Zustimmungsoberfläche der Verwendung der App und Graph-API-Bereichen zu.
3. Der Benutzer greift auf eine Komponentenseite zu, die zum ersten Mal Graph-API-Daten anfordert.
4. Es werden Graph-API-Benutzerdaten zurückgegeben.

Wenn Sie mit der Graph-API lokal testen, empfehlen wir, für jeden Test eine neue InPrivate/Incognito-Browsersitzung zu verwenden, um zu verhindern, dass verbleibende Cookies die Tests beeinträchtigen. Weitere Informationen finden Sie unter Sichern einer eigenständigen ASP.NET Core-Blazor WebAssembly-App mit Microsoft Entra ID.

Anpassen von Benutzeransprüchen mithilfe eines benannten HttpClient

Im folgenden Beispiel erstellt die App Ansprüche für die Mobiltelefonnummer und den Bürostandort des Benutzers aus den Daten in seinem ME-ID-Benutzerprofil. Für die App muss der Graph-API-Bereich User.Read in ME-ID konfiguriert sein. Testbenutzerkonten in ME-ID erfordern Einträge für die Mobiltelefonnummer und den Bürostandort, die ihren Benutzerprofilen über das Azure-Portal hinzugefügt werden können.

Wenn Sie die UserInfo-Klasse noch nicht zur App hinzugefügt haben, indem Sie die Anleitung weiter oben in diesem Artikel befolgt haben, fügen Sie die folgende Klasse hinzu und benennen Sie die erforderlichen Benutzerprofileigenschaften mit dem JsonPropertyNameAttribute-Attribut und dem von ME-ID verwendeten JSON-Namen. Im folgenden Beispiel werden Eigenschaften für die Mobiltelefonnummer und den Bürostandort des Benutzers eingerichtet.

UserInfo.cs:

using System.Text.Json.Serialization;

namespace BlazorSample;

public class UserInfo
{
    [JsonPropertyName("mobilePhone")]
    public string? MobilePhone { get; set; }

    [JsonPropertyName("officeLocation")]
    public string? OfficeLocation { get; set; }
}

In der folgenden benutzerdefinierten Benutzerkontofactory:

• Für den Fall, dass Sie Informationen oder Fehler in der CreateUserAsync-Methode protokollieren möchten, ist der Einfachheit halber ein ILogger (logger) enthalten.
• Wenn ein AccessTokenNotAvailableException ausgelöst wird, wird der Benutzer zum identity-Anbieter umgeleitet, um sich bei seinem Konto anzumelden. Zusätzliche oder andere Aktionen können ausgeführt werden, wenn beim Anfordern eines Zugriffstokens ein Fehler auftritt. Beispielsweise kann die App die AccessTokenNotAvailableException protokollieren und ein Supportticket für die weitere Untersuchung erstellen.
• Das RemoteUserAccount des Frameworks stellt das Konto des Benutzers dar. Wenn die App eine benutzerdefinierte Benutzerkontoklasse benötigt, mit der RemoteUserAccount erweitert wird, tauschen Sie die benutzerdefinierte Benutzerkontoklasse im folgenden Code gegen RemoteUserAccount aus.

CustomAccountFactory.cs:

using System.Net.Http.Json;
using System.Security.Claims;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication.Internal;

public class CustomAccountFactory(IAccessTokenProviderAccessor accessor,
        IHttpClientFactory clientFactory,
        ILogger<CustomAccountFactory> logger)
    : AccountClaimsPrincipalFactory<RemoteUserAccount>(accessor)
{
    private readonly ILogger<CustomAccountFactory> logger = logger;
    private readonly IHttpClientFactory clientFactory = clientFactory;

    public override async ValueTask<ClaimsPrincipal> CreateUserAsync(
        RemoteUserAccount account,
        RemoteAuthenticationUserOptions options)
    {
        var initialUser = await base.CreateUserAsync(account, options);

        if (initialUser.Identity is not null && 
            initialUser.Identity.IsAuthenticated)
        {
            var userIdentity = initialUser.Identity as ClaimsIdentity;

            if (userIdentity is not null)
            {
                try
                {
                    var client = clientFactory.CreateClient("GraphAPI");

                    var userInfo = await client.GetFromJsonAsync<UserInfo>("me");

                    if (userInfo is not null)
                    {
                        userIdentity.AddClaim(new Claim("mobilephone",
                            userInfo.MobilePhone ?? "(000) 000-0000"));
                        userIdentity.AddClaim(new Claim("officelocation",
                            userInfo.OfficeLocation ?? "Not set"));
                    }
                }
                catch (AccessTokenNotAvailableException exception)
                {
                    exception.Redirect();
                }
            }
        }

        return initialUser;
    }
}

MSAL-Authentifizierung ist für die Verwendung der benutzerdefinierten Benutzerkontofactory konfiguriert. Vergewissern Sie sich zunächst, dass die Datei Program den Microsoft.AspNetCore.Components.WebAssembly.Authentication-Namespace verwendet:

using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

Suchen Sie in der Program-Datei nach dem Aufruf der AddMsalAuthentication-Erweiterungsmethode. Aktualisieren Sie den Code wie folgt, der einen Aufruf von AddAccountClaimsPrincipalFactory enthält, der eine Kontoanspruchs-Prinzipalfactory mit CustomAccountFactory hinzufügt.

Wenn die App eine benutzerdefinierte Benutzerkontoklasse verwendet, mit der RemoteUserAccount erweitert wird, tauschen Sie die benutzerdefinierte Benutzerkontoklasse im folgenden Code gegen RemoteUserAccount aus.

builder.Services.AddMsalAuthentication<RemoteAuthenticationState, 
    RemoteUserAccount>(options =>
    {
        builder.Configuration.Bind("AzureAd", 
            options.ProviderOptions.Authentication);
    })
    .AddAccountClaimsPrincipalFactory<RemoteAuthenticationState, RemoteUserAccount, 
        CustomAccountFactory>();

Das obige Beispiel gilt für eine App, die die ME-ID-Authentifizierung mit MSAL verwendet. Ähnliche Muster gibt es für die OIDC- und die API-Authentifizierung. Weitere Informationen finden Sie in den Beispielen im Abschnitt Anpassen des Benutzers mit einem Nutzdatenanspruch im Artikel Weitere Sicherheitsszenarien in ASP.NET Core Blazor WebAssembly.

Sie können die folgende UserClaims-Komponente verwenden, um die Ansprüche des Benutzers zu untersuchen, nachdem sich der Benutzer bei ME-ID authentifiziert hat:

UserClaims.razor:

@page "/user-claims"
@using System.Security.Claims
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]
@inject AuthenticationStateProvider AuthenticationStateProvider

<h1>User Claims</h1>

@if (claims.Any())
{
    <ul>
        @foreach (var claim in claims)
        {
            <li>@claim.Type: @claim.Value</li>
        }
    </ul>
}
else
{
    <p>No claims found.</p>
}

@code {
    private IEnumerable<Claim> claims = Enumerable.Empty<Claim>();

    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthenticationStateProvider
            .GetAuthenticationStateAsync();
        var user = authState.User;

        claims = user.Claims;
    }
}

Hinzufügen eines Links zur Seite der Komponente in der NavMenu-Komponente (Layout/NavMenu.razor):

<div class="nav-item px-3">
    <NavLink class="nav-link" href="user-claims">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> User Claims
    </NavLink>
</div>

Wenn Sie mit der Graph-API lokal testen, empfehlen wir, für jeden Test eine neue InPrivate/Incognito-Browsersitzung zu verwenden, um zu verhindern, dass verbleibende Cookies die Tests beeinträchtigen. Weitere Informationen finden Sie unter Sichern einer eigenständigen ASP.NET Core-Blazor WebAssembly-App mit Microsoft Entra ID.