Использование API Graph в ASP.NET Core Blazor WebAssembly

Следующее руководство относится к Microsoft Graph версии 5.

Пакет SDK Microsoft Graph для использования в Blazor приложениях называется клиентской библиотекой Microsoft Graph .NET.

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

В портал Azure предоставьте делегированные разрешения (области)† для данных Microsoft Graph, к которым приложение должно иметь доступ от имени пользователя. Например, в этой статье регистрация приложения должна включать делегированное разрешение на чтение данных пользователя (Microsoft.Graph>User.Read область в разрешениях API, тип: Делегировано). Область User.Read позволяет пользователям входить в приложение и позволяет приложению считывать сведения о профиле и компании пользователей, вошедшего в систему. Дополнительные сведения см. в разделе "Обзор разрешений и согласия" на платформе Майкрософт identity и обзор разрешений Microsoft Graph.

†Permissions и области означают то же самое и используются взаимозаменяемо в документации по безопасности и портал Azure. Если текст не ссылается на портал Azure, в этой статье используются /области областей при обращении к разрешениям Graph.

Области являются нечувствительными к регистру, поэтому User.Read они совпадают user.read. Вы можете использовать любой формат, но мы рекомендуем согласованный выбор в коде приложения.

После добавления областей API Microsoft Graph в регистрацию приложения в портал Azure добавьте следующую конфигурацию wwwroot/appsettings.json параметров приложения в файл в приложении, который включает базовый URL-адрес Graph с версией и областями Microsoft Graph. В следующем примере User.Read область указывается для примеров в последующих разделах этой статьи. Области не учитывает регистр.

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

В предыдущем примере заполнитель — это версия API Microsoft Graph (например: {VERSION} v1.0).

Ниже приведен пример полного wwwroot/appsettings.json файла конфигурации для приложения, использующего ME-ID в качестве identity поставщика, где для Microsoft Graph заданы данные пользователя (user.read область).

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

В предыдущем примере {TENANT ID} заполнитель — это идентификатор каталога (клиента), а {CLIENT ID} заполнитель — идентификатор приложения (клиента). Дополнительные сведения см. в статье "Защита автономного приложения ASP.NET Core Blazor WebAssembly с помощью идентификатора Microsoft Entra.

Если маркер доступа не получен, следующий код не задает заголовок авторизации носителя для запросов 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}");
            }
        }
    }
}

В файле добавьте клиентские Program службы Graph и конфигурацию с AddGraphClient помощью метода расширения. Следующий код по умолчанию использует базовый адрес и User.Read области Microsoft Graph версии 1.0, если эти параметры не найдены в файле параметров приложения:

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

Вызов API Graph из компонента с помощью пакета SDK для Graph

UserData Следующий компонент использует внедренный GraphServiceClient объект для получения данных профиля ME-ID пользователя и отображения номера мобильного телефона.

Для любого тестового пользователя, который вы создаете в ME-ID, убедитесь, что вы предоставите профилю ME-ID пользователя номер мобильного телефона в портал Azure.

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

Добавьте ссылку на страницу компонента в 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>

При локальном тестировании с помощью пакета SDK Graph рекомендуется использовать новый сеанс браузера InPrivate/incognito для каждого теста, чтобы предотвратить вмешательство в тесты с помощью файлов cookie. Дополнительные сведения см. в статье "Защита автономного приложения ASP.NET Core Blazor WebAssembly с помощью идентификатора Microsoft Entra.

Настройка утверждений пользователей с помощью пакета SDK Graph

В следующем примере приложение создает мобильный номер телефона и утверждения о расположении офиса для пользователя из данных профиля пользователя ME-ID. Приложение должно иметь область API Graph, настроенную User.Read в me-ID. Все тестовые пользователи для этого сценария должны иметь номер мобильного телефона и офис в своем профиле ME-ID, который можно добавить через портал Azure.

В следующей фабрике пользовательских учетных записей пользователей:

• Значение (ILoggerlogger) включается для удобства, если вы хотите регистрировать сведения или ошибки в методеCreateUserAsync.
• В случае AccessTokenNotAvailableException возникновения ошибки пользователь перенаправляется identity поставщику для входа в учетную запись. При запросе маркера доступа могут выполняться дополнительные или различные действия. Например, приложение может записать AccessTokenNotAvailableException и создать запрос в службу поддержки для дальнейшего изучения.
• RemoteUserAccount Платформа представляет учетную запись пользователя. Если приложению требуется пользовательский класс учетной записи пользователя, который расширяется RemoteUserAccount, переключите класс пользовательской учетной записи пользователя на RemoteUserAccount следующий код.

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

Настройте проверку подлинности MSAL для использования фабрики пользовательских учетных записей пользователей.

Убедитесь, что Program файл использует Microsoft.AspNetCore.Components.WebAssembly.Authentication пространство имен:

using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

Пример в этом разделе основан на подходе чтения базового URL-адреса с версиями и областями из конфигурации приложения с помощью MicrosoftGraph раздела в wwwroot/appsettings.json файле. Следующие строки уже должны присутствовать в Program файле, следуя инструкциям, приведенным ранее в этой статье:

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

Program В файле найдите вызов AddMsalAuthentication метода расширения. Обновите код до следующего, включив вызов, который AddAccountClaimsPrincipalFactory добавляет фабрику субъектов утверждений учетной записи с помощью CustomAccountFactory.

Если приложение использует пользовательский класс учетной записи пользователя, RemoteUserAccountрасширяющийся, переключите класс пользовательской учетной записи пользователя на RemoteUserAccount следующий код.

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

Чтобы изучить утверждения пользователя после проверки подлинности пользователя с помощью ME-ID, можно использовать следующий UserClaims компонент:

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

Добавьте ссылку на страницу компонента в 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>

При локальном тестировании с помощью пакета SDK Graph рекомендуется использовать новый сеанс браузера InPrivate/incognito для каждого теста, чтобы предотвратить вмешательство в тесты с помощью файлов cookie. Дополнительные сведения см. в статье "Защита автономного приложения ASP.NET Core Blazor WebAssembly с помощью идентификатора Microsoft Entra.

Следующее руководство относится к Microsoft Graph версии 4. Если вы обновляете приложение из пакета SDK версии 4 до версии 5, ознакомьтесь с руководством по изменению и обновлению пакета SDK для Microsoft Graph для .NET версии 5.

Пакет SDK Microsoft Graph для использования в Blazor приложениях называется клиентской библиотекой Microsoft Graph .NET.

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

В портал Azure предоставьте делегированные разрешения (области)† для данных Microsoft Graph, к которым приложение должно иметь доступ от имени пользователя. Например, в этой статье регистрация приложения должна включать делегированное разрешение на чтение данных пользователя (Microsoft.Graph>User.Read область в разрешениях API, тип: Делегировано). Область User.Read позволяет пользователям входить в приложение и позволяет приложению считывать сведения о профиле и компании пользователей, вошедшего в систему. Дополнительные сведения см. в разделе "Обзор разрешений и согласия" на платформе Майкрософт identity и обзор разрешений Microsoft Graph.

†Permissions и области означают то же самое и используются взаимозаменяемо в документации по безопасности и портал Azure. Если текст не ссылается на портал Azure, в этой статье используются /области областей при обращении к разрешениям Graph.

Области являются нечувствительными к регистру, поэтому User.Read они совпадают user.read. Вы можете использовать любой формат, но мы рекомендуем согласованный выбор в коде приложения.

После добавления областей API Microsoft Graph в регистрацию приложения в портал Azure добавьте следующую конфигурацию wwwroot/appsettings.json параметров приложения в файл в приложении, который включает базовый URL-адрес Graph с версией и областями Microsoft Graph. В следующем примере User.Read область указывается для примеров в последующих разделах этой статьи. Области не учитывает регистр.

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

В предыдущем примере заполнитель — это версия API Microsoft Graph (например: {VERSION} v1.0).

Ниже приведен пример полного wwwroot/appsettings.json файла конфигурации для приложения, использующего ME-ID в качестве identity поставщика, где для Microsoft Graph заданы данные пользователя (user.read область).

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

В предыдущем примере {TENANT ID} заполнитель — это идентификатор каталога (клиента), а {CLIENT ID} заполнитель — идентификатор приложения (клиента). Дополнительные сведения см. в статье "Защита автономного приложения ASP.NET Core Blazor WebAssembly с помощью идентификатора Microsoft Entra.

