Używanie interfejsu API programu Graph z platformą ASP.NET Core Blazor WebAssembly

Poniższe wskazówki dotyczą Microsoft Graph w wersji 5 lub nowszej.

Zestaw SDK Microsoft Graph do użytku w aplikacjach Blazor nosi nazwę biblioteka kliencka Microsoft Graph dla platformy .NET.

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

W witrynie Azure Portal przyznaj delegowane uprawnienia (zakresy)† dla danych programu Microsoft Graph, do których aplikacja powinna mieć dostęp w imieniu użytkownika. Na przykład w tym artykule rejestracja aplikacji powinna zawierać delegowane uprawnienia do odczytu danych użytkownika (Microsoft.Graph>User.Read zakres w uprawnieniach interfejsu API, Typ: Delegowane). Zakres User.Read umożliwia użytkownikom logowanie się do aplikacji i umożliwia aplikacji odczytywanie profilu i informacji firmowych zalogowanych użytkowników. Aby uzyskać więcej informacji, zobacz Omówienie uprawnień i zgody na platformie tożsamości Microsoft oraz Omówienie uprawnień Microsoft Graph.

†Uprawnienia i zakresy oznaczają to samo i są używane zamiennie w dokumentacji zabezpieczeń i portalu Azure. Jeśli tekst nie odnosi się do portalu Azure, w tym artykule używa się terminów zakres/zakresy w odniesieniu do uprawnień Graph.

Zakresy są niewrażliwe na wielkość liter, więc User.Read jest taka sama jak user.read. Możesz użyć dowolnego formatu, ale zalecamy spójny wybór w kodzie aplikacji.

Po dodaniu zakresów interfejsu API Microsoft Graph do rejestracji aplikacji w portalu Azure dodaj do pliku wwwroot/appsettings.json aplikacji następującą konfigurację ustawień aplikacji, która obejmuje podstawowy adres URL Microsoft Graph wraz z wersją Microsoft Graph i zakresami. W poniższym przykładzie określono zakres User.Read dla przykładów w dalszych sekcjach tego artykułu. Zakresy nie rozróżniają wielkości liter.

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

W poprzednim przykładzie symbol zastępczy {VERSION} to wersja interfejsu API Microsoft Graph (na przykład: v1.0).

Poniżej przedstawiono przykład kompletnego pliku konfiguracji wwwroot/appsettings.json dla aplikacji, która używa ME-ID jako dostawcy tożsamości, gdzie odczytywanie danych użytkownika (zakresuser.read) jest określone dla programu Microsoft Graph:

{
  "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"
    ]
  }
}

W poprzednim przykładzie symbol zastępczy {TENANT ID} to identyfikator katalogu (dzierżawy), a symbol zastępczy {CLIENT ID} to identyfikator aplikacji (klienta). Aby uzyskać więcej informacji, zobacz Secure an ASP.NET Core standalone app with Microsoft Entra ID (Zabezpieczanie autonomicznej aplikacji ASP.NET Core Blazor WebAssembly przy użyciu identyfikatora Entra firmy Microsoft).

Jeśli nie uda się uzyskać tokenu dostępu, poniższy kod nie ustawi nagłówka autoryzacji Bearer dla żądań Graph.

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

W pliku Program dodaj usługi klienta Graph i konfigurację za pomocą metody rozszerzającej AddGraphClient. Poniższy kod domyślnie używa bazowego adresu Microsoft Graph w wersji 1.0 oraz zakresów User.Read, jeśli te ustawienia nie zostaną znalezione w pliku ustawień aplikacji:

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

Wywoływanie interfejsu API programu Graph ze składnika przy użyciu zestawu Graph SDK

Poniższy UserData komponent używa wstrzykniętego elementu GraphServiceClient, aby pobrać dane profilu ME-ID użytkownika i wyświetlić numer jego telefonu komórkowego.

W przypadku dowolnego użytkownika testowego utworzonego w obszarze ME-ID upewnij się, że w witrynie Azure Portal nadasz profilowi ME-ID użytkownika numer telefonu komórkowego.

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

