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

この記事では、Blazor WebAssembly アプリでの Microsoft Graph API の使用方法について説明します。これは、アプリが Microsoft Cloud サービス リソースにアクセスできるようにする RESTful Web API です。

Blazor アプリで Microsoft Graph を直接操作するには、2 つの方法があります。

• Graph SDK: Microsoft Graph SDK は、Microsoft Graph にアクセスする高品質かつ効率的で、回復性を備えたアプリケーションの構築を簡素化するように設計されています。 この方法を使うには、この記事の上部にある [Graph SDK] ボタンを選んでください。

• 名前付き HttpClient と Graph API: 名前付き HttpClient は、Web API 要求を Graph API に直接発行できます。 この方法を使うには、この記事の上部にある [名前付き HttpClient と Graph API] ボタンを選んでください。

この記事のガイダンスは、主要な Microsoft Graph のドキュメントと、他の Microsoftドキュメント セットでの追加の Azure セキュリティ ガイダンスを置き換えることを目的としたものではありません。 運用環境で Microsoft Graph を実装する前に、この記事の「その他のリソース」セクションのセキュリティ ガイダンスを評価してください。 Microsoft のすべてのベスト プラクティスに従って、アプリの攻撃対象領域を制限してください。

重要

この記事で説明するシナリオは、AAD B2C ではなく、Microsoft Entra (ME-ID) を ID プロバイダーとして使う場合に適用されます。 クライアント側の Blazor WebAssembly アプリと AAD B2C ID プロバイダーでの Microsoft Graph の使用は、現在、サポートされていません。これは、クライアント側の Blazor アプリではセキュリティで保護できないクライアント シークレットがアプリに必要になるためです。 AAD B2C スタンドアロン Blazor WebAssembly アプリで Graph API を使用する場合は、ユーザーに代わって Graph API にアクセスするバックエンド サーバー (Web) API を作成します。 クライアント側のアプリは、Web API を呼び出すユーザーを認証および認可します。これは、安全に Microsoft Graph にアクセスし、クライアント側の Blazor アプリにデータを返すためです。 クライアント シークレットは、クライアント上の Blazor アプリではなく、サーバーベースの Web API で安全に管理されます。 クライアント側の Blazor アプリにクライアント シークレットを保存しないでください。

この記事の例では、新しい .NET/C# の機能を利用します。 この例に .NET 7 以前を使用する場合は、若干の変更が必要です。 ただし、Microsoft Graph の操作に関連するテキストとコードの例は、ASP.NET Core のすべてのバージョンで同じです。

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

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

Graph SDK の例の場合、スタンドアロン Blazor WebAssembly アプリでは、次のパッケージ参照が必要です。 アプリで MSAL 認証が有効になっている場合は、最初の 2 つのパッケージが既に参照されています。たとえば、「Microsoft Entra ID を使用して ASP.NET Core Blazor WebAssembly スタンドアロン アプリをセキュリティで保護する」のガイダンスに従って作成したアプリなどです。

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

Note

.NET アプリへのパッケージの追加に関するガイダンスについては、「パッケージ利用のワークフロー」 (NuGet ドキュメント) の "パッケージのインストールと管理" に関する記事を参照してください。 NuGet.org で正しいパッケージ バージョンを確認します。

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

Note

†"アクセス許可" と "スコープ" は、同じことを意味し、セキュリティ ドキュメントと Azure portal で意味の区別なく使用されます。 この記事では、Graph API のアクセス許可を表す場合は "スコープ" を使用します。/

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

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

前の例で、{VERSION} プレースホルダーは Microsoft Graph API のバージョンです (例: v1.0)。 末尾のスラッシュは "必須" です。

ID プロバイダーとして 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/v1.0/",
    "Scopes": [
      "user.read"
    ]
  }
}

前の例では、{TENANT ID} プレースホルダーはディレクトリ (テナント) ID、 {CLIENT ID} プレースホルダーはアプリケーション (クライアント) ID です。 詳しくは、「Microsoft Entra ID を使用して、ASP.NET Core Blazor WebAssembly スタンドアロン アプリをセキュリティで保護する」をご覧ください。

スタンドアロン アプリに次の GraphClientExtensions クラスを追加します。 スコープは、AuthenticateRequestAsync メソッドの AccessTokenRequestOptions の Scopes プロパティに提供されます。

アクセス トークンが取得されない場合、次のコードで 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[]>()
                });

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

重要

