ASP.NET Core Blazor から Web API を呼び出す

この記事では、Blazor アプリから Web API を呼び出す方法について説明します。

外部 Web API を呼び出すためのサーバー側のシナリオ

サーバーベースのコンポーネントからは HttpClient インスタンス (通常、IHttpClientFactory を使用して作成されます) を使用して外部 Web API を呼び出します。 サーバー側アプリに適用されるガイダンスについては、ASP.NET Core で IHttpClientFactory を使用して HTTP リクエストを行う を参照してください。

サーバー側アプリには、HttpClient サービスが含まれません。 ファクトリ インフラストラクチャ HttpClient を使用して HttpClient アプリにを提供します。

Program ファイルで次の操作を行います。

builder.Services.AddHttpClient();

次の Razor コンポーネントは、ASP.NET Core の IHttpClientFactory を使用して HTTP 要求を行う 記事の 基本的な使用法 の例のように、GitHub のブランチに対して Web API にリクエストを送信します。

CallWebAPI.razor:

@page "/call-web-api"
@using System.Text.Json
@using System.Text.Json.Serialization
@inject IHttpClientFactory ClientFactory

<h1>Call web API from a server-side Razor component</h1>

@if (getBranchesError || branches is null)
{
    <p>Unable to get branches from GitHub. Please try again later.</p>
}
else
{
    <ul>
        @foreach (var branch in branches)
        {
            <li>@branch.Name</li>
        }
    </ul>
}

@code {
    private IEnumerable<GitHubBranch>? branches = [];
    private bool getBranchesError;
    private bool shouldRender;

    protected override bool ShouldRender() => shouldRender;

    protected override async Task OnInitializedAsync()
    {
        using var request = new HttpRequestMessage(HttpMethod.Get,
            "https://api.github.com/repos/dotnet/AspNetCore.Docs/branches");
        request.Headers.Add("Accept", "application/vnd.github.v3+json");
        request.Headers.Add("User-Agent", "HttpClientFactory-Sample");

        var client = ClientFactory.CreateClient();

        using var response = await client.SendAsync(request);

        if (response.IsSuccessStatusCode)
        {
            using var responseStream = await response.Content.ReadAsStreamAsync();
            branches = await JsonSerializer.DeserializeAsync
                <IEnumerable<GitHubBranch>>(responseStream);
        }
        else
        {
            getBranchesError = true;
        }

        shouldRender = true;
    }

    public class GitHubBranch
    {
        [JsonPropertyName("name")]
        public string? Name { get; set; }
    }
}

C# 12 以降の前の例では、[] 変数のために空の配列 (branches) が作成されています。 .NET 8 より前の SDK でコンパイルされた以前のバージョンの C# の場合は、空の配列 (Array.Empty<GitHubBranch>()) を作成します。

その他の作業例については、ASP.NET Core Blazor ファイルのアップロード記事の Web API コントローラーにファイルをアップロードするサーバー側のファイルアップロードの例を参照してください。

builder.Services.AddScoped(sp => 
    new HttpClient
    { 
        BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) 
    });

@page "/call-web-api"
@using System.Text.Json
@using System.Text.Json.Serialization
@inject HttpClient Client

<h1>Call web API from a Blazor WebAssembly Razor component</h1>

@if (getBranchesError || branches is null)
{
    <p>Unable to get branches from GitHub. Please try again later.</p>
}
else
{
    <ul>
        @foreach (var branch in branches)
        {
            <li>@branch.Name</li>
        }
    </ul>
}

@code {
    private IEnumerable<GitHubBranch>? branches = [];
    private bool getBranchesError;
    private bool shouldRender;

    protected override bool ShouldRender() => shouldRender;

    protected override async Task OnInitializedAsync()
    {
        using var request = new HttpRequestMessage(HttpMethod.Get,
            "https://api.github.com/repos/dotnet/AspNetCore.Docs/branches");
        request.Headers.Add("Accept", "application/vnd.github.v3+json");
        request.Headers.Add("User-Agent", "HttpClientFactory-Sample");

        using var response = await Client.SendAsync(request);

        if (response.IsSuccessStatusCode)
        {
            using var responseStream = await response.Content.ReadAsStreamAsync();
            branches = await JsonSerializer.DeserializeAsync
                <IEnumerable<GitHubBranch>>(responseStream);
        }
        else
        {
            getBranchesError = true;
        }

        shouldRender = true;
    }

    public class GitHubBranch
    {
        [JsonPropertyName("name")]
        public string? Name { get; set; }
    }
}

builder.Services.AddScoped(sp => 
    new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddScoped(sp => 
    new HttpClient { BaseAddress = new Uri("https://localhost:5001") });

builder.Services.AddHttpClient("WebAPI", client => 
    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress));