Dodaj link do strony składnika w składniku NavMenu (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>

Podczas testowania za pomocą zestawu Graph SDK lokalnie zalecamy użycie nowej sesji przeglądarki InPrivate/incognito dla każdego testu, aby zapobiec zakłócaniu testów utrzymujących się plików cookie. Aby uzyskać więcej informacji, zobacz Secure an ASP.NET Core standalone app with Microsoft Entra ID (Zabezpieczanie autonomicznej aplikacji ASP.NET Core Blazor WebAssembly przy użyciu identyfikatora Entra firmy Microsoft).

Dostosowywanie oświadczeń użytkowników przy użyciu zestawu Graph SDK

W poniższym przykładzie aplikacja tworzy oświadczenia dotyczące numeru telefonu komórkowego i lokalizacji biura dla użytkownika na podstawie danych profilu użytkownika ME-ID. Aplikacja musi mieć skonfigurowany w ME-ID zakres uprawnień interfejsu API Graph User.Read. Wszyscy użytkownicy testowi w tym scenariuszu muszą mieć numer telefonu komórkowego i lokalizację biura w profilu ME-ID, który można dodać za pośrednictwem witryny Azure Portal.

W następującej niestandardowej fabryce kont użytkowników:

• Element ILogger (logger) jest dołączany dla wygody w przypadku, gdy chcesz rejestrować informacje lub błędy w metodzie CreateUserAsync .
• W przypadku zgłoszenia AccessTokenNotAvailableException użytkownik jest przekierowywany do dostawcy tożsamości w celu zalogowania się na swoje konto. Dodatkowe lub różne akcje można wykonać w przypadku niepowodzenia żądania tokenu dostępu. Na przykład aplikacja może zarejestrować AccessTokenNotAvailableException i utworzyć zgłoszenie do działu pomocy technicznej w celu dalszej analizy.
• Element RemoteUserAccount frameworka reprezentuje konto użytkownika. Jeśli aplikacja wymaga niestandardowej klasy konta użytkownika, która dziedziczy po RemoteUserAccount, zamień niestandardową klasę konta użytkownika na RemoteUserAccount w poniższym kodzie.

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

Skonfiguruj uwierzytelnianie MSAL tak, aby używało niestandardowej fabryki kont użytkowników.

Upewnij się, że Program plik używa Microsoft.AspNetCore.Components.WebAssembly.Authentication przestrzeni nazw:

using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

Przykład w tej sekcji opiera się na podejściu polegającym na odczytywaniu bazowego adresu URL wraz z wersją i zakresami z konfiguracji aplikacji z sekcji MicrosoftGraph w pliku wwwroot/appsettings.json. Następujące wiersze powinny już znajdować się w Program pliku, postępując zgodnie ze wskazówkami zawartymi wcześniej w tym artykule:

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

W pliku Program znajdź wywołanie metody rozszerzającej AddMsalAuthentication. Zaktualizuj kod do następującej postaci, która zawiera wywołanie AddAccountClaimsPrincipalFactory, dodające fabrykę ClaimsPrincipal dla konta za pomocą CustomAccountFactory.

Jeśli aplikacja używa niestandardowej klasy konta użytkownika, która dziedziczy po RemoteUserAccount, zamień niestandardową klasę konta użytkownika na RemoteUserAccount w poniższym kodzie.

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

Możesz użyć następującego UserClaims składnika do zbadania oświadczeń użytkownika po uwierzytelnieniu użytkownika za pomocą me-ID:

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

Dodaj link do strony składnika w składniku NavMenu (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>

Podczas testowania za pomocą zestawu Graph SDK lokalnie zalecamy użycie nowej sesji przeglądarki InPrivate/incognito dla każdego testu, aby zapobiec zakłócaniu testów utrzymujących się plików cookie. Aby uzyskać więcej informacji, zobacz Secure an ASP.NET Core standalone app with Microsoft Entra ID (Zabezpieczanie autonomicznej aplikacji ASP.NET Core Blazor WebAssembly przy użyciu identyfikatora Entra firmy Microsoft).

Poniższe wskazówki dotyczą programu Microsoft Graph w wersji 4. Jeśli uaktualniasz aplikację z zestawu SDK w wersji 4 do wersji 5 lub nowszej, zobacz następujące zasoby:

• Microsoft Graph .NET SDK v5 changelog and upgrade guide (Dziennik zmian i uaktualnianie zestawu SDK w wersji 5)
• Wydania zestawu SDK Microsoft Graph .NET (microsoftgraph/msgraph-sdk-dotnet repozytorium GitHub) (zobacz uwagi dotyczące niezgodnych zmian w wersji 6.0.0)

Zestaw SDK Microsoft Graph używany w aplikacjach Blazor nosi nazwę biblioteka kliencka Microsoft Graph .NET.

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

W witrynie Azure Portal przyznaj delegowane uprawnienia (zakresy)† dla danych programu Microsoft Graph, do których aplikacja powinna mieć dostęp w imieniu użytkownika. Na przykład w tym artykule rejestracja aplikacji powinna zawierać delegowane uprawnienia do odczytu danych użytkownika (Microsoft.Graph>User.Read zakres w uprawnieniach interfejsu API, Typ: Delegowane). Zakres User.Read umożliwia użytkownikom logowanie się do aplikacji i umożliwia aplikacji odczytywanie profilu i informacji firmowych zalogowanych użytkowników. Aby uzyskać więcej informacji, zobacz Omówienie uprawnień i zgody na platformie tożsamości Microsoft oraz Omówienie uprawnień Microsoft Graph.

†Uprawnienia i zakresy oznaczają to samo i są używane zamiennie w dokumentacji dotyczącej zabezpieczeń i w portalu Azure. O ile tekst nie odnosi się do portalu Azure, w tym artykule używa się terminów zakres/zakresy w odniesieniu do uprawnień Microsoft Graph.

Zakresy są niewrażliwe na wielkość liter, więc User.Read jest taka sama jak user.read. Możesz użyć dowolnego formatu, ale zalecamy spójny wybór w kodzie aplikacji.

Po dodaniu zakresów interfejsu API Microsoft Graph do rejestracji aplikacji w portalu Azure dodaj do pliku wwwroot/appsettings.json w aplikacji następującą konfigurację ustawień aplikacji, która obejmuje bazowy adres URL Microsoft Graph z wersją Microsoft Graph i zakresami. W poniższym przykładzie określono zakres User.Read dla przykładów przedstawionych w dalszych sekcjach tego artykułu. W zakresach wielkość liter nie ma znaczenia.

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

W poprzednim przykładzie symbol zastępczy {VERSION} oznacza wersję interfejsu API Microsoft Graph (na przykład: v1.0).

Poniżej przedstawiono przykład kompletnego pliku konfiguracji wwwroot/appsettings.json dla aplikacji, która używa ME-ID jako dostawcy tożsamości, gdzie odczytywanie danych użytkownika (zakresuser.read) jest określone dla programu Microsoft Graph:

{
  "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"
    ]
  }
}

