WebSurfer's Home

Filter by APML

コレクションのモデルバインディング

by WebSurfer 12. May 2026 18:33

ASP.NET Core MVC または Razor Pages アプリで、ユーザーがコレクションの要素の一部を削除して残りの要素を POST してきた場合に、送信されてきた残りの要素からなるコレクションのモデルバインディングを行うにはどうするかという話を書きます。

コレクションのモデルバインディング

先の記事「コレクションのデータアノテーション検証」に書きましたように、コレクションのモデルバインディングがうまく行われるようにするには、レンダリングされる input 要素の name 属性が連番のインデックスを含むようにします。具体的には、name="prefix[index].Property" というパターンとし、index は 0 から始まる連番とします。

この記事の例として上の画像のようなアプリを考えます。ユーザーが[Remove]ボタンをクリックしてある項目を削除してから[Submit]ボタンをクリックすると、残った項目のコレクションが POST されます。

その場合、POST されたコレクションの input 要素の name="prefix[index].Property" 属性の index が連続しなくなってしまいます。

index の数字の連続が途切れた場合、何も対応がされてなければそれ以降の要素はバインドされません。では、バインドされるようにするにはどういう対応を取ったらいいのでしょうか?

Microsoft のドキュメント「ASP.NET Core でのモデル バインド」の Collections のセクションの 5 つ目のコード例にある、selectedCourses.index=a&selectedCourses.index=b というような index を示すデータを一緒にPOST することにより連番でなくてもモデルバインドされるようになります。

例えば、index が 0 の場合、ASP.NET から以下の様な html 要素がレンダリングされるようにコーディングします。

<input type="hidden" name="prefix.Index" value="0" />
<input name="prefix[0].Property" value="ABC" />

参考に上の画像の ASP.NET Core Razor Pages アプリのコードを以下に載せてておきます。Visual Studio 2026 のテンプレートを使ってターゲットフレームワークを .NET 10 として作成したものです。

Model

using System.ComponentModel.DataAnnotations;

namespace RazorPages.Models
{    public class Country
    {
        [Required(ErrorMessage = "{0} は必須")]
        [StringLength(15, ErrorMessage = "{0} は {1} 文字以内")]
        [Display(Name = "国名")]
        public string Name { get; set; } = string.Empty;

        public CountryInfo Details { get; set; } = new();
    }

    public class CountryInfo
    {
        [Required(ErrorMessage = "{0} は必須")]
        [StringLength(15, ErrorMessage = "{0} は {1} 文字以内")]
        [Display(Name = "首都")]
        public string Capital { get; set; } = string.Empty;

        [Required(ErrorMessage = "{0} は必須")]
        [StringLength(15, ErrorMessage = "{0} は {1} 文字以内")]
        [Display(Name = "大陸")]
        public string Continent { get; set; } = string.Empty;
    }

    public class ListCountriesViewModel
    {
        public List<Country> CountryList { get; set; } = new();
        public List<Country> SelectedCountries { get; set; } = new();
    }
}

CountryList.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using RazorPages.Models;

namespace RazorPages.Pages
{
    public class CountryListModel : PageModel
    {
        [BindProperty]
        public ListCountriesViewModel List { get; set; } = new();

        public void OnGet()
        {
            List = new ListCountriesViewModel
            {
                CountryList = GetDefaultCountries()
            };
        }

        public IActionResult OnPost()
        {
            if (ModelState.IsValid)
            {
                var posted = List.CountryList;
                List = new ListCountriesViewModel
                {
                    CountryList = posted,
                    SelectedCountries = posted
                };

                // POST された値は ModelState ディクショナリ(model ではない)
                // に格納されていて、Tag Helper はまず ModelState ディクショ
                // ナリを調べ、そこに値があればそれを表示する仕組みになっている。
                // なので、posted の値の通り表示するには ModelState をクリア
                // する必要がある
                ModelState.Clear();                
            }
            else
            {
                List = new ListCountriesViewModel
                {
                    CountryList = GetDefaultCountries()
                };
            }

            return Page();
        }