上記のクライアント側の例では、ベース アドレスの設定に builder.HostEnvironment.BaseAddress (IWebAssemblyHostEnvironment.BaseAddress) を使っています。これを使って、クライアント側アプリのベース アドレス (通常は、ホスト ページの <base> タグの href 値に由来します) を取得できます。

(クライアント アプリと同じ URL 空間ではなく) 外部 Web API を呼び出す場合、またはサーバー側アプリでサービスを構成している場合 (たとえば、サーバー上のクライアント側コンポーネントのプリレンダリングを処理する場合)、URI を Web API のベース アドレスに設定します。 次の例では、Web API のベース アドレスを https://localhost:5001 に設定します。これは、別の Web API アプリが実行される場所で、クライアント アプリからの要求に応答する準備ができています。

builder.Services.AddHttpClient("WebAPI", client => 
    client.BaseAddress = new Uri("https://localhost:5001"));

次のようなコンポーネント コードがあるとします。

• IHttpClientFactory のインスタンスによって、名前付きの HttpClient が作成されます。
• 名前付き HttpClient を使用して、/forecast の Web API から JSON の気象予報データの GET 要求が発行されます。

@inject IHttpClientFactory ClientFactory

...

@code {
    private Forecast[]? forecasts;

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

        forecasts = await client.GetFromJsonAsync<Forecast[]>("forecast") ?? [];
    }
}

型指定された HttpClient

型指定された HttpClient では、1 つ以上のアプリの HttpClient インスタンス (既定または名前付き) を使用して、1 つ以上の Web API エンドポイントからデータを返します。

Microsoft.Extensions.Http NuGet パッケージをアプリに追加します。

次の例では、/forecast の Web API から JSON の気象予報データの GET 要求を発行します。

ForecastHttpClient.cs:

using System.Net.Http.Json;

namespace BlazorSample.Client;

public class ForecastHttpClient(HttpClient http)
{
    public async Task<Forecast[]> GetForecastAsync() => 
        await http.GetFromJsonAsync<Forecast[]>("forecast") ?? [];
}

クライアント プロジェクトの Program ファイルで、次のとおりです。

builder.Services.AddHttpClient<ForecastHttpClient>(client => 
    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress));

上記の例では、ベース アドレスの設定に builder.HostEnvironment.BaseAddress (IWebAssemblyHostEnvironment.BaseAddress) を使っています。これを使って、クライアント側アプリのベース アドレス (通常は、ホスト ページの <base> タグの href 値に由来します) を取得できます。

(クライアント アプリと同じ URL 空間ではなく) 外部 Web API を呼び出す場合、またはサーバー側アプリでサービスを構成している場合 (たとえば、サーバー上のクライアント側コンポーネントのプリレンダリングを処理する場合)、URI を Web API のベース アドレスに設定します。 次の例では、Web API のベース アドレスを https://localhost:5001 に設定します。これは、別の Web API アプリが実行される場所で、クライアント アプリからの要求に応答する準備ができています。

builder.Services.AddHttpClient<ForecastHttpClient>(client => 
    client.BaseAddress = new Uri("https://localhost:5001"));

コンポーネントによって型指定された HttpClient が挿入され、Web API が呼び出されます。

次のようなコンポーネント コードがあるとします。

• 前の ForecastHttpClient のインスタンスが挿入され、型指定された HttpClient を作成します。
• 型指定された HttpClient を使用して、 JSON の気象データの GET 要求が Web API から発行されます。

@inject ForecastHttpClient Http

...

@code {
    private Forecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetForecastAsync();
    }
}

HttpRequestMessage、HttpResponseMessage、およびHttpClientの処分

本文のない HttpRequestMessage では、明示的な破棄は必要ありません。 ただし、次のいずれかのパターンで破棄できます。

