ASP.NET Core Blazor Web Assembly (WASM) からトークン (JWT) ベースの認証が必要な ASP.NET Core Web API にクロスドメインでアクセスしてデータを取得するサンプルを作ってみました。以下に作り方を備忘録として書いておきます。
Visual Studio 2022 のテンプレートを利用して ASP.NET Core Web API と Blazor WASM のソリューションを別々に作成します。完成後、Visual Studio 2022 から両方のプロジェクトを実行し (［デバッグ(D)］⇒［デバッグなしで開始(H)］)、Blazor WASM から Web API に要求を出して応答を Blazor WASM の画面上に表示したのが上の画像です。
以下に、まず Web API アプリの作り方、次に Blazor WASM アプリの作り方を書きます。
(1) Web API アプリ
(1.1) プロジェクトの作成
元になる ASP.NET Core Web API アプリのプロジェクトは Visual Studio 2022 V17.10.3 のテンプレートで自動生成されたものを使いました。プロジェクトを作成する際「追加情報」のダイアログで「認証の種類(A)」は「なし」にします。この記事ではターゲットフレームワークは .NET 8.0 にしました。
自動生成されたプロジェクトにはサンプルのコントローラ WeatherForecastController が実装されていて、Visual Studio からプロジェクトを実行し、ブラウザから WeatherForecast を要求すると JSON 文字列が返ってきます。
これに JWT ベースの認証を実装し（即ち、トークンが無いとアクセス拒否するようにし）、さらに Blazor WASM からクロスドメインで呼び出せるようにするため CORS を実装します。
加えて、クライアントからの要求に応じてトークンを発行するための API も追加で実装します。この記事では、トークン要求の際クライアントから ID とパスワードを送信してもらい、それらが既存の ASP.NET Core Identity で有効であることを確認してからトークンを返すようにします。無効の場合は HTTP 401 Unauthorized 応答を返します。
(1.2) NuGet パッケージのインストール
下の画像の赤枠で囲んだ Microsoft.AspNetCore.Authentication.JwtBearer を NuGet からインストールします。
青枠で囲んだものは、上に述べたトークン発行の際の既存の ASP.NET Core Identity によるユーザー認証を行うために必要です。ASP.NET Core Identity を使わない場合（例えば、ユーザー認証なしで無条件にトークンを返すようにする場合）は必要ありません。
(1.3) JWT 認証スキーマを登録
自動生成された Program.cs に、AddAuthentication メソッドを使って JWT 認証スキーマを登録するコードを追加します。加えて、認証を有効にするため app.UseAuthentication(); も追加します。
app.UseAuthentication(); は既存のコードの app.UseAuthorization(); の前にする必要があるので注意してください。
具体的には以下のコードで「JWT ベースの認証を行うため追加」とコメントしたコードを追加します。
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.AspNetCore.Identity;
using Microsoft.IdentityModel.Tokens;
using System.Text;
using WebApi.Data;
using Microsoft.EntityFrameworkCore;
namespace WebApi
{
public class Program
{
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
// JWT ベースの認証を行うため追加
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
.AddJwtBearer(options =>
{
options.TokenValidationParameters = new TokenValidationParameters
{
ValidateIssuer = true,
ValidateAudience = true,
ValidateLifetime = true,
ValidateIssuerSigningKey = true,
ValidIssuer = builder.Configuration["Jwt:Issuer"],
ValidAudience = builder.Configuration["Jwt:Issuer"],
IssuerSigningKey = new SymmetricSecurityKey(
Encoding.UTF8.GetBytes(builder.Configuration["Jwt:Key"]!))
};
});
// ・・・中略・・・
// JWT ベースの認証を行うため追加
app.UseAuthentication();
//・・・後略・・・
(1.4) Key と Issuer を appsettings.json に登録
上の (1.3) コードでは Key と Issuer を appsettings.json ファイルより取得するようにしていますので、以下のように "Jwt" 要素を追加します。
{
・・・中略・・・
"AllowedHosts": "*",
"Jwt": {
"Key": "veryVerySecretKeyWhichMustBeLongerThan32",
"Issuer": "https://localhost:44366"
}
}
Key はパスワードのようなもので任意の文字列を設定できます。32 文字以上にしないとエラーになるので注意してください。.NET Core 3.1 時代は 16 文字以上で良かったのですが、いつからか 32 文字以上に変わったらしいです。Issuer はサービスを行う URL にします。
(1.5) [Authorize] 属性を付与
自動生成された WeatherForecastController コントローラの Get() メソッドに [Authorize] 属性を付与します。
ここまでの設定で JWT トークンベースのアクセス制限の実装は完了しており、トークンなしで WeatherForecastController コントローラの Get() メソッドを要求すると HTTP 401 Unauthorized 応答が返ってくるはずです。
(1.6) トークンを発行する API を実装
クライアントから送信されてきた ID とパスワードでユーザー認証を行った上でトークンを発行する API を実装します。以下のコードでは、UserManager<IdentityUser> オブジェクトへの参照を DI によって取得し、それを使って既存の ASP.NET Core Identity から情報を取得してユーザー認証に用いています。
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Mvc;
using Microsoft.IdentityModel.Tokens;
using System.IdentityModel.Tokens.Jwt;
using System.Text;
namespace WebApi.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class TokenController : ControllerBase
{
private readonly IConfiguration _config;
private readonly UserManager<IdentityUser> _userManager;
public TokenController(IConfiguration config,
UserManager<IdentityUser> userManager)
{
_config = config;
_userManager = userManager;
}
[AllowAnonymous]
[HttpPost]
public async Task<IActionResult> CreateToken(LoginModel login)
{
string? id = login.Username;
string? pw = login.Password;
IActionResult response = Unauthorized();
if (!string.IsNullOrEmpty(id) && !string.IsNullOrEmpty(pw))
{
var user = await _userManager.FindByNameAsync(id);
if (user != null &&
await _userManager.CheckPasswordAsync(user, pw))
{
var tokenString = BuildToken();
response = Ok(new { token = tokenString });
}
}
return response;
}
private string BuildToken()
{
var key = new SymmetricSecurityKey(
Encoding.UTF8.GetBytes(_config["Jwt:Key"]!));
var creds = new SigningCredentials(
key, SecurityAlgorithms.HmacSha256);
var token = new JwtSecurityToken(
issuer: _config["Jwt:Issuer"],
audience: _config["Jwt:Issuer"],
claims: null,
notBefore: null,
expires: DateTime.Now.AddMinutes(30),
signingCredentials: creds);
return new JwtSecurityTokenHandler().WriteToken(token);
}
}
public class LoginModel
{
public string? Username { get; set; }
public string? Password { get; set; }
}
}
既存の ASP.NET Core Identity から情報を取得してユーザー認証を行うためには上記以外にも以下の (a) ～ (d) の追加が必要です。
ただし、ユーザー認証など面倒なことはしないで、CreateToken メソッドが呼ばれたら無条件にトークンを発行して返せばよいという場合は不要です。上のコードの UserManager<IdentityUser> オブジェクトの DI を行う部分も不要です。
(a) 上の (1.2) の画像で青枠で囲んだ NuGet パッケージのインストール。
(b) IdentityDbContext を継承した ApplicationDbContext クラスを追加。Data フォルダを作ってそれにクラスファイルとして実装します。
using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore;
namespace WebApi.Data
{
public class ApplicationDbContext : IdentityDbContext
{
public ApplicationDbContext(
DbContextOptions<ApplicationDbContext> options)
: base(options)
{
}
}
}
(c) appsettings.json に ASP.NET Core Identity が使う既存の SQL Server DB への接続文字列を追加。
(d) Program.cs に以下の「// 追加」とコメントしたコードを追加。これらは上の「(1.3) JWT 認証スキーマを登録」に書いたコード builder.Services.AddAuthentication(...); より前に追加する必要があるので注意してください。
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.AspNetCore.Identity;
using Microsoft.IdentityModel.Tokens;
using System.Text;
using WebApi.Data;
using Microsoft.EntityFrameworkCore;
namespace WebApi
{
public class Program
{
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
// 追加
builder.Services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlServer(
builder.Configuration.GetConnectionString(
"MvcCoreIdentityContextConnection")));
// 追加
builder.Services.AddDefaultIdentity<IdentityUser>()
.AddEntityFrameworkStores<ApplicationDbContext>();
//・・・後略・・・
(1.7) CORS 機能の実装
Blazor WASM からクロスドメインで Web API を呼び出すため、Web API アプリに CORS 機能を実装します。
具体的には、Program.cs に以下のコードを追加します。プリフライトリクエストが行われますので AllowAnyHeader() と AllowAnyMethod() が必要です。AllowCredentials() はトークンベースの認証の場合は不要のようです。
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.AspNetCore.Identity;
using Microsoft.IdentityModel.Tokens;
using System.Text;
using WebApi.Data;
using Microsoft.EntityFrameworkCore;
namespace WebApi
{
public class Program
{
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
// 追加
var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
builder.Services.AddCors(options =>
{
options.AddPolicy(name: MyAllowSpecificOrigins,
policy =>
{
policy.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod();
});
});
// ・・・中略・・・
// 追加
app.UseCors(MyAllowSpecificOrigins);
//・・・後略・・・
(2) Blazor WASM アプリ
(2.1) プロジェクトの作成
Visual Studio 2022 の新しいプロジェクトの作成で「Blazor WabAssembly アプリ」のテンプレート (Blazor Web App を選ばないよう注意)を使って自動生成されたものを使います。「追加情報」のダイアログで「認証の種類(A)」は「なし」にします。この記事ではターゲットフレームワークは .NET 8.0 にしました。
(2.2) Weather.razor の修正
自動生成されたプロジェクトの Weather.razor には、wwwroot 下の json ファイル weather.json を要求して、応答の JSON 文字列をデシリアライズして表示するコードが含まれています。
その部分のコードを、Web API からトークンを取得した後、トークンを要求ヘッダに含めて送信し、応答として返されたデータを表示するように変更します。
変更するのは @code ブロックのみで、以下の通りとなります。
@code {
private WeatherForecast[]? forecasts;
protected override async Task OnInitializedAsync()
{
// 以下はテンプレートで自動生成されたコードに含まれているもの
// これを下のように書き換える
// forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
var tokenUrl = "https://localhost:44366/api/token";
var forecastUrl = "https://localhost:44366/WeatherForecast";
// 送信する ID とパスワード。既存の ASP.NET Core Identity で有効なもの
var credentials = new {
Username = "oz@mail.example.com",
Password = "myPassword"
};
// ID とパスワードを送信してトークンを取得
// content-type: application/json; charset=utf-8 は自動的に
// ヘッダに付与される
using var tokenResponse = await Http.PostAsJsonAsync(tokenUrl, credentials);
var jwt = await tokenResponse.Content.ReadFromJsonAsync<JWT>();
if (jwt != null && !string.IsNullOrEmpty(jwt.Token))
{
// 取得したトークンを Authorization ヘッダに含めて GET 要求
var request = new HttpRequestMessage(HttpMethod.Get, forecastUrl);
request.Headers.Authorization =
new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", jwt.Token);
using var forecastResponse = await Http.SendAsync(request);
forecasts = await forecastResponse.Content.ReadFromJsonAsync<WeatherForecast[]>();
}
}
// 追加
public class JWT
{
public string? Token { get; set; }
}
public class WeatherForecast
{
public DateOnly Date { get; set; }
public int TemperatureC { get; set; }
public string? Summary { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}
}
デスクトップアプリで使う HttpClient の場合とほぼ同じコードになりました。。Blazor WASM のクライアント側はブラウザなので、HttpClient は動くはずはなく、XMLHttpRequest とか fetch などを使った JavaScript のコードに変換されてブラウザに送られたコードが動いているのではないかと思います。
ブラウザからのクロスドメインでの要求で、かつシンプルなリクエストとはならないので、CORS 対応のためのプリフライトリクエストが必要なヘッダ情報を含めて送信されます。Fiddler で要求・応答をキャプチャするとそのあたりのことが分かります。
