認証が有効な Blazor Wasm アプリで、アクセストークンなしで匿名アクセス可能なエンドポイントに HTTP リクエストを送信する

C# で Single Page Application (SPA) を実装できるフレームワーク "Blazor (ブレイザー)"、その WebAssembly 版を使っての SPA 開発中の話。

プロジェクトテンプレートから認証有効 な Blazor Wasm アプリを作るのは簡単

ある日、ASP.NET Coreサーバーでホストされている、認証対応の Blazor WebAssembly アプリを作ることになった。

過去にも、Twitter 認証する Blazor WebAssembly アプリを作ったことはある。

そのときは認証後のセッション情報はブラウザの Cookie を使う方式で実装していた。

そのため、ユーザー情報を内蔵した、また、アクセストークンを使用する方式の Blazor WebAssembly アプリを実装したことはこれまではなかった。

なお、自分は普段は Windows OS の Visual Studio を使って Blazor アプリを開発している。

そのため、下図のとおり、Visual Studio のプロジェクトテンプレートから認証機能付き Blazor WebAssembly アプリを作るのはとても簡単なことだ。

こうして実装した Blazor WebAssembly は認証後のセッション情報はアクセストークンとしてクライアント側に保持される。

この Blazor WebAssembly アプリでは、想定どおり、[Authorizaition] 属性を付与した Web API エンドポイントは匿名アクセスから保護されるようになっていた。

次は公開 API エンドポイントを追加

続けてこのアプリに、"最近の更新" ニュースフィードを一覧表示する機能を実装することになった。

"最近の更新" ニュースフィードのリストは、サーバー側で生成、Web API エンドポイントを経由してクライアント側に提供するように実装。

なお、要件として、このニュースフィードは、ログインしていないユーザーでも公開される必要があった。

そのため，匿名アクセスを許可する目的で，"最近の更新" リストを提供する API エンドポイントには [Authorization] 属性を付与しないよう実装した。

[ApiController]

[Route("[controller]")]

public class RecentlyUpdatesController : ControllerBase

{

  [HttpGet]

  public IEnumerable<string> Get()

  {

    ...

この API 実装を、資格情報なしの cURL コマンドでテストしてみたところ、もちろん問題なく動作た (下図)。

だがしかし... 捕捉されない例外が発生!

サーバ側の実装が完了、続けてクライアント側の実装に取り掛かった。

DI 経由で注入された「HttpClient」オブジェクトを使い、その匿名アクセス可能な API エンドポイントから "最近の更新" リストを取得するコードを記述。

そこまで実装してアプリを実行してみた。

しかし残念ながら、予期せぬことに、画面上に "最近の更新" リストが表示される代わりに何かのエラーが発生してしまった。

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]

  Unhandled exception rendering component: ''

  Microsoft.AspNetCore.Components.WebAssembly.Authentication.AccessTokenNotAvailableException: ''

