Blazorにおける入力値検証について

.NETラボ勉強会2023年3月
Blazorにおける入力値検証について

Transcript

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