ASP.NET Core Blazor WebAssembly で Graph API を使用する

"次のガイダンスは、Microsoft Graph v5 に適用されます。"

Blazor アプリで使うための Microsoft Graph SDK は、"Microsoft Graph .NET クライアント ライブラリ" と呼ばれます。

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

Azure portal で、アプリがユーザーの代わりにアクセスできる Microsoft Graph データの委任されたアクセス許可 (スコープ)†を付与します。 この記事の例では、アプリの登録には、ユーザー データを読み取るための委任されたアクセス許可 (API アクセス許可の Microsoft.Graph>User.Read スコープ、型: 委任) が含まれている必要があります。 User.Read スコープを使用すると、ユーザーはアプリにサインインでき、アプリはサインインしているユーザーのプロフィールと会社情報を読み取ることができます。 詳細については、「Microsoft identity プラットフォームでのアクセス許可と同意の概要」および「Microsoft Graph のアクセス許可の概要」をご覧ください。

†"アクセス許可" と "スコープ" は、同じことを意味し、セキュリティ ドキュメントと Azure portal で意味の区別なく使用されます。 この記事では、本文が Azure portal を参照していない限り、Graph のアクセス許可を参照するときにスコープ/を使用します。

スコープでは大文字と小文字が区別されないため、User.Read は user.read と同じです。 どちらの形式でも自由に使用できますが、アプリケーション コード間で一貫した選択肢をお勧めします。

Azure portal でアプリの登録に Microsoft Graph API スコープを追加した後、次のアプリ設定構成をアプリの wwwroot/appsettings.json ファイルに追加します。これには、Microsoft Graph のバージョンとスコープを含む Graph ベースの URL が含まれます。 次の例の User.Read スコープは、この記事の後のセクションにある例のために指定されています。 スコープでは大文字と小文字が区別されません。

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

前の例で、{VERSION} プレースホルダーは Microsoft Graph API のバージョンです (例: v1.0)。

identity プロバイダーとして ME-ID を使用するアプリの完全な wwwroot/appsettings.json 構成ファイルの例を次に示します。ここでは、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} プレースホルダーはディレクトリ (テナント) ID、 {CLIENT ID} プレースホルダーはアプリケーション (クライアント) ID です。 詳しくは、「Microsoft Entra ID を使用して、ASP.NET Core Blazor WebAssembly スタンドアロン アプリをセキュリティで保護する」をご覧ください。

アクセス トークンが取得されない場合、次のコードで 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 ファイルで、AddGraphClient 拡張メソッドを使用して Graph クライアント サービスと構成を追加します。 次のコードでは、アプリ設定ファイルにこれらの設定が見つからない場合、バージョン 1.0 の Microsoft Graph ベース アドレスと User.Read スコープが既定値になります。

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

Graph SDK を使用してコンポーネントから Graph API を呼び出す

次の UserData コンポーネントでは、挿入された GraphServiceClient を使用してユーザーの ME-ID プロファイル データを取得し、その携帯電話番号を表示します。

ME-ID でテスト ユーザーを作成する場合は、ユーザーの ME-ID プロファイルに、Azure portal の携帯電話番号を指定してください。

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>

Graph SDK をローカル環境でテストする場合は、残っている Cookie がテストに干渉しないよう、テストのたびに新しいプライベートまたはシークレット ブラウザー セッションを使うことをお勧めします。 詳しくは、「Microsoft Entra ID を使用して、ASP.NET Core Blazor WebAssembly スタンドアロン アプリをセキュリティで保護する」をご覧ください。

Graph SDK を使用してユーザー クレームをカスタマイズする

次の例のアプリでは、ME-ID ユーザー プロファイルのデータから、ユーザーの携帯電話番号とオフィスの場所のクレームを作成します。 このアプリには、ME-ID で構成された User.Read Graph API スコープが必要です。 このシナリオのテスト ユーザーは、ME-ID プロファイルに携帯電話番号とオフィスの場所を持っている必要があります。これは、Azure portal を使って追加できます。

次のカスタム ユーザー アカウント ファクトリで:

• ILogger (logger) は、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;

このセクションの例は、wwwroot/appsettings.json ファイルの MicrosoftGraph セクションを使用してアプリ構成からバージョンが指定されたベース URL とスコープを読み取る方法に基づいています。 この記事の前半のガイダンスに従うと、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 拡張メソッドの呼び出しを見つけます。 コードを次のように更新します。これには、CustomAccountFactory を使ってアカウント クレーム プリンシパル ファクトリを追加する AddAccountClaimsPrincipalFactory への呼び出しが含まれます。