W poprzednim przykładzie symbol zastępczy {TENANT ID} to identyfikator katalogu (dzierżawy), a symbol zastępczy {CLIENT ID} to identyfikator aplikacji (klienta). Aby uzyskać więcej informacji, zobacz Secure an ASP.NET Core standalone app with Microsoft Entra ID (Zabezpieczanie autonomicznej aplikacji ASP.NET Core Blazor WebAssembly przy użyciu identyfikatora Entra firmy Microsoft).

Jeśli nie uda się uzyskać tokenu dostępu, poniższy kod nie ustawia nagłówka autoryzacji Bearer dla żądań do interfejsu Graph.

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()
        {
        }
    }
}

W pliku Program dodaj usługi klienta Graph i konfigurację za pomocą metody rozszerzającej AddGraphClient:

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

Wywoływanie interfejsu API programu Graph ze składnika przy użyciu zestawu Graph SDK

Poniższy komponent UserData używa wstrzykniętego składnika GraphServiceClient, aby pobrać dane profilu ME-ID użytkownika i wyświetlić numer jego telefonu komórkowego. W przypadku dowolnego użytkownika testowego utworzonego w obszarze ME-ID upewnij się, że w witrynie Azure Portal nadasz profilowi ME-ID użytkownika numer telefonu komórkowego.

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

