.NETラボ勉強会2023年3月 Blazorにおける入力値検証について
Blazorにおける入力値検証について株式会社SAKURUGエンジニアリングユニット草場 友光.NETラボ 2023年3月
View Slide
自己紹介• 普段は主にWebFormsアプリの保守のお仕事をしてます。• 古めのシステムが多いので時代に取り残されぬよう新しい技術を一つでも入れるよう日々努力しています。• 2022/08-2023 Microsoft MVP(Developer Technologies)• tomo_kusaba
宣伝【VISION】ひとの可能性を開花させる企業であり続けるVISIONに共感できる仲間募集中。
注意• 個人の見解・解釈が多分に入っています。• 見解の相違・事実誤認などありましたらご指摘ください。• #dotnetlabでtweetすると右側に表示されます
今日の目的• Blazorでは組み込みの入力コンポーネント及びモデルに検証属性をつけることで基本的な入力値検証が行えます。• 従来のWebアプリケーションであれば入力値検証のロジックをクライアント側およびサーバ側で記述していましたがそれらが不要になるので生産性が飛躍的に向上します。• さらに、基本の入力値検証で不足する分はカスタム検証として記述できます。これらの方法を本セッションでは紹介していきます。• 今回は、Blazor WebAssembly + ASP.NET Core WebAPIのプロジェクトです。
入力値検証の基本• 一般的に入力値検証(バリデーション)はクライアント側、サーバ側双方で行われることが一般的。• クライアント側で入力値検証が行われることでユーザ利便性を提供する。• サーバ側で入力値検証が行われることでセキュリティを担保する。
Blazor WebAssembly(クライアント側)• 入力値検証のためのフォーム(EditForm)が用意されている• DataAnnotationsValidatorによって検証属性に基づいて検証を行うことができる。
組み込みの入力コンポーネント入力コンポーネント 説明InputCheckbox チェックボックスInputDate 日付入力InputFile ファイルアップロードInputNumber 数値入力InputRadio ラジオボタンInputSelect ドロップダウンリストInputText テキストボックスInputTextArea テキストエリア
ASP.NET Core WebAPI• ApiController属性によりモデル検証エラーが発生するとHTTP400応答が自動的にトリガーされる。• 必要な検証属性はクライアント側と共通• 組み込みのデータ検証とカスタム検証ロジックの両方が検証される。
代表的な組み込みの検証属性属性 説明Required 入力がされているかどうかを検証します。Range 入力が指定した範囲内であるかどうかを検証します。StringLength 入力文字列が指定した長さを超えてないかどうかを検証します。RegularExpression 入力が指定した正規表現と一致することを検証します。
モデル例
クライアント側検証エラー例必須入力の名前を空欄とした
サーバ側検証エラー例名前を空欄とした
カスタム検証属性• ValidationAttributeを継承してカスタム検証クラスを作成する• IsValidメソッドをオーバーライドする
カスタム検証属性エラー例未来日を入力
ここまでのまとめ• モデルに検証属性を記述することによりクライアント側もサーバ側も非常に簡単に入力検証を実施することが可能。• 基本的な検証項目についてはコードの記述の必要はないのでとても高効率。• カスタム検証属性もクライアント側とサーバ側のコードを共通とできるのでテストも1回で済む。
モデルが複合型になる場合• 例えば、1-Nのデータ構造を持つ入力フォームが必要になる場合
モデルが複合型になる場合の問題よし、クライアント側でちゃんと検証されてるぞ!!送信ボタンを押してみるなぜか、サーバ側に送られて400が返ってきた!
解決策(試験的)• 「 Microsoft.AspNetCore.Components.DataAnnotations.Validation」をNuGet(プレリリース)• DataAnnotationsValidatorの代わりにObjectGraphDataAnnotationsValidatorを使用する。• ValidateComplexTypeでモデルのプロパティに注釈をつける
変更点(フォーム)
変更点(モデル)
無事よし、クライアント側でちゃんと検証されてるぞ!!送信ボタンを押してみるサーバ送信されてない。めでたし。
デモコード• https://github.com/tomokusaba/DotnetLab202303Hosted• LocalDBを使用• Visual Studioのパッケージマネージャコンソールで「update-database」
.NET8 Preview2で追加• .NET8 Preview2で組み込みのデータ検証に拡張属性がいくつか追加されました。属性 説明Required(DisallowAllDefalutValues) 構造体がデフォルト値と等しくないことを検証DateOnlyなら0001/01/01Range(MinimumIsExclusive,MaximumIsExclusive)範囲の検証で境界値を拒否できるようになった(0,10)としたときは0と10はダメのように設定可能ex) Length(10, 20) 文字列またはコレクションの長さの下限と上限を設定できるようになりました。AllowedValues プロパティを検証するための許可リストを指定できるDeniedValues プロパティを検証するための拒否リストを指定できる
デモコード• https://github.com/tomokusaba/DataAnnotationsTestDotnet8pre2
参考文献• ASP.NET Core Blazor のフォームと入力コンポーネント
おしまいおしまい