        private static List<Country> GetDefaultCountries()
        {
            var countries = new List<Country>
            {
                new Country()
                {
                    Name = "Italy",
                    Details = new CountryInfo
                    {
                        Capital = "Rome",
                        Continent = "Europe"
                    }
                },
                new Country()
                {
                    Name = "Spain",
                    Details = new CountryInfo
                    {
                        Capital = "Madrid",
                        Continent = "Europe"
                    }
                },
                new Country()
                {
                    Name = "USA",
                    Details = new CountryInfo
                    {
                        Capital = "Washington",
                        Continent = "NorthAmerica"
                    }
                },
                new Country()
                {
                    Name = "Japan",
                    Details = new CountryInfo
                    {
                        Capital = "Tokyo",
                        Continent = "Asia"
                    }
                },
                new Country()
                {
                    Name = "Australia",
                    Details = new CountryInfo
                    {
                        Capital = "Canberra",
                        Continent = "Oceania"
                    }
                }
            };

            return countries;
        }
    }
}

CountryList.cshtml

@page
@model RazorPages.Pages.CountryListModel

<h4>Remove countries not to submit</h4>
<form method="post">
    <table class="table">
        <thead>
            <tr>
                <th>
                    <label asp-for="List.CountryList[0].Name"></label>
                </th>
                <th>
                    <label asp-for="List.CountryList[0].Details.Capital"></label>
                </th>
                <th>
                    <label asp-for="List.CountryList[0].Details.Continent"></label>
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @for (int i = 0; i < Model.List.CountryList.Count; i++)
            {
                <tr class="country-row">
                    <input type="hidden" name="List.CountryList.Index" value="@i" />
                    <td>
                        <input asp-for="List.CountryList[i].Name" class="form-control" />
                        <span asp-validation-for="List.CountryList[i].Name" 
                            class="text-danger"></span>
                    </td>
                    <td>
                        <input asp-for="List.CountryList[i].Details.Capital" 
                            class="form-control" />
                        <span asp-validation-for="List.CountryList[i].Details.Capital" 
                            class="text-danger"></span>
                    </td>
                    <td>
                        <input asp-for="List.CountryList[i].Details.Continent" 
                            class="form-control" />
                        <span asp-validation-for="List.CountryList[i].Details.Continent" 
                            class="text-danger"></span>
                    </td>
                    <td>
                        <button type="button"
                                class="btn btn-danger"
                                onclick="this.closest('.country-row').remove();">
                            Remove
                        </button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
    <input type="submit" value="Submit" class="btn btn-primary" />
</form>

<hr />
     
<h4>Countries submitted</h4>
<ul>
    @if (Model.List.SelectedCountries != null &&
         Model.List.SelectedCountries.Count > 0)
    {
        foreach (var country in Model.List.SelectedCountries)
        {
            <li>@country.Name</li>
        }
    }
    else
    {
        <li>No countries submitted.</li>
    }
</ul>

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}

Tags: , , ,

CORE

.NET 10 ASP.NET Core Web API で Swagger を使用(その2)

by WebSurfer 4. April 2026 12:35

.NET 10 の ASP.NET Core Web API プロジェクトにデフォルトでインストールされている Microsoft.AspNetCore.OpenApi (以降「組込み OpenAPI」と書きます) と SwaggerUI (UI だけ) を使って [Authorize] ボタンを表示し、ベアラートークン (JWT) を使っての認証に必要な操作を行うことができるよう実装してみました。

SwaggerUI

先の記事「.NET 10 ASP.NET Core Web API で Swagger を使用」では SwaggerGen + SwaggerUI を使って実装しましたが、.NET 10 で組込み OpenAPI が使える状況ではそれは本筋ではなさそうですので。