Если маркер доступа не получен, следующий код не задает заголовок авторизации носителя для запросов 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()
        {
        }
    }
}

В файле добавьте клиентские Program службы Graph и конфигурацию с 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);

Вызов API Graph из компонента с помощью пакета SDK для Graph

UserData Следующий компонент использует внедренный GraphServiceClient объект для получения данных профиля ME-ID пользователя и отображения номера мобильного телефона. Для любого тестового пользователя, который вы создаете в ME-ID, убедитесь, что вы предоставите профилю ME-ID пользователя номер мобильного телефона в портал Azure.

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

Добавьте ссылку на страницу компонента в 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>

При локальном тестировании с помощью пакета SDK Graph рекомендуется использовать новый сеанс браузера InPrivate/incognito для каждого теста, чтобы предотвратить вмешательство в тесты с помощью файлов cookie. Дополнительные сведения см. в статье "Защита автономного приложения ASP.NET Core Blazor WebAssembly с помощью идентификатора Microsoft Entra.

Настройка утверждений пользователей с помощью пакета SDK Graph

В следующем примере приложение создает мобильный номер телефона и утверждения о расположении офиса для пользователя из данных профиля пользователя ME-ID. Приложение должно иметь область API Graph, настроенную User.Read в me-ID. Все тестовые пользователи для этого сценария должны иметь номер мобильного телефона и офис в своем профиле ME-ID, который можно добавить через портал Azure.

В следующей фабрике пользовательских учетных записей пользователей:

• Значение (ILoggerlogger) включается для удобства, если вы хотите регистрировать сведения или ошибки в методеCreateUserAsync.
• В случае AccessTokenNotAvailableException возникновения ошибки пользователь перенаправляется identity поставщику для входа в учетную запись. При запросе маркера доступа могут выполняться дополнительные или различные действия. Например, приложение может записать AccessTokenNotAvailableException и создать запрос в службу поддержки для дальнейшего изучения.
• RemoteUserAccount Платформа представляет учетную запись пользователя. Если приложению требуется пользовательский класс учетной записи пользователя, который расширяется RemoteUserAccount, переключите класс пользовательской учетной записи пользователя на RemoteUserAccount следующий код.

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

Настройте проверку подлинности MSAL для использования фабрики пользовательских учетных записей пользователей.

Убедитесь, что Program файл использует Microsoft.AspNetCore.Components.WebAssembly.Authentication пространство имен:

using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

Пример в этом разделе основан на подходе чтения базового URL-адреса с версиями и областями из конфигурации приложения с помощью MicrosoftGraph раздела в wwwroot/appsettings.json файле. Следующие строки уже должны присутствовать в Program файле, следуя инструкциям, приведенным ранее в этой статье:

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

Program В файле найдите вызов AddMsalAuthentication метода расширения. Обновите код до следующего, включив вызов, который AddAccountClaimsPrincipalFactory добавляет фабрику субъектов утверждений учетной записи с помощью CustomAccountFactory.

Если приложение использует пользовательский класс учетной записи пользователя, RemoteUserAccountрасширяющийся, переключите класс пользовательской учетной записи пользователя на RemoteUserAccount следующий код.

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

Чтобы изучить утверждения пользователя после проверки подлинности пользователя с помощью ME-ID, можно использовать следующий UserClaims компонент:

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

Добавьте ссылку на страницу компонента в 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>

При локальном тестировании с помощью пакета SDK Graph рекомендуется использовать новый сеанс браузера InPrivate/incognito для каждого теста, чтобы предотвратить вмешательство в тесты с помощью файлов cookie. Дополнительные сведения см. в статье "Защита автономного приложения ASP.NET Core Blazor WebAssembly с помощью идентификатора Microsoft Entra.

В следующих примерах используется именованный HttpClient для вызовов API Graph для получения мобильного номера телефона пользователя для обработки звонка или настройки утверждений пользователя для включения утверждения номера мобильного телефона и утверждения расположения офиса.