RemoteUserAccount を拡張するカスタム ユーザー アカウント クラスがアプリで使用されている場合は、そのカスタム ユーザー アカウント クラスを次のコード内の RemoteUserAccount と入れ替えます。

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

次の UserClaims コンポーネントを使い、ユーザーが 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;
    }
}

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>

Graph SDK をローカル環境でテストする場合は、残っている Cookie がテストに干渉しないよう、テストのたびに新しいプライベートまたはシークレット ブラウザー セッションを使うことをお勧めします。 詳しくは、「Microsoft Entra ID を使用して、ASP.NET Core Blazor WebAssembly スタンドアロン アプリをセキュリティで保護する」をご覧ください。

次のガイダンスは、Microsoft Graph v4 に適用されます。 アプリを SDK v4 から v5 にアップグレードする場合は、「Microsoft Graph .NET SDK v5 の変更ログとアップグレード ガイド」を参照してください。

Blazor アプリで使うための Microsoft Graph SDK は、"Microsoft Graph .NET クライアント ライブラリ" と呼ばれます。

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

Azure portal で、アプリがユーザーの代わりにアクセスできる Microsoft Graph データの委任されたアクセス許可 (スコープ)†を付与します。 この記事の例では、アプリの登録には、ユーザー データを読み取るための委任されたアクセス許可 (API アクセス許可の Microsoft.Graph>User.Read スコープ、型: 委任) が含まれている必要があります。 User.Read スコープを使用すると、ユーザーはアプリにサインインでき、アプリはサインインしているユーザーのプロフィールと会社情報を読み取ることができます。 詳細については、「Microsoft identity プラットフォームでのアクセス許可と同意の概要」および「Microsoft Graph のアクセス許可の概要」をご覧ください。

†"アクセス許可" と "スコープ" は、同じことを意味し、セキュリティ ドキュメントと Azure portal で意味の区別なく使用されます。 この記事では、本文が Azure portal を参照していない限り、Graph のアクセス許可を参照するときにスコープ/を使用します。

スコープでは大文字と小文字が区別されないため、User.Read は user.read と同じです。 どちらの形式でも自由に使用できますが、アプリケーション コード間で一貫した選択肢をお勧めします。

Azure portal でアプリの登録に Microsoft Graph API スコープを追加した後、次のアプリ設定構成をアプリの wwwroot/appsettings.json ファイルに追加します。これには、Microsoft Graph のバージョンとスコープを含む Graph ベースの URL が含まれます。 次の例の User.Read スコープは、この記事の後のセクションにある例のために指定されています。 スコープでは大文字と小文字が区別されません。

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

前の例で、{VERSION} プレースホルダーは Microsoft Graph API のバージョンです (例: v1.0)。

identity プロバイダーとして ME-ID を使用するアプリの完全な wwwroot/appsettings.json 構成ファイルの例を次に示します。ここでは、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} プレースホルダーはディレクトリ (テナント) ID、 {CLIENT ID} プレースホルダーはアプリケーション (クライアント) ID です。 詳しくは、「Microsoft Entra ID を使用して、ASP.NET Core Blazor WebAssembly スタンドアロン アプリをセキュリティで保護する」をご覧ください。

アクセス トークンが取得されない場合、次のコードで 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 ファイルで、AddGraphClient 拡張メソッドを使用して Graph クライアント サービスと構成を追加します。

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

Graph SDK を使用してコンポーネントから Graph API を呼び出す

次の UserData コンポーネントでは、挿入された GraphServiceClient を使用してユーザーの ME-ID プロファイル データを取得し、その携帯電話番号を表示します。 ME-ID でテスト ユーザーを作成する場合は、ユーザーの ME-ID プロファイルに、Azure portal の携帯電話番号を指定してください。

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>

Graph SDK をローカル環境でテストする場合は、残っている Cookie がテストに干渉しないよう、テストのたびに新しいプライベートまたはシークレット ブラウザー セッションを使うことをお勧めします。 詳しくは、「Microsoft Entra ID を使用して、ASP.NET Core Blazor WebAssembly スタンドアロン アプリをセキュリティで保護する」をご覧ください。

Graph SDK を使用してユーザー クレームをカスタマイズする