• using 宣言 (C# 8 以降):

  using var request = new HttpRequestMessage(...);
  

• using ブロック (すべての C# リリース):

  using (var request = new HttpRequestMessage(...))
  {
      ...
  }
  

次の理由により、すべての HttpRequestMessage をすべての使用で破棄することをお勧めします。

• ファイナライザーを回避してパフォーマンスを向上させる。
• 将来的に、最初から要求本文が含まれていないHttpRequestMessageに要求本文が追加される可能性に備えて、コードを堅牢化します。
• 委任ハンドラーが Dispose/DisposeAsyncの呼び出しを想定している場合に、機能上の問題を回避する可能性があります。
• 特定のケースを覚えるよりも、あらゆる場所に一般的なルールを適用する方が簡単です。

常にHttpResponseMessageインスタンスを破棄します。

を呼び出して作成されたインスタンスはフレームワークによって管理されるため、破棄HttpClient。

Example:

using var request = new HttpRequestMessage(HttpMethod.Get, "/weather-forecast");
var client = clientFactory.CreateClient("ExternalApi");
using var response = await client.SendAsync(request);

プリレンダリングされるデータ

プリレンダリング時に、コンポーネントは 2 回レンダリングされます。最初は静的に、次に対話形式でレンダリングされます。 状態は、プリレンダリングされたコンポーネントから対話型コンポーネントに自動的に流れるわけではありません。 コンポーネントが非同期の初期化操作を実行し、初期化中に異なる状態に対して別のコンテンツ ("読み込み中..." 進行インジケーターなど) をレンダリングする場合、コンポーネントが 2 回レンダリングされるときにちらつきが発生することがあります。

これは、BlazorWebAppCallWebApiアプリと BlazorWebAppCallWebApi_Weatherサンプル アプリが示す永続的なコンポーネント状態 API を使用して、プリレンダリングされた状態をフローさせることで対処できます。 コンポーネントが対話形式でレンダリングされる場合、同じ状態を使用して同じ方法でレンダリングできます。 詳細については、次のリソースを参照してください。

• ASP.NET Core Blazor プリレンダリングされた状態の永続化
• ASP.NET Core Blazor navigation

JSON 補助機能

System.Net.Http.Json パッケージには、System.Net.Http.HttpClientを使用した自動シリアル化と逆シリアル化を実行するSystem.Net.Http.HttpContentとSystem.Text.Jsonの拡張メソッドが用意されています。 System.Net.Http.Json パッケージは、.NET共有フレームワークによって提供され、アプリへのパッケージ参照を追加する必要はありません。

HttpClient は、元のサーバーに対して要求を行うための構成済みのサービスとして用意されています。 HttpClient と JSON のヘルパー (System.Net.Http.Json.HttpClientJsonExtensions) は、サード パーティの Web API エンドポイントを呼び出すためにも使用されます。 HttpClient はブラウザーの Fetch API を使用して実装され、同じ配信元ポリシーの適用など、その制限の対象となります。これについては、 クロスオリジン リソース共有 (CORS) セクションのこの記事で後述します。

クライアントのベース アドレスは、生成元のサーバーのアドレスに設定されます。 HttpClient ディレクティブを使用して @inject インスタンスをコンポーネントに挿入します。

@using System.Net.Http
@inject HttpClient Http

System.Net.Http.Json にアクセスするには、HttpClientJsonExtensions 名前空間を使用します。これには、GetFromJsonAsync、PutAsJsonAsync、および PostAsJsonAsync が含まれます。

@using System.Net.Http.Json

次のセクションでは、JSON ヘルパーについて説明します。

• GET
• POST
• PUT
• PATCH

System.Net.Http には、HTTP 要求を送信し、HTTP 応答を受信する (たとえば DELETE 要求を送信する) ための追加のメソッドが含まれています。 詳細については、「 DELETE と追加の拡張メソッド 」セクションを参照してください。

JSON から取得する (GetFromJsonAsync)

GetFromJsonAsync は、HTTP GET 要求を送信し、JSON 応答本文を解析してオブジェクトを作成します。

次のコンポーネント コードでは、コンポーネントによって todoItems が表示されます。 GetFromJsonAsync は、コンポーネントの初期化が完了すると呼び出されます (OnInitializedAsync)。

todoItems = await Http.GetFromJsonAsync<TodoItem[]>("todoitems");

JSON として投稿する (PostAsJsonAsync)

PostAsJsonAsync は、要求本文に JSON としてシリアル化された値が含まれる POST 要求を、指定された URI に送信します。

次のコンポーネント コードでは、コンポーネントのバインドされた要素によって newItemName が提供されています。 AddItem メソッドは、<button> 要素を選択することにでトリガーされます。

await Http.PostAsJsonAsync("todoitems", addItem);

PostAsJsonAsync では HttpResponseMessage が返されます。 応答メッセージから JSON コンテンツを逆シリアル化するには、ReadFromJsonAsync 拡張メソッドを使用します。 次の例では、JSON の気象データを配列として読み取ります。

var content = await response.Content.ReadFromJsonAsync<WeatherForecast[]>() ?? 
    Array.Empty<WeatherForecast>();

JSON として配置する (PutAsJsonAsync)

PutAsJsonAsync は、JSON でエンコードされたコンテンツを含む HTTP PUT 要求を送信します。

次のコンポーネント コードでは、editItem および Name の IsCompleted 値が、コンポーネントのバインドされた要素によって提供されています。 項目の Id は、UI の別の部分 (表示されない) で項目が選択され、EditItem が呼び出されたときに設定されます。 SaveItem メソッドは、<button> 要素を選択することでトリガーされます。 次の例では、簡潔にするために todoItems の読み込みを示していません。 項目の読み込みの例については、 JSON からの GET (GetFromJsonAsync) セクションを参照してください。

await Http.PutAsJsonAsync($"todoitems/{editItem.Id}", editItem);

PutAsJsonAsync では HttpResponseMessage が返されます。 応答メッセージから JSON コンテンツを逆シリアル化するには、ReadFromJsonAsync 拡張メソッドを使用します。 次の例では、JSON の気象データを配列として読み取ります。

var content = await response.Content.ReadFromJsonAsync<WeatherForecast[]>() ?? 
    Array.Empty<WeatherForecast>();

await Http.PatchAsJsonAsync(
    $"todoitems/{id}", 
    "[{\"operationType\":2,\"path\":\"/IsComplete\",\"op\":\"replace\",\"value\":true}]");

@using System.Diagnostics.CodeAnalysis

...

@code {
    [StringSyntax(StringSyntaxAttribute.Json)]
    private const string patchOperation =
        """[{"operationType":2,"path":"/IsComplete","op":"replace","value":true}]""";

    ...

    await Http.PatchAsJsonAsync($"todoitems/{id}", patchOperation);
}

using var response = await Http.PatchAsJsonAsync(...);
var content = await response.Content.ReadFromJsonAsync<TodoItem[]>() ??
    Array.Empty<TodoItem>();

[
  {
    "operationType": 2,
    "path": "/IsComplete",
    "op": "replace",
    "value": true
  }
]

@using System.Text.Json
@using System.Text.Json.Serialization
@using Microsoft.AspNetCore.JsonPatch.SystemTextJson

var patchDocument = new JsonPatchDocument<TodoItem>()
    .Replace(p => p.IsComplete, true);

@using System.Text.Json
@using System.Text.Json.Serialization
@using Microsoft.AspNetCore.JsonPatch

var patchDocument = new JsonPatchDocument<TodoItem>()
    .Replace(p => p.IsComplete, true);

private async Task UpdateItem(long id)
{
    await Http.PatchAsJsonAsync(
        $"todoitems/{id}", 
        patchDocument.Operations, 
        new JsonSerializerOptions()
        {
            DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingDefault
        });
}

using Microsoft.AspNetCore.JsonPatch.SystemTextJson;

using Microsoft.AspNetCore.JsonPatch;

app.MapPatch("/todoitems/{id}", async (long id, TodoContext db) =>
{
    if (await db.TodoItems.FindAsync(id) is TodoItem todo)
    {
        var patchDocument = 
            new JsonPatchDocument<TodoItem>().Replace(p => p.IsComplete, true);
        patchDocument.ApplyTo(todo);
        await db.SaveChangesAsync();

        return TypedResults.Ok(todo);
    }

    return TypedResults.NotFound();
});

DELETE (DeleteAsync) およびその他の拡張メソッド

System.Net.Http には、HTTP 要求を送信し、HTTP 応答を受信するための追加の拡張メソッドが含まれています。 HttpClient.DeleteAsync は、HTTP DELETE 要求を Web API に送信するために使用します。

次のコンポーネント コードでは、<button> 要素で DeleteItem メソッドを呼び出しています。 バインドされた <input> 要素では、削除する項目の id が提供されます。

await Http.DeleteAsync($"todoitems/{id}");

using var request = new HttpRequestMessage(HttpMethod.Post, "/Filesave");
request.SetBrowserRequestStreamingEnabled(true);
request.Content = content;

using var response = await Http.SendAsync(request);

Cookie に基づく要求資格情報

このセクションのガイダンスは、認証 cookieに依存するクライアント側のシナリオに適用されます。

ベアラー トークン認証よりも安全性が高いとみなされる cookie ベースの認証では、構成済みの cookie で AddHttpMessageHandler を指定して DelegatingHandler を呼び出して、Web API 要求ごとに HttpClient 資格情報を送信できます。 ハンドラーは、SetBrowserRequestCredentials を使用して BrowserRequestCredentials.Include を構成します。これは、クロスオリジン要求を含む要求ごとに、Cookie や HTTP 認証ヘッダーなどの資格情報を送信するようにブラウザーに通知します。

CookieHandler.cs:

public class CookieHandler : DelegatingHandler
{
    protected override Task<HttpResponseMessage> SendAsync(
        HttpRequestMessage request, CancellationToken cancellationToken)
    {
        request.SetBrowserRequestCredentials(BrowserRequestCredentials.Include);
        request.Headers.Add("X-Requested-With", [ "XMLHttpRequest" ]);

        return base.SendAsync(request, cancellationToken);
    }
}

CookieHandler は、次のように Program ファイルに登録されます。

builder.Services.AddTransient<CookieHandler>();

メッセージ ハンドラーは、HttpClient 認証を必要とするすべての構成済み cookie に次のように追加されます。

builder.Services.AddHttpClient(...)
    .AddHttpMessageHandler<CookieHandler>();

HttpRequestMessage を作成するときは、次のようにブラウザー要求の資格情報とヘッダーを直接設定します。

using var request = new HttpRequestMessage() { ... };

request.SetBrowserRequestCredentials(BrowserRequestCredentials.Include);
request.Headers.Add("X-Requested-With", [ "XMLHttpRequest" ]);

Web API 呼び出しにトークン ハンドラーを使用する

Blazor Web AppOIDC 認証では、トークン ハンドラーアプローチを使用して、外部 Web API 呼び出しをセキュリティで保護するための送信要求を行うことができます。 この方法は、この記事の「サンプル アプリ」セクションで説明されているBlazorWebAppOidcおよびBlazorWebAppOidcServerサンプル アプリによって使用されます。

詳細については、次のリソースを参照してください。

• ASP.NET Coreサーバー側およびBlazor Web App追加のセキュリティ シナリオ
• ASP.NET Core を OpenID Connect (OIDC) でセキュリティ保護する Blazor Web App
  • YARP と Aspire なし (対話型自動)
  • YARP と Aspire なし (対話型サーバー)

Microsoft ID プラットフォーム を使用した Web API 呼び出し

Blazor Web AppMicrosoft ID プラットフォーム を使用する Microsoft Identity Web パッケージ および Microsoft Entra ID を使用すると、Microsoft.Identity.Web.DownstreamApi NuGet パッケージによって提供される API を使用して、合理化された Web API 呼び出しを行うことができます。

アプリ設定ファイル (appsettings.json) で、ベース URL とスコープを指定します。 次の例では、 {BASE ADDRESS} プレースホルダーは Web API のベース URL です。 単一のスコープは、アプリ ID URI ({APP ID URI} プレースホルダー) とスコープ名 ({SCOPE NAME} プレースホルダー) で指定されます。

"DownstreamApi": {
  "BaseUrl": "{BASE ADDRESS}",
  "Scopes": [ "{APP ID URI}/{SCOPE NAME}" ]
}

Example:

"DownstreamApi": {
  "BaseUrl": "https://localhost:7277",
  "Scopes": [ "api://11112222-bbbb-3333-cccc-4444dddd5555/Weather.Get" ]
}

アプリの Program ファイルで、次を呼び出します。

• EnableTokenAcquisitionToCallDownstreamApi: トークン取得を有効にして Web API を呼び出します。
• AddDownstreamApi: Microsoft Identity Web パッケージは、Web API 呼び出しを行う名前付きダウンストリーム Web サービスを作成する API を提供します。 IDownstreamApiは、外部 Web API (CallApiForUserAsync プロジェクト) から気象データを取得するためにMinimalApiJwtを呼び出すために使用されるサーバー側クラスに挿入されます。
• AddDistributedTokenCaches: .NET分散トークン キャッシュをサービス コレクションに追加します。
• AddDistributedMemoryCache: キャッシュ項目をメモリに格納する IDistributedCache の既定の実装を追加します。
• 分散トークン キャッシュ オプション (MsalDistributedTokenCacheAdapterOptions) を構成します。
  • デバッグを目的とした開発では、 DisableL1Cache を true に設定することで、L1 キャッシュを無効にすることができます。 運用環境では、必ず false にリセットしてください。
  • L1CacheOptions.SizeLimitを使用して L1 キャッシュの最大サイズを設定して、キャッシュがサーバーのメモリをオーバーランしないようにします。 既定値は 500 MB です。
  • デバッグ目的での開発では、 Encrypt を false (既定値) に設定することで、保存時のトークン暗号化を無効にすることができます。 運用環境では、必ず true にリセットしてください。
  • SlidingExpirationを使用してキャッシュからトークンの削除を設定します。 既定値は 1 時間です。
  • L2 キャッシュ エラー (OnL2CacheFailure) のコールバックと非同期の L2 キャッシュ書き込み (EnableAsyncL2Write) に関するガイダンスなど、詳細については、「 MsalDistributedTokenCacheAdapterOptions と トークン キャッシュのシリアル化: 分散トークン キャッシュ」を参照してください。

キャッシュを暗号化することを選択できます。運用環境では常に暗号化する必要があります。

builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureAd"))
    .EnableTokenAcquisitionToCallDownstreamApi()
    .AddDownstreamApi("DownstreamApi", 
        builder.Configuration.GetSection("DownstreamApi"))
    .AddDistributedTokenCaches();

// Requires the 'Microsoft.Extensions.Caching.Memory' NuGet package
builder.Services.AddDistributedMemoryCache();

builder.Services.Configure<MsalDistributedTokenCacheAdapterOptions>(
    options => 
    {
        // The following lines that are commented out reflect
        // default values. We recommend overriding the default
        // value of Encrypt to encrypt tokens at rest.

        //options.DisableL1Cache = false;
        //options.L1CacheOptions.SizeLimit = 500 * 1024 * 1024;
        options.Encrypt = true;
        //options.SlidingExpiration = TimeSpan.FromHours(1);
    });

メモリ内分散トークン キャッシュは、 AddDistributedTokenCaches を呼び出すときに作成され、分散トークン キャッシュに使用できる基本実装があることを確認します。

運用 Web アプリと Web API では、運用分散トークン キャッシュ (例: Redis、Microsoft SQL Server、Microsoft Azure Cosmos DB) を使用する必要があります。

builder.Services.AddInMemoryTokenCaches();

AddDistributedMemoryCache では、キャッシュ項目をメモリに格納する IDistributedCache の既定の実装が追加されます。これは、トークン キャッシュのために Microsoft Identity Web によって使用されます。

AddDistributedMemoryCache には、Microsoft.Extensions.Caching.Memory NuGet パッケージへのパッケージ参照が必要です。

運用分散キャッシュ プロバイダーを構成するには、 ASP.NET Coreに関するページを参照してください。

詳細については、「 トークン キャッシュのシリアル化: 分散キャッシュ」を参照してください。 ただし、示されているコード例は、AddDistributedMemoryCache ではなく、AddDistributedTokenCache を介して分散キャッシュを構成する ASP.NET Core アプリには適用されません。

運用環境で共有 Data Protection キー リングを使用すると、Web ファーム内のサーバー間でアプリのインスタンスが、 MsalDistributedTokenCacheAdapterOptions.Encrypt が true に設定されているときにトークンを復号化できます。

options.Encrypt = false;

次の例は、共有キー リングに Azure Blob Storage Azure Key Vault (PersistKeysToAzureBlobStorage/ProtectKeysWithAzureKeyVault) を使用する方法を示しています。 サービス構成は、デモンストレーションを目的としたベース ケース シナリオです。 運用アプリをデプロイする前に、Azure サービスについて理解し、このセクションの最後にリンクされているAzure サービスの専用ドキュメント セットを使用してベスト プラクティスを採用してください。

Blazor Web Appのサーバー プロジェクトに次のパッケージを追加します。

• Azure.Extensions.AspNetCore.DataProtection.Blobs
• Azure.Extensions.AspNetCore.DataProtection.Keys

データ保護キーを維持するようにAzure Blob Storageを構成します。 ASP.NET Core の Key ストレージ プロバイダーに関するガイダンスに従います。

Azure Key Vaultを構成して、保存されているデータ保護キーを暗号化します。 データ保護 ASP.NET Core構成のガイダンスに従ってください。

サービスが登録されている Program ファイルで、次のコードを使用します。

TokenCredential? credential;

if (builder.Environment.IsProduction())
{
    credential = new ManagedIdentityCredential("{MANAGED IDENTITY CLIENT ID}");
}
else
{
    // Local development and testing only
    DefaultAzureCredentialOptions options = new()
    {
        // Specify the tenant ID to use the dev credentials when running the app locally
        // in Visual Studio.
        VisualStudioTenantId = "{TENANT ID}",
        SharedTokenCacheTenantId = "{TENANT ID}"
    };

    credential = new DefaultAzureCredential(options);
}

builder.Services.AddDataProtection()
    .SetApplicationName("{APPLICATION NAME}")
    .PersistKeysToAzureBlobStorage(new Uri("{BLOB URI}"), credential)
    .ProtectKeysWithAzureKeyVault(new Uri("{KEY IDENTIFIER}"), credential);

{MANAGED IDENTITY CLIENT ID}: Azure マネージド Identity クライアント ID (GUID)。

{TENANT ID}: テナント ID。

{APPLICATION NAME}: SetApplicationName データ保護システム内でこのアプリの一意の名前を設定します。 この値は、アプリのデプロイ間で一致する必要があります。

{BLOB URI}: キー ファイルへの完全な URI。 URI は、キー ファイルを作成するときにAzure Storageによって生成されます。 SAS は使用しないでください。

{KEY IDENTIFIER}: キーの暗号化に使用Azure Key Vaultキー識別子。 アクセス ポリシーを使用すると、アプリケーションは、 Get、 Unwrap Key、および Wrap Key のアクセス許可を持つキー コンテナーにアクセスできます。 キー識別子は、作成後に Entra または Azure ポータルのキーから取得されます。 キー コンテナー キーの自動ローテーションを有効にする場合は、キー GUID が識別子の末尾に配置されないバージョンレスキー識別子をアプリのキー コンテナー構成で使用してください (例: https://contoso.vault.azure.net/keys/data-protection)。

ユーザーの代わりに呼び出すときに IDownstreamApi を挿入し、 CallApiForUserAsync を呼び出します。

internal sealed class ServerWeatherForecaster(IDownstreamApi downstreamApi) : IWeatherForecaster
{
    public async Task<IEnumerable<WeatherForecast>> GetWeatherForecastAsync()
    {
        var response = await downstreamApi.CallApiForUserAsync("DownstreamApi",
            options =>
            {
                options.RelativePath = "/weather-forecast";
            });

        return await response.Content.ReadFromJsonAsync<WeatherForecast[]>() ??
            throw new IOException("No weather forecast!");
    }
}

この方法は、この記事の「サンプル アプリ」セクションで説明されているBlazorWebAppEntraおよびBlazorWebAppEntraBffサンプル アプリによって使用されます。

詳細については、次のリソースを参照してください。

• ASP.NET Core のキー ストレージ プロバイダー
• ASP.NET Coreデータ保護の構成
• ASP.NET Core アプリで.NETのAzure SDKを使用します
• Web API のドキュメント |Microsoft ID プラットフォーム
• Web API を呼び出す Web API: API を呼び出す: オプション 2: ヘルパー クラスを使用してダウンストリーム Web API を呼び出す
• IDownstreamApi
• Microsoft Entra ID を用いてBlazor Web App ASP.NET Core をセキュアに保護します
  • YARP と Aspire を使用する (対話型自動)
  • YARP と Aspire なし (対話型自動)
• ASP.NET Core を Webファーム内でホストする: データプロテクション
• Azure Key Vault ドキュメント
• Azure Storage ドキュメント
• Azureのロールベースのアクセス制御を使用して、Key Vaultのキー、証明書、シークレットにアクセスを提供

HttpClient と HttpRequestMessage と Fetch API 要求オプション

このセクションのガイダンスは、ベアラー トークン認証に依存するクライアント側のシナリオに適用されます。

HttpClient (API ドキュメント) と HttpRequestMessage を使用して、要求をカスタマイズできます。 たとえば、HTTP メソッドや要求ヘッダーを指定できます。 次のコンポーネントは、Web API エンドポイントに POST 要求を行い、応答本文を表示します。

TodoRequest.razor:

@page "/todo-request"
@using System.Net.Http.Headers
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject HttpClient Http
@inject IAccessTokenProvider TokenProvider

<h1>ToDo Request</h1>

<h1>ToDo Request Example</h1>

<button @onclick="PostRequest">Submit POST request</button>

<p>Response body returned by the server:</p>

<p>@responseBody</p>

@code {
    private string? responseBody;

    private async Task PostRequest()
    {
        using var request = new HttpRequestMessage()
        {
            Method = new HttpMethod("POST"),
            RequestUri = new Uri("https://localhost:10000/todoitems"),
            Content =
                JsonContent.Create(new TodoItem
                {
                    Name = "My New Todo Item",
                    IsComplete = false
                })
        };

        var tokenResult = await TokenProvider.RequestAccessToken();

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

            request.Content.Headers.TryAddWithoutValidation(
                "x-custom-header", "value");

            using var response = await Http.SendAsync(request);
            var responseStatusCode = response.StatusCode;

            responseBody = await response.Content.ReadAsStringAsync();
        }
    }

    public class TodoItem
    {
        public long Id { get; set; }
        public string? Name { get; set; }
        public bool IsComplete { get; set; }
    }
}

Blazorのクライアント側の実装はHttpClientを利用して、Fetch APIを使用し、リクエスト固有のFetch APIオプションをHttpRequestMessageの拡張メソッドおよびWebAssemblyHttpRequestMessageExtensionsで設定します。 汎用的な SetBrowserRequestOption 拡張メソッドを使用して、その他のオプションを設定できます。 Blazor と、基盤になる Fetch API は、要求ヘッダーを直接追加または変更しません。 ブラウザーなどのユーザー エージェントとヘッダーの対話方法の詳細については、外部ユーザー エージェントのドキュメント セットとその他の Web リソースを参照してください。

request.SetBrowserResponseStreamingEnabled(false);

request.SetBrowserResponseStreamingEnabled(true);

- using var response = await Http.SendAsync(request);
+ using var response = await Http.SendAsync(request, 
+     HttpCompletionOption.ResponseHeadersRead);

クロスオリジン要求に資格情報を含めるには、SetBrowserRequestCredentials 拡張メソッドを使用します。

request.SetBrowserRequestCredentials(BrowserRequestCredentials.Include);

Fetch API オプションの詳細については、 MDN Web ドキュメント「WindowOrWorkerGlobalScope.fetch(): Parameters」を参照してください。

エラーの処理

Web API 応答エラーの発生時には、開発者コードでエラーを処理します。 たとえば、GetFromJsonAsync では、Content-Type が application/json である Web API からの JSON 応答が想定されています。 応答が JSON 形式ではない場合、コンテンツ検証により NotSupportedException がスローされます。

次の例では、天気予報データ要求の URI エンドポイントのスペルが間違っています。 URI は WeatherForecast である必要がありますが、呼び出しでは WeatherForcast として表示されます。これには、e に文字 Forecast がありません。

GetFromJsonAsync の呼び出しでは、JSON が返されることが想定されていますが、Content-Type が text/html の未処理の例外について、Web API から HTML が返されます。 /WeatherForcast へのパスが見つからず、ミドルウェアから要求のページまたはビューを提供できないため、未処理の例外が発生します。

クライアント上の OnInitializedAsync では、応答コンテンツが非 JSON であると検証されると NotSupportedException がスローされます。 例外は catch ブロックでキャッチされます。ここで、カスタム ロジックを使用してエラーをログに記録したり、わかりやすいエラー メッセージをユーザーに表示したりすることができます。

ReturnHTMLOnException.razor:

@page "/return-html-on-exception"
@using {PROJECT NAME}.Shared
@inject HttpClient Http

<h1>Fetch data but receive HTML on unhandled exception</h1>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <h2>Temperatures by Date</h2>

    <ul>
        @foreach (var forecast in forecasts)
        {
            <li>
                @forecast.Date.ToShortDateString():
                @forecast.TemperatureC &#8451;
                @forecast.TemperatureF &#8457;
            </li>
        }
    </ul>
}

<p>
    @exceptionMessage
</p>

@code {
    private WeatherForecast[]? forecasts;
    private string? exceptionMessage;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            // The URI endpoint "WeatherForecast" is misspelled on purpose on the 
            // next line. See the preceding text for more information.
            forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForcast");
        }
        catch (NotSupportedException exception)
        {
            exceptionMessage = exception.Message;
        }
    }
}