Dodaj link do strony składnika w składniku NavMenu (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>

Podczas testowania za pomocą zestawu Graph SDK lokalnie zalecamy użycie nowej sesji przeglądarki InPrivate/incognito dla każdego testu, aby zapobiec zakłócaniu testów utrzymujących się plików cookie. Aby uzyskać więcej informacji, zobacz Secure an ASP.NET Core standalone app with Microsoft Entra ID (Zabezpieczanie autonomicznej aplikacji ASP.NET Core Blazor WebAssembly przy użyciu identyfikatora Entra firmy Microsoft).

Dostosowywanie oświadczeń użytkowników przy użyciu zestawu Graph SDK

W poniższym przykładzie aplikacja tworzy oświadczenia dotyczące numeru telefonu komórkowego i lokalizacji biura dla użytkownika na podstawie danych profilu użytkownika ME-ID. Aplikacja musi mieć skonfigurowany w ME-ID zakres User.Read interfejs Graph API. Wszyscy użytkownicy testowi w tym scenariuszu muszą mieć numer telefonu komórkowego i lokalizację biura w profilu ME-ID, który można dodać za pośrednictwem witryny Azure Portal.

W następującej niestandardowej fabryce kont użytkowników:

• Element ILogger (logger) jest dołączany dla wygody w przypadku, gdy chcesz rejestrować informacje lub błędy w metodzie CreateUserAsync .
• W przypadku zgłoszenia AccessTokenNotAvailableException użytkownik jest przekierowywany do dostawcy tożsamości w celu zalogowania się na swoje konto. Dodatkowe lub różne akcje można wykonać w przypadku niepowodzenia żądania tokenu dostępu. Na przykład aplikacja może zarejestrować AccessTokenNotAvailableException i utworzyć zgłoszenie do działu wsparcia w celu dalszej analizy.
• Element RemoteUserAccount frameworka reprezentuje konto użytkownika. Jeśli aplikacja wymaga niestandardowej klasy konta użytkownika, która rozszerza klasę RemoteUserAccount, zamień niestandardową klasę konta użytkownika na RemoteUserAccount w poniższym kodzie.

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

Skonfiguruj uwierzytelnianie MSAL tak, aby używało niestandardowej fabryki konta użytkownika.

Upewnij się, że Program plik używa Microsoft.AspNetCore.Components.WebAssembly.Authentication przestrzeni nazw:

using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

Przykład w tej sekcji opiera się na podejściu polegającym na odczytywaniu z konfiguracji aplikacji bazowego adresu URL wraz z wersją i zakresami za pośrednictwem sekcji MicrosoftGraph w pliku wwwroot/appsettings.json. Następujące wiersze powinny już znajdować się w Program pliku, postępując zgodnie ze wskazówkami zawartymi wcześniej w tym artykule:

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

W pliku Program znajdź wywołanie metody rozszerzającej AddMsalAuthentication. Zaktualizuj kod do następującej postaci, która zawiera wywołanie AddAccountClaimsPrincipalFactory, dodające fabrykę obiektu ClaimsPrincipal dla konta przy użyciu CustomAccountFactory.

Jeśli aplikacja używa niestandardowej klasy konta użytkownika, która rozszerza RemoteUserAccount, zamień tę niestandardową klasę konta użytkownika na RemoteUserAccount w poniższym kodzie.

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

Możesz użyć następującego UserClaims składnika do zbadania oświadczeń użytkownika po uwierzytelnieniu użytkownika za pomocą me-ID:

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

Dodaj link do strony składnika w składniku NavMenu (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>

Podczas testowania za pomocą zestawu Graph SDK lokalnie zalecamy użycie nowej sesji przeglądarki InPrivate/incognito dla każdego testu, aby zapobiec zakłócaniu testów utrzymujących się plików cookie. Aby uzyskać więcej informacji, zobacz Secure an ASP.NET Core standalone app with Microsoft Entra ID (Zabezpieczanie autonomicznej aplikacji ASP.NET Core Blazor WebAssembly przy użyciu identyfikatora Entra firmy Microsoft).

W poniższych przykładach użyto nazwanego elementu HttpClient w wywołaniach interfejsu interfejs Graph API, aby uzyskać numer telefonu komórkowego użytkownika na potrzeby obsłużenia połączenia lub dostosować oświadczenia użytkownika tak, aby uwzględniały oświadczenie numeru telefonu komórkowego oraz oświadczenie lokalizacji biura.

W witrynie Azure Portal przyznaj delegowane uprawnienia (zakresy)† dla danych programu Microsoft Graph, do których aplikacja powinna mieć dostęp w imieniu użytkownika. Na przykład w tym artykule rejestracja aplikacji powinna zawierać delegowane uprawnienia do odczytu danych użytkownika (Microsoft.Graph>User.Read zakres w uprawnieniach interfejsu API, Typ: Delegowane). Zakres User.Read umożliwia użytkownikom logowanie się do aplikacji i umożliwia aplikacji odczytywanie profilu i informacji firmowych zalogowanych użytkowników. Aby uzyskać więcej informacji, zobacz Omówienie uprawnień i zgody na platformie tożsamości Microsoft oraz Omówienie uprawnień Microsoft Graph.

†Uprawnienia i zakresy oznaczają to samo i są używane zamiennie w dokumentacji dotyczącej zabezpieczeń i w portalu Azure. Jeśli tekst nie odnosi się do portalu Azure, w tym artykule używa się terminów zakres/zakresy w odniesieniu do uprawnień Graph.

Zakresy są niewrażliwe na wielkość liter, więc User.Read jest taka sama jak user.read. Możesz użyć dowolnego formatu, ale zalecamy spójny wybór w kodzie aplikacji.

Po dodaniu zakresów interfejsu API Microsoft Graph do rejestracji aplikacji w portalu Azure dodaj do pliku wwwroot/appsettings.json w aplikacji następującą konfigurację ustawień aplikacji, która obejmuje podstawowy adres URL usługi Graph z wersją Microsoft Graph oraz zakresy. W poniższym przykładzie określono zakres User.Read dla przykładów w dalszych sekcjach tego artykułu. Zakresy nie rozróżniają wielkości liter.

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

W poprzednim przykładzie symbol zastępczy {VERSION} oznacza wersję interfejsu API Microsoft Graph (na przykład: v1.0).

Poniżej przedstawiono przykład kompletnego pliku konfiguracji wwwroot/appsettings.json dla aplikacji, która używa ME-ID jako dostawcy tożsamości, gdzie odczytywanie danych użytkownika (zakresuser.read) jest określone dla programu Microsoft Graph:

{
  "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"
    ]
  }
}