В портал Azure предоставьте делегированные разрешения (области)† для данных Microsoft Graph, к которым приложение должно иметь доступ от имени пользователя. Например, в этой статье регистрация приложения должна включать делегированное разрешение на чтение данных пользователя (Microsoft.Graph>User.Read область в разрешениях API, тип: Делегировано). Область User.Read позволяет пользователям входить в приложение и позволяет приложению считывать сведения о профиле и компании пользователей, вошедшего в систему. Дополнительные сведения см. в разделе "Обзор разрешений и согласия" на платформе Майкрософт identity и обзор разрешений Microsoft Graph.

†Permissions и области означают то же самое и используются взаимозаменяемо в документации по безопасности и портал Azure. Если текст не ссылается на портал Azure, в этой статье используются /области областей при обращении к разрешениям Graph.

Области являются нечувствительными к регистру, поэтому User.Read они совпадают user.read. Вы можете использовать любой формат, но мы рекомендуем согласованный выбор в коде приложения.

После добавления областей API Microsoft Graph в регистрацию приложения в портал Azure добавьте следующую конфигурацию wwwroot/appsettings.json параметров приложения в файл в приложении, который включает базовый URL-адрес Graph с версией и областями Microsoft Graph. В следующем примере User.Read область указывается для примеров в последующих разделах этой статьи. Области не учитывает регистр.

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

В предыдущем примере заполнитель — это версия API Microsoft Graph (например: {VERSION} v1.0).

Ниже приведен пример полного wwwroot/appsettings.json файла конфигурации для приложения, использующего ME-ID в качестве identity поставщика, где для Microsoft Graph заданы данные пользователя (user.read область).

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

В предыдущем примере {TENANT ID} заполнитель — это идентификатор каталога (клиента), а {CLIENT ID} заполнитель — идентификатор приложения (клиента). Дополнительные сведения см. в статье "Защита автономного приложения ASP.NET Core Blazor WebAssembly с помощью идентификатора Microsoft Entra.

Создайте следующий GraphAuthorizationMessageHandler класс и конфигурацию проекта в Program файле для работы с API Graph. Базовый URL-адрес и области предоставляются обработчику из конфигурации.

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

Требуется косая черта (/) авторизованного URL-адреса. Предыдущий код создает следующий авторизованный URL-адрес из конфигурации параметров приложения или по умолчанию для следующего авторизованного URL-адреса, если конфигурация параметров приложения отсутствует: https://graph.microsoft.com/v1.0/

Program В файле настройте именованный HttpClient 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>();

В предыдущем примере GraphAuthorizationMessageHandler DelegatingHandler регистрируется как временная служба для AddHttpMessageHandler. Временную регистрацию рекомендуется использовать для интерфейса IHttpClientFactory, который управляет собственными областями внедрения зависимостей. Дополнительные сведения см. на следующих ресурсах:

• Базовые классы компонентов служебной программы для управления областью DI
• Обнаружение временных временных удаленных решений на стороне клиента

Требуется косая черта (/) в базовом адресе. В приведенном выше коде третий аргумент string.Join заключается string.Empty в том, чтобы обеспечить наличие https://graph.microsoft.com/v1.0/косой черты:

Вызов API Graph из компонента с помощью именованного HttpClient

Класс UserInfo.cs назначает требуемые свойства профиля пользователя атрибутом JsonPropertyNameAttribute и именем JSON, используемым ME-ID. В следующем примере настраивается свойства для номера мобильного телефона пользователя и расположения офиса.

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

В следующем UserData компоненте HttpClient создается API Graph для выдачи запроса на данные профиля пользователя. Ресурс me (me) добавляется в базовый URL-адрес с версией запроса API Graph. Данные JSON, возвращаемые Graph, десериализируются в UserInfo свойства класса. В следующем примере получается номер мобильного телефона. Вы можете добавить аналогичный код, чтобы включить расположение офиса профиля ME-ID пользователя, если вы хотите (userInfo.OfficeLocation). Если запрос маркера доступа завершается сбоем, пользователь перенаправляется для входа в приложение для нового маркера доступа.

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

Добавьте ссылку на страницу компонента в 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>

В следующей последовательности описывается новый поток пользователя для областей API Graph:

1. Новый пользователь впервые входит в приложение.
2. Пользователь дает согласие на использование приложения в пользовательском интерфейсе согласия Azure.
3. Пользователь обращается к странице компонента, которая запрашивает данные API Graph в первый раз.
4. Пользователь перенаправляется в пользовательский интерфейс согласия Azure для предоставления согласия на области API Graph.
5. Возвращается данные пользователя API Graph.