次の例のアプリでは、ME-ID ユーザー プロファイルのデータから、ユーザーの携帯電話番号とオフィスの場所のクレームを作成します。 このアプリには、ME-ID で構成された User.Read Graph API スコープが必要です。 このシナリオのテスト ユーザーは、ME-ID プロファイルに携帯電話番号とオフィスの場所を持っている必要があります。これは、Azure portal を使って追加できます。

次のカスタム ユーザー アカウント ファクトリで:

• ILogger (logger) は、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;

このセクションの例は、wwwroot/appsettings.json ファイルの MicrosoftGraph セクションを使用してアプリ構成からバージョンが指定されたベース URL とスコープを読み取る方法に基づいています。 この記事の前半のガイダンスに従うと、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 拡張メソッドの呼び出しを見つけます。 コードを次のように更新します。これには、CustomAccountFactory を使ってアカウント クレーム プリンシパル ファクトリを追加する AddAccountClaimsPrincipalFactory への呼び出しが含まれます。

RemoteUserAccount を拡張するカスタム ユーザー アカウント クラスがアプリで使用されている場合は、そのカスタム ユーザー アカウント クラスを次のコード内の RemoteUserAccount と入れ替えます。

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

次の UserClaims コンポーネントを使い、ユーザーが 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;
    }
}

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>

Graph SDK をローカル環境でテストする場合は、残っている Cookie がテストに干渉しないよう、テストのたびに新しいプライベートまたはシークレット ブラウザー セッションを使うことをお勧めします。 詳しくは、「Microsoft Entra ID を使用して、ASP.NET Core Blazor WebAssembly スタンドアロン アプリをセキュリティで保護する」をご覧ください。

次の例では、Graph API の呼び出しに名前付き HttpClient を使ってユーザーの携帯電話番号を取得し、通話を処理するか、携帯電話番号のクレームとオフィスの場所のクレームを含むようにユーザーのクレームをカスタマイズします。

Azure portal で、アプリがユーザーの代わりにアクセスできる Microsoft Graph データの委任されたアクセス許可 (スコープ)†を付与します。 この記事の例では、アプリの登録には、ユーザー データを読み取るための委任されたアクセス許可 (API アクセス許可の Microsoft.Graph>User.Read スコープ、型: 委任) が含まれている必要があります。 User.Read スコープを使用すると、ユーザーはアプリにサインインでき、アプリはサインインしているユーザーのプロフィールと会社情報を読み取ることができます。 詳細については、「Microsoft identity プラットフォームでのアクセス許可と同意の概要」および「Microsoft Graph のアクセス許可の概要」をご覧ください。

†"アクセス許可" と "スコープ" は、同じことを意味し、セキュリティ ドキュメントと Azure portal で意味の区別なく使用されます。 この記事では、本文が Azure portal を参照していない限り、Graph のアクセス許可を参照するときにスコープ/を使用します。

スコープでは大文字と小文字が区別されないため、User.Read は user.read と同じです。 どちらの形式でも自由に使用できますが、アプリケーション コード間で一貫した選択肢をお勧めします。

Azure portal でアプリの登録に Microsoft Graph API スコープを追加した後、次のアプリ設定構成をアプリの wwwroot/appsettings.json ファイルに追加します。これには、Microsoft Graph のバージョンとスコープを含む Graph ベースの URL が含まれます。 次の例の User.Read スコープは、この記事の後のセクションにある例のために指定されています。 スコープでは大文字と小文字が区別されません。

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

前の例で、{VERSION} プレースホルダーは Microsoft Graph API のバージョンです (例: v1.0)。

identity プロバイダーとして ME-ID を使用するアプリの完全な wwwroot/appsettings.json 構成ファイルの例を次に示します。ここでは、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} プレースホルダーはディレクトリ (テナント) ID、 {CLIENT ID} プレースホルダーはアプリケーション (クライアント) ID です。 詳しくは、「Microsoft Entra ID を使用して、ASP.NET Core Blazor WebAssembly スタンドアロン アプリをセキュリティで保護する」をご覧ください。

Graph API を操作するために、Program ファイルで次の GraphAuthorizationMessageHandler クラスとプロジェクト構成を作成します。 ベース 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 ファイルで、Graph API の名前付き HttpClient を構成します。

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 の一時的なサービスとして登録されています。 独自の DI スコープを管理する IHttpClientFactory に、一時的な登録をお勧めします。 詳細については、次のリソースを参照してください。