W poprzednim przykładzie w miejscu symbolu zastępczego {TENANT ID} znajduje się identyfikator katalogu (dzierżawy), a w miejscu symbolu zastępczego {CLIENT ID} — identyfikator aplikacji (klienta). Aby uzyskać więcej informacji, zobacz Secure an ASP.NET Core standalone app with Microsoft Entra ID (Zabezpieczanie autonomicznej aplikacji ASP.NET Core Blazor WebAssembly przy użyciu identyfikatora Entra firmy Microsoft).

Utwórz następującą GraphAuthorizationMessageHandler klasę i konfigurację Program projektu w pliku na potrzeby pracy z interfejsem API programu Graph. Bazowy adres URL i zakresy są przekazywane do modułu obsługi z konfiguracji.

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" ]);
    }
}

Wymagany jest końcowy ukośnik (/) autoryzowanego adresu URL. Powyższy kod tworzy następujący autoryzacyjny adres URL na podstawie konfiguracji ustawień aplikacji lub używa następującego autoryzacyjnego adresu URL jako domyślnego, jeśli konfiguracja ustawień aplikacji nie istnieje: https://graph.microsoft.com/v1.0/.

W pliku Program skonfiguruj nazwany element HttpClient dla interfejsu API Graph:

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>();

W poprzednim przykładzie parametr GraphAuthorizationMessageHandlerDelegatingHandler jest zarejestrowany jako usługa przejściowa dla elementu AddHttpMessageHandler. Rejestracja typu transient jest zalecana dla IHttpClientFactory, który zarządza własnymi zakresami DI. Aby uzyskać więcej informacji, zobacz następujące zasoby:

• Pomocnicze klasy bazowe komponentów do zarządzania zakresem DI
• Wykrywanie tymczasowych obiektów jednorazowego użytku po stronie klienta
• DelegatingHandler Instancje

Wymagany jest ukośnik końcowy (/) na adresie podstawowym. W poprzednim kodzie trzecim argumentem do string.Join jest string.Empty, aby zapewnić obecność końcowego ukośnika: https://graph.microsoft.com/v1.0/.

Wywoływanie interfejsu API programu Graph ze składnika przy użyciu nazwanego elementu HttpClient

Klasa UserInfo.cs wyznacza wymagane właściwości profilu użytkownika z atrybutem JsonPropertyNameAttribute i nazwą JSON używaną przez me-ID. Poniższy przykład konfiguruje właściwości numeru telefonu komórkowego i lokalizacji biura użytkownika.

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

W poniższym komponencie UserData tworzony jest element HttpClient dla interfejsu API Graph, aby wysłać żądanie o dane profilu użytkownika. Zasób me (me) jest dodawany do podstawowego adresu URL z wersją żądania interfejsu API programu Graph. Dane JSON zwracane przez program Graph są deserializowane we właściwościach UserInfo klasy. W poniższym przykładzie otrzymany jest numer telefonu komórkowego. Możesz dodać podobny kod, aby uwzględnić lokalizację biura profilu ME-ID użytkownika, jeśli chcesz (userInfo.OfficeLocation). Jeśli żądanie tokenu dostępu zakończy się niepowodzeniem, użytkownik zostanie przekierowany w celu zalogowania się do aplikacji w celu uzyskania nowego tokenu dostępu.

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