前のコードが AdditionalScopesToConsent ではなくスコープを追加するために DefaultAccessTokenScopes を使用する理由については、「DefaultAccessTokenScopes と AdditionalScopesToConsent」のセクションを参照してください。

Program ファイルで、AddGraphClient 拡張メソッドを使用して Graph クライアント サービスと構成を追加します。

var baseUrl = builder.Configuration.GetSection("MicrosoftGraph")["BaseUrl"];
var scopes = builder.Configuration.GetSection("MicrosoftGraph:Scopes")
    .Get<List<string>>();

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 がテストに干渉しないよう、テストのたびに新しい InPrivate またはシークレットのブラウザー セッションを使うことをお勧めします。 詳しくは、「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 がスローされた場合、ユーザーは自分のアカウントにサインインするために ID プロバイダーにリダイレクトされます。 アクセス トークンの要求が失敗した場合は、追加または異なるアクションを実行できます。 たとえば、アプリで 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;

namespace BlazorSample;

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 = 
        config.GetSection("MicrosoftGraph")["BaseUrl"];

    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 = builder.Configuration.GetSection("MicrosoftGraph")["BaseUrl"];
var scopes = builder.Configuration.GetSection("MicrosoftGraph:Scopes")
    .Get<List<string>>();

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 がテストに干渉しないよう、テストのたびに新しい InPrivate またはシークレットのブラウザー セッションを使うことをお勧めします。 詳しくは、「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 クライアント ライブラリ" と呼ばれます。

Graph SDK の例の場合、スタンドアロン Blazor WebAssembly アプリでは、次のパッケージ参照が必要です。 アプリで MSAL 認証が有効になっている場合は、最初の 2 つのパッケージが既に参照されています。たとえば、「Microsoft Entra ID を使用して ASP.NET Core Blazor WebAssembly スタンドアロン アプリをセキュリティで保護する」のガイダンスに従って作成したアプリなどです。

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

Note

.NET アプリへのパッケージの追加に関するガイダンスについては、「パッケージ利用のワークフロー」 (NuGet ドキュメント) の "パッケージのインストールと管理" に関する記事を参照してください。 NuGet.org で正しいパッケージ バージョンを確認します。

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

Note

†"アクセス許可" と "スコープ" は、同じことを意味し、セキュリティ ドキュメントと Azure portal で意味の区別なく使用されます。 この記事では、Graph API のアクセス許可を表す場合は "スコープ" を使用します。/

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

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

前の例で、{VERSION} プレースホルダーは Microsoft Graph API のバージョンです (例: v1.0)。 末尾のスラッシュは "必須" です。

ID プロバイダーとして 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/v1.0/",
    "Scopes": [
      "user.read"
    ]
  }
}

前の例では、{TENANT ID} プレースホルダーはディレクトリ (テナント) ID、 {CLIENT ID} プレースホルダーはアプリケーション (クライアント) ID です。 詳しくは、「Microsoft Entra ID を使用して、ASP.NET Core Blazor WebAssembly スタンドアロン アプリをセキュリティで保護する」をご覧ください。

スタンドアロン アプリに次の GraphClientExtensions クラスを追加します。 スコープは、AuthenticateRequestAsync メソッドの AccessTokenRequestOptions の Scopes プロパティに提供されます。 HttpClient が Microsoft Graph から応答を受け取るのにより長い時間をかけられるよう、IHttpProvider.OverallTimeout は既定値の 100 秒から 300 秒に増やされています。

アクセス トークンが取得されない場合、次のコードで 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()
        {
        }
    }
}

重要

前のコードが AdditionalScopesToConsent ではなくスコープを追加するために DefaultAccessTokenScopes を使用する理由については、「DefaultAccessTokenScopes と AdditionalScopesToConsent」のセクションを参照してください。

Program ファイルで、AddGraphClient 拡張メソッドを使用して Graph クライアント サービスと構成を追加します。

var baseUrl = builder.Configuration
    .GetSection("MicrosoftGraph")["BaseUrl"];
var scopes = builder.Configuration.GetSection("MicrosoftGraph:Scopes")
    .Get<List<string>>();

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 がテストに干渉しないよう、テストのたびに新しい InPrivate またはシークレットのブラウザー セッションを使うことをお勧めします。 詳しくは、「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 がスローされた場合、ユーザーは自分のアカウントにサインインするために ID プロバイダーにリダイレクトされます。 アクセス トークンの要求が失敗した場合は、追加または異なるアクションを実行できます。 たとえば、アプリで 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;