過去はどうしていたのかも知っておいた方が理解しやすいと思いますので、.NET 8 からの経緯を以下に書きます。

  1. Visual Studio のテンプレートを使って作成する .NET 8 の ASP.NET Core Web API プロジェクトでは Swashbuckle.AspNetCore がデフォルトでインストールされている。
  2. Swashbuckle の SwaggerGen が OpenAPI ドキュメントを生成し、SwaggerUI が OpenAPI ドキュメントを解釈してブラウザ上で API のテストを行うことができる UI を提供していた。(参考: Swashbuckle と ASP.NET Core を始めよう
  3. .NET 9 以降では ASP.NET Core Web API プロジェクトには組込み OpenAPI が含まれるようになった。それゆえ Swashbuckle は含まれなくなった。(参考: Announcement: Swashbuckle.AspNetCore is being removed in .NET 9
  4. SwaggerUI は、組込み OpenAPI が生成する OpenAPI ドキュメントを解釈して UI を提供できる。したがって、組込み OpenAPI + SwaggerUI (UI だけ) で .NET 8 の時と同様にブラウザ上で API のテストができる。(参考: ローカルのアドホック テストに Swagger UI を使用する
  5. ただし、 [Authorize] ボタンを表示し、ベアラートークンを使っての認証に必要な操作を行うことができるようするためには OpenAPI ドキュメントのカスタマイズが必要 (Security Scheme と Security Requirement の追加が必要)。
  6. OpenAPI ドキュメントをカスタマイズするには、組込み OpenAPI + SwaggerUI の場合、トランスフォーマーを用いる。(参考: OpenAPI ドキュメントのトランスフォーマー
  7. Program.cs でトランスフォーマーを実装し、OpenAPI ドキュメントに Security Scheme と Security Requirement を追加すれば、前者により [Authorize] ボタンの表示とトークンの設定、後者によりベアラートークンの送信ができるようになる。

ということで、下の画像の通り、組込み OpenAPI (Microsoft.AspNetCore.OpenApi 10.0.5) と Swashbuckle.AspNetCore.SwaggerUI 10.1.7 をインストールし、[Authorize] ボタンを表示して認証に必要な操作を行うことができるよう実装してみました。

NuGet パッケージ

トランスフォーマーを実装した Program.cs のコードは以下の通りです。「方法1」のコードは Securing OpenAPI and Swagger UI with OAuth in .NET 10 を参考に、「方法2」のコードはドキュメント トランスフォーマーを使用するを参考にしました。下のコード例では、「方法2」の登録をコメントアウトしてありますので、「方法1」のみが有効になっています。どちらの方法でも OpenAPI ドキュメントのカスタマイズ結果は同じになります。

using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.AspNetCore.OpenApi;
using Microsoft.IdentityModel.Tokens;
using Microsoft.OpenApi;
using System.Text;

namespace WebApi3
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);

            builder.Services.AddControllers();

            // 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"]!))
                    };
                });

            builder.Services.AddAuthorization();

            // OpenAPI ドキュメントのトランスフォーマー設定(方法1)
            builder.Services.AddOpenApi(options =>
            {
                options.AddDocumentTransformer((document, context, cancellationToken) =>
                {
                    // OpenAPI ドキュメントの基本情報を設定(無くても可)
                    document.Info = new OpenApiInfo
                    {
                        Title = "ASP.NET Core Web API",
                        Version = "v1",
                        Description = "ASP.NET Core Web API with JWT authentication. " +
                            "Target Framework is .NET 10. " +
                            "Built‑in OpenAPI + SwaggerUI are used."
                    };

                    // Security Scheme を追加(JWT Bearer)
                    document.Components ??= new OpenApiComponents();
                    document.Components.SecuritySchemes ??=
                        new Dictionary<string, IOpenApiSecurityScheme>();
                    document.Components.SecuritySchemes.Add("Bearer",
                        new OpenApiSecurityScheme
                        {
                            Type = SecuritySchemeType.Http,
                            Scheme = "bearer",
                            BearerFormat = "JWT",
                            Description = "Please enter token"
                        });

                    // Security Requirement を追加
                    document.Security ??= new List<OpenApiSecurityRequirement>();
                    document.Security.Add(
                        new OpenApiSecurityRequirement
                        {
                            // インデクサ初期化子
                            [new OpenApiSecuritySchemeReference("Bearer", document)] = []
                        }
                    );

                    return Task.CompletedTask;
                });
            });

            // OpenAPI ドキュメントのトランスフォーマー設定(方法2)
            //builder.Services.AddOpenApi(options =>
            //{
            //    options.AddDocumentTransformer<JwtSecurityTransformer>();
            //});

            var app = builder.Build();

            if (app.Environment.IsDevelopment())
            {
                app.MapOpenApi();
                app.UseSwaggerUI(options =>
                {
                    options.SwaggerEndpoint("/openapi/v1.json", "v1");
                });
            }

            app.UseHttpsRedirection();

            // 認証と認可のミドルウェアを追加
            app.UseAuthentication();
            app.UseAuthorization();

            app.MapControllers();

            app.Run();

        }
    }

    // 方法2に用いる Transformer の実装
    // IAuthenticationSchemeProvider をコンストラクタへの DI で
    // 受け取ることで、登録されている認証スキームに Bearer が含
    // まれることを確認してから Security Scheme を追加する
    internal sealed class JwtSecurityTransformer(IAuthenticationSchemeProvider provider)
        : IOpenApiDocumentTransformer
    {
        public async Task TransformAsync(OpenApiDocument document,
                                         OpenApiDocumentTransformerContext context,
                                         CancellationToken cancellationToken)
        {
            // OpenAPI ドキュメントの基本情報を設定(無くても可)
            document.Info = new OpenApiInfo
            {
                Title = "ASP.NET Core Web API",
                Version = "v1",
                Description = "ASP.NET Core Web API with JWT authentication. " +
                            "Target Framework is .NET 10. " +
                            "Built‑in OpenAPI + SwaggerUI are used."
            };

            // Security Scheme を設定(JWT Bearer)
            var authenticationSchemes = await provider.GetAllSchemesAsync();
            if (authenticationSchemes.Any(authScheme => authScheme.Name == "Bearer"))
            {
                var securitySchemes = new Dictionary<string, IOpenApiSecurityScheme>
                {
                    // インデクサ初期化子
                    ["Bearer"] = new OpenApiSecurityScheme
                    {
                        Type = SecuritySchemeType.Http,
                        Scheme = "bearer",
                        BearerFormat = "JWT",
                        Description = "Please enter token"
                    }
                };
                document.Components ??= new OpenApiComponents();
                document.Components.SecuritySchemes = securitySchemes;
            }

            // Security Requirement を設定
            document.Security = [
                new OpenApiSecurityRequirement
                {
                    [new OpenApiSecuritySchemeReference("Bearer", document)] = []
                }
            ];
        }
    }
}