Dodaj link do strony składnika w składniku NavMenu (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>

W poniższej sekwencji opisano nowy przepływ użytkownika dla zakresów interfejsu API programu Graph:

1. Nowy użytkownik loguje się do aplikacji po raz pierwszy.
2. Użytkownik wyraża zgodę na korzystanie z aplikacji w interfejsie użytkownika zgody platformy Azure.
3. Użytkownik uzyskuje dostęp do strony składnika, która żąda danych interfejsu API programu Graph po raz pierwszy.
4. Użytkownik jest przekierowywany do interfejsu użytkownika zgody platformy Azure, aby wyrazić zgodę na zakresy interfejsu API programu Graph.
5. Zwracane są dane użytkownika interfejsu API programu Graph.

Jeśli wolisz, aby aprowizacja zakresów (wyrażenie zgody na zakresy interfejsu API Microsoft Graph) odbywała się podczas pierwszego logowania, przekaż zakresy do uwierzytelniania MSAL jako domyślne zakresy tokenu dostępu w pliku Program:

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

Po wprowadzeniu powyższych zmian w aplikacji przepływ użytkownika przyjmuje następującą sekwencję:

1. Nowy użytkownik loguje się do aplikacji po raz pierwszy.
2. Użytkownik wyraża zgodę na aplikację i zakresy uprawnień interfejs Graph API w interfejsie zgody platformy Azure.
3. Użytkownik uzyskuje dostęp do strony składnika, która żąda danych interfejsu API programu Graph po raz pierwszy.
4. Zwracane są dane użytkownika interfejsu API programu Graph.

Podczas testowania przy użyciu interfejsu API programu Graph lokalnie zalecamy użycie nowej sesji przeglądarki InPrivate/incognito dla każdego testu, aby zapobiec zakłócaniu testowania przez utrzymujące się pliki cookie. Aby uzyskać więcej informacji, zobacz Secure an ASP.NET Core standalone app with Microsoft Entra ID (Zabezpieczanie autonomicznej aplikacji ASP.NET Core Blazor WebAssembly przy użyciu identyfikatora Entra firmy Microsoft).

Dostosowywanie oświadczeń użytkownika za pomocą nazwanego HttpClient

W poniższym przykładzie aplikacja tworzy oświadczenia dotyczące numeru telefonu komórkowego i lokalizacji biura dla użytkownika na podstawie danych profilu użytkownika ME-ID. Aplikacja musi mieć skonfigurowany w ME-ID zakres User.Read interfejs Graph API. Testowe konta użytkowników w ME-ID wymagają podania numeru telefonu komórkowego i lokalizacji biura, które można dodać w ich profilach użytkowników za pośrednictwem portalu Azure.

Jeśli jeszcze nie dodano do aplikacji klasy UserInfo zgodnie ze wskazówkami podanymi wcześniej w tym artykule, dodaj następującą klasę i oznacz wymagane właściwości profilu użytkownika atrybutem JsonPropertyNameAttribute oraz nazwą JSON używaną przez ME-ID. Poniższy przykład konfiguruje właściwości numeru telefonu komórkowego i lokalizacji biura użytkownika.

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

W następującej niestandardowej fabryce kont użytkowników:

• Element ILogger (logger) jest dołączany dla wygody w przypadku, gdy chcesz rejestrować informacje lub błędy w metodzie CreateUserAsync .
• W przypadku zgłoszenia AccessTokenNotAvailableException użytkownik jest przekierowywany do dostawcy tożsamości w celu zalogowania się na swoje konto. Dodatkowe lub różne akcje można wykonać w przypadku niepowodzenia żądania tokenu dostępu. Na przykład aplikacja może zarejestrować AccessTokenNotAvailableException i utworzyć zgłoszenie do działu pomocy technicznej w celu dalszej analizy.
• Element RemoteUserAccount struktury reprezentuje konto użytkownika. Jeśli aplikacja wymaga niestandardowej klasy konta użytkownika, która dziedziczy po RemoteUserAccount, w poniższym kodzie użyj RemoteUserAccount zamiast niestandardowej klasy konta użytkownika.

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

Uwierzytelnianie MSAL jest skonfigurowane tak, aby używało niestandardowej fabryki kont użytkowników. Zacznij od potwierdzenia, że Program plik używa Microsoft.AspNetCore.Components.WebAssembly.Authentication przestrzeni nazw:

using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

W pliku Program znajdź wywołanie metody rozszerzającej AddMsalAuthentication. Zaktualizuj kod do następującej postaci, która zawiera wywołanie AddAccountClaimsPrincipalFactory, dodające fabrykę ClaimsPrincipal dla konta za pomocą CustomAccountFactory.

Jeśli aplikacja używa niestandardowej klasy konta użytkownika, która dziedziczy po RemoteUserAccount, w poniższym kodzie zastąp niestandardową klasę konta użytkownika aplikacji elementem RemoteUserAccount.

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

Powyższy przykład dotyczy aplikacji korzystającej z uwierzytelniania ME-ID i biblioteki MSAL. Podobne wzorce istnieją dla uwierzytelniania OIDC i interfejsu API. Aby uzyskać więcej informacji, zobacz przykłady w sekcji Dostosowywanie użytkownika za pomocą oświadczenia w ładunku w artykule ASP.NET Core Blazor WebAssembly — dodatkowe scenariusze zabezpieczeń.

Możesz użyć następującego UserClaims składnika do zbadania oświadczeń użytkownika po uwierzytelnieniu użytkownika za pomocą me-ID:

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

Dodaj link do strony składnika w składniku NavMenu (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>

Podczas testowania przy użyciu interfejsu API programu Graph lokalnie zalecamy użycie nowej sesji przeglądarki InPrivate/incognito dla każdego testu, aby zapobiec zakłócaniu testowania przez utrzymujące się pliki cookie. Aby uzyskać więcej informacji, zobacz Secure an ASP.NET Core standalone app with Microsoft Entra ID (Zabezpieczanie autonomicznej aplikacji ASP.NET Core Blazor WebAssembly przy użyciu identyfikatora Entra firmy Microsoft).