namespace BlazorSample;

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"];
var scopes = builder.Configuration.GetSection("MicrosoftGraph:Scopes")
    .Get<List<string>>();

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 がテストに干渉しないよう、テストのたびに新しい InPrivate またはシークレットのブラウザー セッションを使うことをお勧めします。 詳しくは、「Microsoft Entra ID を使用して、ASP.NET Core Blazor WebAssembly スタンドアロン アプリをセキュリティで保護する」をご覧ください。

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

例には、スタンドアロン Blazor WebAssembly アプリの Microsoft.Extensions.Http に対するパッケージ参照が必要です。

Note

.NET アプリへのパッケージの追加に関するガイダンスについては、「パッケージ利用のワークフロー」 (NuGet ドキュメント) の "パッケージのインストールと管理" に関する記事を参照してください。 NuGet.org で正しいパッケージ バージョンを確認します。

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

Note

†"アクセス許可" と "スコープ" は、同じことを意味し、セキュリティ ドキュメントと Azure portal で意味の区別なく使用されます。 この記事では、Graph API のアクセス許可を表す場合は "スコープ" を使用します。/

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

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

前の例で、{VERSION} プレースホルダーは Microsoft Graph API のバージョンです (例: v1.0)。 末尾のスラッシュは "必須" です。

ID プロバイダーとして 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/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: [ config.GetSection("MicrosoftGraph")["BaseUrl"] ?? 
                string.Empty ],
            scopes: config.GetSection("MicrosoftGraph:Scopes").Get<List<string>>());
    }
}

Program ファイルで、Graph API の名前付き HttpClient を構成します。

builder.Services.AddTransient<GraphAuthorizationMessageHandler>();

builder.Services.AddHttpClient("GraphAPI",
        client => client.BaseAddress = new Uri(
            builder.Configuration.GetSection("MicrosoftGraph")["BaseUrl"] ?? 
                string.Empty))
    .AddHttpMessageHandler<GraphAuthorizationMessageHandler>();

前の例では、GraphAuthorizationMessageHandlerDelegatingHandler が AddHttpMessageHandler の一時的なサービスとして登録されています。 独自の DI スコープを管理する IHttpClientFactory に、一時的な登録をお勧めします。 詳細については、次のリソースを参照してください。

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

名前付き 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>>() ?? [];

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

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

重要

前のコードが AdditionalScopesToConsent ではなくスコープを追加するために DefaultAccessTokenScopes を使用する理由については、「DefaultAccessTokenScopes と AdditionalScopesToConsent」のセクションを参照してください。

アプリに上記の変更が加えられる場合、ユーザー フローは次のシーケンスを採用します。

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

Graph API をローカル環境でテストする場合は、残っている cookie がテストに干渉しないよう、テストのたびに新しい InPrivate またはシークレットのブラウザー セッションを使うことをお勧めします。 詳しくは、「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 がスローされた場合、ユーザーは自分のアカウントにサインインするために ID プロバイダーにリダイレクトされます。 アクセス トークンの要求が失敗した場合は、追加または異なるアクションを実行できます。 たとえば、アプリで 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;

namespace BlazorSample;

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 またはシークレットのブラウザー セッションを使うことをお勧めします。 詳しくは、「Microsoft Entra ID を使用して、ASP.NET Core Blazor WebAssembly スタンドアロン アプリをセキュリティで保護する」をご覧ください。

アプリ ロールの有無にかかわらず、アプリの登録にユーザーを割り当てる

Azure portal で次の手順を使用して、アプリの登録にユーザーを追加し、ユーザーにロールを割り当てることができます。

ユーザーを追加するには、Azure portal の ME-ID 領域から [ユーザー] を選択します。

1. [新しいユーザー]>[新しいユーザーの作成] を選択します。
2. [ユーザーの作成] テンプレートを使用します。
3. Identity 領域でユーザーの情報を入力します。
4. 初期パスワードを生成したり、ユーザーが初めてサインインしたときに変更する初期パスワードを割り当てたりすることができます。 ポータルによって生成されたパスワードを使用する場合は、ここでメモしておきます。
5. [作成] を選択してユーザーを作成してください。 [新しいユーザーの作成] インターフェイスを閉じたら、[更新] を選択してユーザー一覧を更新し、新しいユーザーを表示します。
6. この記事の例では、ユーザーの一覧から名前を選択し、[プロパティ] を選択し、連絡先情報を編集し、携帯電話番号を指定して新しいユーザーに携帯電話番号を割り当てます。

"アプリ ロールなしで" アプリにユーザーを割り当てるには:

1. Azure portal の ME-ID 領域で、[エンタープライズ アプリケーション] を開きます。
2. 一覧からアプリを選択します。
3. ユーザーおよびグループの選択
4. [Add user/group](ユーザーまたはグループの追加) を選択します。
5. ユーザーを選択します。
6. 割り当てを選択します。

"アプリ ロールを使って" ユーザーをアプリに割り当てるには:

1. Microsoft Entra ID グループとロールを使用した ASP.NET Core Blazor WebAssembly のガイダンスに従って、Azure portal でアプリの登録にロールを追加します。
2. Azure portal の ME-ID 領域で、[エンタープライズ アプリケーション] を開きます。
3. 一覧からアプリを選択します。
4. ユーザーおよびグループの選択
5. [Add user/group](ユーザーまたはグループの追加) を選択します。
6. ユーザーを選択して、アプリにアクセスするためのロールを選択します。 ユーザーのすべてのロールが割り当てられるまで、アプリにユーザーを追加するプロセスを繰り返すと、複数のロールがユーザーに割り当てられます。 複数のロールを持つユーザーは、アプリのユーザーの [ユーザーとグループ] リストに、割り当てられたロールごとに 1 回一覧表示されます。
7. 割り当てを選択します。

DefaultAccessTokenScopes と AdditionalScopesToConsent

この記事の例では、AdditionalScopesToConsent ではなく DefaultAccessTokenScopes を使用して Graph API スコープをプロビジョニングします。

AdditionalScopesToConsent は、ユーザーが Azure の同意 UI を介して MSAL を使用して初めてアプリにサインインするときに Graph API スコープをプロビジョニングできないため、使用されません。 ユーザーが Graph SDK で初めて Graph API にアクセスしようとすると、例外が発生します。

Microsoft.Graph.Models.ODataErrors.ODataError: Access token is empty.

ユーザーが DefaultAccessTokenScopes 経由で提供された Graph API スコープをプロビジョニングした後、アプリは後続のユーザー サインインに AdditionalScopesToConsent を使用できます。 ただし、委任された Graph スコープを持つ新しいユーザーを定期的に追加したり、委任された Graph API スコープをアプリに追加したりする必要がある運用アプリでは、アプリ コードを変更しても意味がありません。

ユーザーがアプリに初めてサインインするときに Graph API アクセスのスコープをプロビジョニングする方法についての前述の説明は、次の場合にのみ適用されます。

• Graph SDK を採用するアプリ。
• Graph API の名前付き HttpClient アクセスを使用し、アプリへの最初のサインイン時に Graph スコープへの同意をユーザーに求めるアプリ。

ユーザーが最初のサインイン時に Graph スコープへの同意を求めない名前付き HttpClient を使用する場合、ユーザーは、事前構成済みの DelegatingHandler、名前付き HttpClient を介して "Graph API へのアクセスを最初に要求するとき" に、Graph API スコープの同意用の Azure の同意 UI にリダイレクトされます。 Graph スコープが名前付き HttpClient アプローチで最初に同意されていない場合、DefaultAccessTokenScopes も AdditionalScopesToConsent もアプリによって呼び出されません。 詳細については、この記事の名前付き HttpClient の範囲をご覧ください。

その他のリソース

一般的なガイダンス

• Microsoft Graph のドキュメント
• Microsoft Graph サンプル Blazor WebAssembly アプリ: このサンプルでは、Microsoft Graph .NET SDK を使って Blazor WebAssembly アプリから Office 365 内のデータにアクセスする方法を示します。
• 「Microsoft Graphを使用して .NET アプリをビルドする」チュートリアルと Microsoft Graph サンプル ASP.NET Core アプリ: これらのリソースは、"クライアント側" の Blazor WebAssembly アプリからの Graph の呼び出しには直接該当しませんが、リンクされたリソースの ME-ID アプリ構成と Microsoft Graph コーディング プラクティスは、スタンドアロン Blazor WebAssembly アプリに関連していて、一般的なベスト プラクティスについて参照する必要があります。

セキュリティ ガイダンス

• Microsoft Graph の認証の概要
• Microsoft Graph のアクセス許可の概要
• Microsoft Graph のアクセス許可のリファレンス
• Microsoft ID プラットフォームでのアクセス許可と同意の概要
• 最小限の特権の原則でセキュリティを高める
• インターネット上の Azure 特権エスカレーションに関する記事 (Google 検索結果)
• Microsoft セキュリティのベスト プラクティス: 特権アクセスのセキュリティ保護