詳細については、「ASP.NET Core Blazor アプリでのハンドル エラーを参照してください。

クロスオリジン リソース共有 (CORS)

多くの場合、ブラウザーのセキュリティにより、Web ページが Web ページを提供した元とは異なる配信元への要求を行うことが制限されます。 この制限は、 同じ配信元ポリシーと呼ばれます。 同一オリジン ポリシーにより、悪意のあるサイトが別のサイトから機密データを読み取ることが制限されます (ただし、阻止されません)。 ブラウザーから別の配信元のエンドポイントに要求を行うには、 エンドポイント で クロスオリジン リソース共有 (CORS) を有効にする必要があります。

サーバー側 CORS の詳細については、「ASP.NET Core の Enable Cross-Origin Requests (CORS) 」を参照してください。 この記事の例は、Razor コンポーネント シナリオに直接関連していませんが、この記事は、一般的な CORS の概念を学習するために役立ちます。

クライアント側の CORS 要求の詳細については、「ASP.NET Core Blazor WebAssembly 追加のセキュリティ シナリオを参照してください。

@inject AntiforgeryStateProvider Antiforgery

private async Task OnSubmit()
{
    var antiforgery = Antiforgery.GetAntiforgeryToken();
    using var request = new HttpRequestMessage(HttpMethod.Post, "action");
    request.Headers.Add("RequestVerificationToken", antiforgery.RequestToken);
    using var response = await client.SendAsync(request);
    ...
}