上のトランスフォーマーにより OpenAPI ドキュメントに Security Scheme と Security Requirement が追加されます。下の画像を見てください。赤枠が OpenAPI ドキュメント上の Security Scheme 部分、青枠が Security Requirement 部分になります。

OpenAPI ドキュメント

SwaggerUI は、上の赤枠部分を解釈して [Authorize] ボタンの表示とトークンの設定、青枠部分を解釈してベアラートークンの送信ができる実装を追加します。

Tags: , , , , ,

DevelopmentTools

.NET 10 ASP.NET Core Web API で Swagger を使用

by WebSurfer 1. April 2026 12:04
2026/4/2 追記: この記事は、.NET 10 の組込み OpenAPI は使わないで、SwaggerGen + SwaggerUI を使った場合の話です。後で調べて分かったのですが、組込み OpenAPI と Swagger UI (UI だけ)を使って [Authorize] ボタンを表示し必要な操作を行うことは��能でした。その方法については「その2」に書きました。

ターゲットフレームワークを .NET 10 として作成した ASP.NET Core Web API プロジェクトで Swagger を使うにはどうすればよいかを調べましたので、備忘録として以下に書いておきます。

Swagger

ターゲットフレームワーク .NET 8 で作成した ASP.NET Core Web API プロジェクトにはデフォルトで Swagger か組み込まれており、Visual Studio からアプリを実行すると上の画像のようにブラウザ上に Swagger UI が表示され、それを操作して Web API にデータを送信し応答を受け取ることができました。