Если вы предпочитаете, что подготовка области (согласие для областей API Graph) выполняется при первоначальном входе, укажите области проверки подлинности MSAL в качестве областей маркеров доступа по умолчанию в 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);
+   }
});

При внесении предыдущих изменений в приложение поток пользователя принимает следующую последовательность:

1. Новый пользователь впервые входит в приложение.
2. Пользователь дает согласие на использование областей API приложения и Graph в пользовательском интерфейсе согласия Azure.
3. Пользователь обращается к странице компонента, которая запрашивает данные API Graph в первый раз.
4. Возвращается данные пользователя API Graph.

При локальном тестировании с помощью API Graph рекомендуется использовать новый сеанс браузера InPrivate/incognito для каждого теста, чтобы предотвратить вмешательство в тестирование файлов cookie. Дополнительные сведения см. в статье "Защита автономного приложения ASP.NET Core Blazor WebAssembly с помощью идентификатора Microsoft Entra.

Настройка утверждений пользователей с помощью именованного HttpClient

В следующем примере приложение создает мобильный номер телефона и утверждения о расположении офиса для пользователя из данных профиля пользователя ME-ID. Приложение должно иметь область API Graph, настроенную User.Read в me-ID. Тестовые учетные записи пользователей в ME-ID требуют записи для номера мобильного телефона и расположения офиса, которые можно добавить с помощью портал Azure в профили пользователей.

Если вы еще не добавили UserInfo класс в приложение, следуя инструкциям, приведенным ранее в этой статье, добавьте следующий класс и назначьте требуемые свойства профиля пользователя атрибутом JsonPropertyNameAttribute и именем JSON, используемым ME-ID. В следующем примере настраивается свойства для номера мобильного телефона пользователя и расположения офиса.

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

В следующей фабрике пользовательских учетных записей пользователей:

• Значение (ILoggerlogger) включается для удобства, если вы хотите регистрировать сведения или ошибки в методеCreateUserAsync.
• В случае AccessTokenNotAvailableException возникновения ошибки пользователь перенаправляется identity поставщику для входа в учетную запись. При запросе маркера доступа могут выполняться дополнительные или различные действия. Например, приложение может записать AccessTokenNotAvailableException и создать запрос в службу поддержки для дальнейшего изучения.
• RemoteUserAccount Платформа представляет учетную запись пользователя. Если приложению требуется настраиваемый класс учетной записи пользователя, расширяющий RemoteUserAccount, замените RemoteUserAccount на этот класс в следующем коде.

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 настроена для использования фабрики пользовательских учетных записей пользователей. Сначала убедитесь, что Program файл использует Microsoft.AspNetCore.Components.WebAssembly.Authentication пространство имен:

using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

Program В файле найдите вызов AddMsalAuthentication метода расширения. Обновите код до следующего, включив вызов, который AddAccountClaimsPrincipalFactory добавляет фабрику субъектов утверждений учетной записи с помощью CustomAccountFactory.

Если приложение использует пользовательский класс учетной записи пользователя, который расширяется RemoteUserAccount, переключите класс пользовательской учетной записи пользователя приложения на RemoteUserAccount следующий код.

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

Предыдущий пример предназначен для приложения, использующего проверку подлинности ME-ID с MSAL. Аналогичные шаблоны имеются для проверки подлинности OIDC и API. Дополнительные сведения см. в примерах в разделе "Настройка пользователя с использованием полезных данных" статьи о дополнительных сценариях безопасности ASP.NET Core Blazor WebAssembly .

Чтобы изучить утверждения пользователя после проверки подлинности пользователя с помощью ME-ID, можно использовать следующий UserClaims компонент:

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

Добавьте ссылку на страницу компонента в 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>

При локальном тестировании с помощью API Graph рекомендуется использовать новый сеанс браузера InPrivate/incognito для каждого теста, чтобы предотвратить вмешательство в тестирование файлов cookie. Дополнительные сведения см. в статье "Защита автономного приложения ASP.NET Core Blazor WebAssembly с помощью идентификатора Microsoft Entra.