  at Microsoft.AspNetCore.Components.WebAssembly.Authentication.AuthorizationMessageHandler.SendAsync(

    System.Net.Http.HttpRequestMessage request, 

    System.Threading.CancellationToken cancellationToken)

この例外の原因は...

Visual Studio のプロジェクトテンプレートから「認証」オプションを有効にして作成された Blazor WebAssembly アプリのコードをよく読んでみた。

するとどうやら、HTTP リクエストの送信時は、ユーザがサインインしているかどうかに関わらず、また、リクエスト先の URL に関係なく、その HTTP リクエストに常にアクセストークンを添付するよう、起動時の初期化コードで構成されているようであった。

しかしユーザーがサインインしていないときは、アクセストークンを HTTP 要求に添付したくても、（まだサインインしていないので）アクセストークンを入手前なので添付できない。

以上が原因で AccessTokenNotAvailableException 例外が発生してしまったようだ。

解決方法

この問題を解決する方法は、自分が思いついた範囲だと3つほどある。

解決策 その 1

解決策その 1 は、AuthorizationMessageHanlder を設定して、指定されたサブパス以下のエンドポイントにのみアクセストークンを添付できるようにすることである。

この方法を選択するには、まず、サーバ側のエンドポイント (保護したいエンドポイント) の URL を、同じサブパス (例: "/authorized/...") の下になるように配置し直す必要がある。

[Authorize]

[ApiController]

// [Route("[controller]")]

[Route("authorized/[controller]")]

// 👆 このAPIのURLを "authorized "サブパスの下になるように変更。

public class WeatherForecastController : ControllerBase

{

...

次に、クライアント側で AuthorizationMessageHandler をカスタムオプションで設定する必要がある。

これはクライアント側プロジェクトの Program クラスの Main メソッドで行う。

public static async Task Main(string[] args)

{

  var builder = WebAssemblyHostBuilder.CreateDefault(args);

  builder.RootComponents.Add<App>("app");

  // 👇 この、AuthorizationMessageHandler を構成する

  //    コードを追加。

  builder.Services.AddTransient<AuthorizationMessageHandler>(sp =>

  {

    // 👇 作業に必要なサービスを DI から入手。

    var provider = sp.GetRequiredService<IAccessTokenProvider>();

    var naviManager = sp.GetRequiredService<NavigationManager>();

    // 👇 新しい「AuthorizationMessageHandler」インスタンスを作成、

    //    設定後にそれを返す。

    var handler = new AuthorizationMessageHandler(provider, naviManager);

    handler.ConfigureHandler(authorizedUrls: new[] {

      // 👇 ここに、HTTP 要求送信時には

      //    アクセストークンを添付したい URL を列記。

      naviManager.ToAbsoluteUri("authorized/").AbsoluteUri

    });

    return handler;

  });

  ...

最後に、HttpClientFactory に対し、こうして自分で設定したAuthorizationMessageHandler を使用するように設定する。

  ...

  // 👇 BaseAddressAuthorizationMessageHandler ではなく、

  //   上記で設定した AuthorizationMessageHandler を使用。

  builder.Services.AddHttpClient("BlazorWasmApp.ServerAPI", client => ...)

    // .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

    .AddHttpMessageHandler<AuthorizationMessageHandler>();

  // Supply HttpClient instances that include access tokens when making requests to the server project

  builder.Services.AddTransient(sp => sp.GetRequiredService<IHttpClientFactory>()

    .CreateClient("BlazorWasmApp.ServerAPI"));

  ...

以上で、"/authorized/..." サブパス以下の URL に HTTP 要求を送信する場合にのみ、アクセストークンが添付されるようになる。

解決策 その 2

解決策その 2 は、認証が必要なエンドポイントに HTTP リクエストを送信する際に、「IHttpClientFactory」からアクセストークンを添付するように設定された,

名前付きの HTTP クライアントを明示的に取得する方法だ。

まず、クライアント側プロジェクトの Program クラスの Main メソッドで HttpClient を DI に登録する際、IHttpClientFactory サービスから HttpClient を取得するのではなく、ベースアドレスを設定しただけのプレーンな HttpClient を DI に登録するようにする。

  public static async Task Main(string[] args)

  {

    ...

    // 👇 DI には、プレーンな HttpClient サービスを登録。

    // builder.Services.AddTransient(sp => ...CreateClient("BlazorWasmApp.ServerAPI"));

    builder.Services.AddTransient(sp => new HttpClient { 

      BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)

    });

    ...

そして、保護された API エンドポイントに HTTP 要求を送信する際には、DI から直接HttpClient を取得するのではなく、IHttpClientFactory から名前付きの HttpClient オブジェクトを明示的に指定して取得すればよい。

@* @inject HttpClient Http *@

@inject IHttpClientFactory HttpClientFactory

...

@code {

  protected override async Task OnInitializedAsync()

  {

    ...

    // 👇 保護された API にアクセスするためには、

    //    DI から直接 HttpClient を取得しない。

    // forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");

    // 👇 代わりに IHttpClientFactory サービスから

    //    明示的に名前を指定して HttpClient を取得して使用。

    var http = HttpClientFactory.CreateClient("BlazorWasmApp.ServerAPI");

    forecasts = await http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");

}

解決策 その 3

解決策その 3 は、解決策 その 2 とは逆の解決方法である。

この解決策は、匿名アクセスを許可されたエンドポイントに HTTP リクエストを送信する際に、IHttpClientFactory からプレーンな HTTP クライアントを、名前を指定して明示的に取得する方法だ。

これを行うためには、クライアント側プロジェクトの Program クラスの Main メソッドにて、IHttpClientFactory サービスの構成処理に対し、プレーンな HttpClient を名前付きで登録しておく。

public static async Task Main(string[] args)

{

  ...

  // 👇 プレーンな HttpClient を、

  //    IHttpClientFactory サービスに名前を付けて追加する。

  builder.Services.AddHttpClient("BlazorWasmApp.AnonymousAPI", client => {

    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress);

  });

  builder.Services.AddHttpClient("BlazorWasmApp.ServerAPI", ...)

      .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

  ...

そうした上で、公開 API のエンドポイントに HTTP 要求を送信する際には、DI から HttpClient オブジェクトを直接取得するのではなく、IHttpClientFactory から名前を指定して明示的にプレーンな HttpClient オブジェクトを取得して使うとよい。

@* @inject HttpClient Http *@

@inject IHttpClientFactory HttpClientFactory

...

@code {

  protected override async Task OnInitializedAsync()

  {

    ...

    // 👇 公開 API にアクセスするためには、

    //    DI から直接 HttpClient を取得しない。

    // RecentlyUpdates = await Http.GetFromJsonAsync<string[]>("RecentlyUpdates");

    // 👇 代わりに IHttpClientFactory サービスから

    //    明示的に名前を指定して HttpClient を取得して使用。

    var http = HttpClientFactory.CreateClient("BlazorWasmApp.AnonymousAPI");

    RecentlyUpdates = await http.GetFromJsonAsync<string[]>("RecentlyUpdates");

}

まとめ

Visual Studio のプロジェクトテンプレートから "認証 "オプションを有効にして作成した Blazor WebAssembly アプリは、ユーザがサインインしているかどうかに関わらず、常にアクセストークンを HTTP 要求に添付しようとする。

この実装では、たとえ匿名のエンドポイントへのアクセスであっても、ユーザがサインインしていない場合は "AccessTokenNotAvailableException" 例外が発生してしまう。

この問題は、以下のいずれかの方法で回避することが可能だ。

• 解決策 1. - 指定されたサブパス以下の URL のみにアクセストークンを添付するように制限を設定する。
• 解決策 2. - 保護された API にアクセスする場合に、アクセストークンを添付するよう構成した HttpClient を明示的に名前を指定して取得して使用する。
• 解決策 3. - 匿名でアクセス可能な API にアクセスする場合に、プレーンな HttpClient を明示的に名前を指定して取得して使用する。

今回の問題の再現と、上記 3 つの解決策を収録したサンプルコードを、下記 GitHub リポジトリで公開してある。

以上