しかしながら、ターゲットフレームワーク .NET 9 以降の ASP.NET Core Web API のプロジェクトには Swagger は含まれません (理由は Announcement: Swashbuckle.AspNetCore is being removed in .NET 9 を見てください)。それを .NET 8 プロジェクトと同様に Swagger を利用できるようにするにはどうすれば良いかという話です。

プロジェクトの作成に Visual Studio 2026 のテンプレート ASP.NET Core Web API を使ってターゲットフレームワーク .NET 10 とすると、設定画面で [Enable OpenAPI support] にデフォルトでチェックが入っており、作成したプロジェクトには NuGet パッケージ Microsoft.AspNetCore.OpenApi がインストールされ、Program.cs にはそれを使う設定がされます。

しかし、Microsoft.AspNetCore.OpenApi には、Web API を操作するための組み込みのサポートは付属していませんので、.NET 8 と同様に Swagger を使いたいのであれば追加で Swagger UI をインストールする必要があります。

具体的には、Microsoft のドキュメント「ローカルのアドホック テストに Swagger UI を使用する」に書いてありますように、NuGet パッケージ Swashbuckle.AspNetCore.SwaggerUI をインストールし、swagger-ui ミドルウェアを有効にします。それで先の記事「ASP.NET Core Web API と Swagger(その1)」に書いたことまでは Swagger UI + Microsoft.AspNetCore.OpenApi でできるようになります。

(ただし、SampleB メソッドには [Consumes("multipart/form-data")] 属性を付与しないと、Swagger はコンテンツは正しく multipart/form-data 形式とするものの、応答ヘッダーは Content-Type: application/x-www-form-urlencoded としてしまうという問題がありました。Swagger UI + Microsoft.AspNetCore.OpenApi 併用で、引数に複合モデルを使った場合に起きるバグ的な挙動のようです)

問題は、Swagger UI + Microsoft.AspNetCore.OpenApi 併用では、先の記事「ASP.NET Core Web API と Swagger(その2)」に書いた AddSwaggerGen メソッドが使えず、[Authorize] ボタンを表示できないことです。当然、[Authorize] ボタンをクリックしてベアラトークン入力ウィンドウを表示し、テキストボックスにトークンを入力して、トークンを要求ヘッダに含めて送信するという操作はできません。

Copilot によると、[Authorize] ボタンを出したいなら SwaggerGen + SwaggerUI を使う他に方法はないとのこと。実はそれは誤りだったのですが、とりあえずその方向に進んで、以下のように NuGet パッケージ Microsoft.AspNetCore.OpenApi はアンインストールし、Swashbuckle.AspNetCore 10.1.7 をインストールしてこの記事の一番上の画像のように [Authorize] ボタンが出るよう実装してみました。

Swashbuckle.AspNetCore 10.1.7 をインストール

この時注意しなければならないのが、Swashbuckle 10.x では、GitHub の記事 Migrating to Swashbuckle.AspNetCore v10 に "Update any using directives that reference types from the Microsoft.OpenApi.Models namespace to use the new namespace Microsoft.OpenApi." と書いてあるように Microsoft.OpenApi.Models という名前空間がなくなって、そこにあったクラス類は Microsoft.OpenApi 名前空間に移動したということです。そして、全部移動した訳ではないので、using Microsoft.OpenApi; に変えるだけで Swashbuckle 9.x 以前の時代に使っていたコードがそのまま使えるわけではないということです。

今回、Swashbuckle 9.x 以前で使っていたコードをそのまま移植してどこが問題になったかというと、下の画像の通りです。