Web API アクセスのテストのための Blazor フレームワーク コンポーネントの例

Firefox Browser Developer など、Web API バックエンド アプリを直接テストするために、さまざまなネットワーク ツールが公開されています。 Blazor フレームワークの参照ソースには、テストに役立つ HttpClient テスト資産が含まれています。

HttpClientTest GitHub リポジトリ内の dotnet/aspnetcore アセット

builder.Services.AddScoped(sp =>
    new HttpClient
    {
        BaseAddress = new Uri(builder.Configuration["FrontendUrl"] ?? 
            "https://localhost:5002")
    });

builder.Services.AddHttpClient();

public class ClientMovieService(HttpClient http) : IMovieService
{
    public async Task<Movie[]> GetMoviesAsync(bool watchedMovies) => 
        await http.GetFromJsonAsync<Movie[]>("movies") ?? [];
}

public class ServerMovieService(MovieContext db) : IMovieService
{
    public async Task<Movie[]> GetMoviesAsync(bool watchedMovies) => 
        watchedMovies ? 
        await db.Movies.Where(t => t.IsWatched).ToArrayAsync() : 
        await db.Movies.ToArrayAsync();
}

その他のリソース

General

オーバーポスティング攻撃の防止

Web API は、大量割り当て攻撃とも呼ばれる過剰ポスティング攻撃に対して脆弱になる可能性があります。 オーバーポスト攻撃は、悪意のあるユーザーが、レンダリングされたフォームの一部ではなく、開発者がユーザーに修正を許可しないプロパティのデータを処理する HTML フォームの POST をサーバーに発行したときに発生します。 "オーバーポスティング" という用語は、文字どおり、悪意のあるユーザーがフォームで "過剰に" ポストすることを意味します。

オーバーポスト攻撃の軽減に関するガイダンスについては、「Tutorial: ASP.NET Coreを参照してください。

Server-side

• ASP.NET Coreサーバー側およびBlazor Web App追加のセキュリティ シナリオ: HttpClient を使用してセキュリティで保護された Web API 要求を行う方法について説明します。
• ASP.NET Core
• ASP.NET Core で HTTPS を強制する
• Kestrel HTTPS エンドポイントの構成

Client-side

• ASP.NET Core Blazor WebAssembly追加のセキュリティ シナリオ: HttpClient を使用してセキュリティで保護された Web API 要求を行う方法について説明します。
• ASP.NET CoreでGraph APIを使用するBlazor WebAssembly
• フェッチ API