• DI スコープを管理するためのユーティリティの基本コンポーネント クラス
• クライアント側の一時的な破棄を検出する

ベース アドレスの末尾のスラッシュ (/) が必要です。 上記のコードでは、末尾のスラッシュが存在することを確認するために、string.Join の 3 番目の引数は string.Empty になっています: https://graph.microsoft.com/v1.0/。

名前付き HttpClient を使用してコンポーネントから Graph API を呼び出す

UserInfo.cs クラスは、JsonPropertyNameAttribute 属性と、ME-ID によって使われる JSON 名で、必要なユーザー プロファイル プロパティを指定します。 次の例では、ユーザーの携帯電話番号とオフィスの場所のプロパティを設定します。

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 は、Graph API がユーザーのプロファイル データに対する要求を発行するために作成されます。 me リソース (me) が、バージョンが指定された Graph API 要求のベース URL に追加されます。 Graph によって返される JSON データは、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>

次のシーケンスでは、Graph API スコープの新しいユーザー フローについて説明します。

1. 新しいユーザーが初めてアプリにサインインします。
2. ユーザーは、Azure の同意 UI でアプリを使用することに同意します。
3. ユーザーは、Graph API データを初めて要求するコンポーネント ページにアクセスします。
4. ユーザーは、Graph API スコープに同意するために Azure の同意 UI にリダイレクトされます。
5. Graph API ユーザー データが返されます。

初期サインインでスコープのプロビジョニング (Graph API スコープに対する同意) を行う場合は、 Program ファイルの既定のアクセス トークン スコープとして MSAL 認証のスコープを指定します。

+ 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. ユーザーは、Azure の同意 UI でアプリと Graph API スコープの使用に同意します。
3. ユーザーは、Graph API データを初めて要求するコンポーネント ページにアクセスします。
4. Graph API ユーザー データが返されます。

Graph API をローカル環境でテストする場合は、残っている Cookie がテストに干渉しないよう、テストのたびに新しい InPrivate または Incognito ブラウザー セッションを使うことをお勧めします。 詳しくは、「Microsoft Entra ID を使用して、ASP.NET Core Blazor WebAssembly スタンドアロン アプリをセキュリティで保護する」をご覧ください。

名前付き HttpClient を使用してユーザー クレームをカスタマイズする

次の例のアプリでは、ME-ID ユーザー プロファイルのデータから、ユーザーの携帯電話番号とオフィスの場所のクレームを作成します。 このアプリには、ME-ID で構成された User.Read Graph API スコープが必要です。 ME-ID のテスト ユーザー アカウントには、携帯電話番号とオフィスの場所のエントリが必要であり、これは Azure portal を使ってユーザー プロファイルに追加できます。

この記事で前に説明したガイダンスに従って UserInfo クラスをアプリにまだ追加していない場合は、次のクラスを追加し、JsonPropertyNameAttribute 属性と ME-ID で使われる JSON 名で、必要なユーザー プロファイル プロパティを指定します。 次の例では、ユーザーの携帯電話番号とオフィスの場所のプロパティを設定します。

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

次のカスタム ユーザー アカウント ファクトリで:

• ILogger (logger) は、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 拡張メソッドの呼び出しを見つけます。 コードを次のように更新します。これには、CustomAccountFactory を使ってアカウント クレーム プリンシパル ファクトリを追加する AddAccountClaimsPrincipalFactory への呼び出しが含まれます。

RemoteUserAccount を拡張するカスタム ユーザー アカウント クラスがアプリで使われている場合は、アプリのカスタム ユーザー アカウント クラスを次のコードの RemoteUserAccount と入れ替えます。

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

前の例は、MSAL で ME-ID 認証が使用されるアプリの場合です。 OIDC と API 認証にも、同様のパターンがあります。 詳しくは、「ASP.NET Core Blazor WebAssembly のセキュリティに関するその他のシナリオ」の「ペイロード要求を使用してユーザーをカスタマイズする」セクションの例をご覧ください。

次の UserClaims コンポーネントを使い、ユーザーが 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;
    }
}

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>

Graph API をローカル環境でテストする場合は、残っている Cookie がテストに干渉しないよう、テストのたびに新しい InPrivate または Incognito ブラウザー セッションを使うことをお勧めします。 詳しくは、「Microsoft Entra ID を使用して、ASP.NET Core Blazor WebAssembly スタンドアロン アプリをセキュリティで保護する」をご覧ください。