Security Requirement の追加

Swashbuckle 10.x には Reference も OpenApiReference も存在しません。理由は、Copilot に聞いた話ですが、以下の通りだそうです。

  • Swashbuckle 9.x までは OpenApiSecurityScheme, OpenApiReference, OpenApiSecurityRequirement など OpenAPI.NET のモデルを直接操作して Security を追加していた。
  • Swashbuckle 10.x では OpenAPI.NET のモデルを直接触る API が削除され、代わりに OpenAPI ドキュメントを後から加工する Transformer 方式に変更された。

(ちなみに、上の画像のコードの options.AddSecurityRequirement( ... を削除しても [Autorize] ボタンは表示されるものの、要求ヘッダに Authorization: Bearer ... が含まれなくなります)

Swashbuckle 10.x を使うなら options.AddSecurityRequirement( ... のコードを上で言う Transformer 方式で書き換えるということになります。Transformer というのは、これも Copilot に聞いた話ですが、SwaggerGen が生成した OpenAPI ドキュメントに対して追加・変更・削除を行う「後処理フィルター」のことだそうです。

Transformer 方式で書き直した options.AddSecurityRequirement( ... のコードは以下のようになります。下のコードの document は SwaggerGen が生成した OpenAPI ドキュメントで、そのドキュメントに対して Security Requirement を追加しています。

options.AddSecurityRequirement(document =>
    new OpenApiSecurityRequirement
    {
        [new OpenApiSecuritySchemeReference("Bearer", document)] = []
    });

これにより [Authorize] 機能は期待通り動くようになります。

この記事の一番上の画像の [Authorize] ボタンをクリックすると、下の画像のトークン入力ウィンドウが表示されるので、テキストボックスにトークンを入力し、下の画像の [Authorize] ボタンをクリックします。

トークン入力ウィンドウ

それ以降は Swagger からの要求は、すべて要求ヘッダに Authorization: Bearer <JWT> が含まれて送信されるようになります。

Fiddler で見た要求ヘッダ

以下にこの記事を書く際に検証用に使ったコードを載せておきます。

Program.cs

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.IdentityModel.Tokens;
using Microsoft.OpenApi;
using System.Text;

namespace WebApi2
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);

            builder.Services.AddControllers();

            // 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"]!))
                    };
                });

            builder.Services.AddAuthorization();

            // Swagger の設定(Swashbuckle.AspNetCore 10.x を使う例)
            builder.Services.AddSwaggerGen(options =>
            {
                // OpenAPI ドキュメントの基本��報を設定(無くても可)
                options.SwaggerDoc("v1", new OpenApiInfo
                {
                    Title = "ASP.NET Core Web API",
                    Version = "v1",
                    Description = "ASP.NET Core Web API with JWT authentication. " +
                    "Target Framework is .NET 10. " +
                    "Swashbuckle.AspNetCore 10.1.7 is used."
                });

                // Security Scheme を追加(JWT Bearer トークンを使う)
                options.AddSecurityDefinition("Bearer", new OpenApiSecurityScheme
                {
                    Name = "Authorization",
                    Type = SecuritySchemeType.Http,
                    Scheme = "Bearer",
                    BearerFormat = "JWT",
                    In = ParameterLocation.Header,
                    Description = "Please enter token"
                });

                // Security Requirement を追加(これが無いと Authorize ウィンドウ
                // で JWT を設定しても、Swagger は Authorization: Bearer ... を
                // 要求ヘッダに含めない)                
                // 下のコードの document は SwaggerGen が生成した OpenAPI ドキュ
                // メント。そのドキュメントに対して Security Requirement を追加
                options.AddSecurityRequirement(document =>
                    new OpenApiSecurityRequirement
                    {
                        [new OpenApiSecuritySchemeReference("Bearer", document)] = []
                    });
            });

            var app = builder.Build();

            if (app.Environment.IsDevelopment())
            {
                // Swagger ミドルウェアを有効にする
                app.UseSwagger();

                // Swagger UI を有効にする
                app.UseSwaggerUI(options =>
                {
                    options.SwaggerEndpoint("/swagger/v1/swagger.json", "v1");
                });
            }

            app.UseHttpsRedirection();

            // 認証と認可のミドルウェアを追加
            app.UseAuthentication();
            app.UseAuthorization();

            app.MapControllers();

            app.Run();
        }
    }
}

appsettings.json

上の Program.cs の JWT 認証の設定で使う Key と Issuer の値を設定しています。

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "Jwt": {
    "Key": "veryVerySecretKeyWhichMustBeLongerThan32",
    "Issuer": "https://localhost:7032/"
  }
}

TokenController

Id と Password を受けて JWT を発行する API です。この記事の本題とは直接関係ないですが参考までに載せておきます。

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.IdentityModel.Tokens;
using System.IdentityModel.Tokens.Jwt;
using System.Text;

namespace WebApi2.Controllers
{
    [Route("[controller]")]
    [ApiController]
    public class TokenController : ControllerBase
    {
        private readonly IConfiguration _config;

        public TokenController(IConfiguration config)
        {
            _config = config;
        }

        [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))
            {
                // 受け取った id と password を検証する
                if (await VerifyUserAsync(id, pw))
                {
                    // JWT を生成する
                    var tokenString = BuildToken(_config);
                    response = Ok(new { token = tokenString });
                }
            }

            return response;
        }

        // 受け取った id と password を検証するヘルパメソッド
        // 内部で UserManager.CheckPasswordAsync(id, pw) を使うことを
        // 想定して非同期メソッドにした
        private static Task<bool> VerifyUserAsync(string id, string pw)
        {
            // ここでは全て検証結果 OK として true を返す
            return Task.FromResult(true);
        }

        // JWT を生成するヘルパメソッド
        private static string BuildToken(IConfiguration config)
        {
            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);
        }
    }


    // クライアントから送信されてきた id と password を受け取る
    // ための View Model
    public class LoginModel
    {
        public string? Username { get; set; }
        public string? Password { get; set; }
    }
}

UploadController

アップロードされたファイルを受け取る API です。これもこの記事の本題とは直接関係ないですが参考までに載せておきます。

using Microsoft.AspNetCore.Mvc;

namespace WebApi2.Controllers
{
    [Route("[controller]")]
    [ApiController]
    public class UploadController : ControllerBase
    {
        [HttpPost("SampleA")]
        public IActionResult SampleA(IFormFile? postedFile,
                                     [FromForm] string? customField)
        {
            if (postedFile == null || postedFile.Length == 0)
            {
                return Content("ファイルを受信できませんでした");
            }

            if (customField == null)
            {
                return Content("customField を受信できませんでした");
            }

            return Content($"ファイル: {postedFile.FileName}, " +
                $"customField: {customField} 受信");
        }

        [HttpPost("SampleB")]
        // 以下の属性は無くても問題無し
        //[Consumes("multipart/form-data")]
        public IActionResult SampleB([FromForm] UploadModels model)
        {
            if (model.PostedFile == null || model.PostedFile.Length == 0)
            {
                return Content("ファイルを受信できませんでした");
            }

            if (model.CustomField == null)
            {
                return Content("customField を受信できませんでした");
            }

            return Content($"ファイル: {model.PostedFile.FileName}, " +
                $"customField: {model.CustomField} 受信");
        }
    }

    public class UploadModels
    {
        public string? CustomField { get; set; }
        public IFormFile? PostedFile { get; set; }
    }
}

Tags: , , , ,

DevelopmentTools

About this blog

2010年5月にこのブログを立ち上げました。主に ASP.NET Web アプリ関係の記事です。ブログ2はそれ以外の日々の出来事などのトピックスになっています。

Calendar

<<  June 2026  >>
MoTuWeThFrSaSu
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345

View posts in large calendar