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

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

Transcript

1. Blazorにおける入力値検証
   について
   株式会社SAKURUG
   エンジニアリングユニット
   草場 友光
   .NETラボ 2023年3月
   

   View Slide

2. 自己紹介
   • 普段は主にWebFormsアプリの保守の
   お仕事をしてます。
   • 古めのシステムが多いので時代に取り
   残されぬよう新しい技術を一つでも入
   れるよう日々努力しています。
   • 2022/08-2023 Microsoft MVP
   (Developer Technologies)
   • tomo_kusaba
   

   View Slide

3. 宣伝
   【VISION】ひとの可能性を開花させる企業であり続ける
   VISIONに共感できる仲間募集中。
   

   View Slide

4. 注意
   • 個人の見解・解釈が多分に入っています。
   • 見解の相違・事実誤認などありましたらご指摘ください。
   • #dotnetlabでtweetすると右側に表示されます
   

   View Slide

5. 今日の目的
   • Blazorでは組み込みの入力コンポーネント及びモデルに検証属
   性をつけることで基本的な入力値検証が行えます。
   • 従来のWebアプリケーションであれば入力値検証のロジックを
   クライアント側およびサーバ側で記述していましたがそれらが
   不要になるので生産性が飛躍的に向上します。
   • さらに、基本の入力値検証で不足する分はカスタム検証として
   記述できます。これらの方法を本セッションでは紹介していき
   ます。
   • 今回は、Blazor WebAssembly + ASP.NET Core WebAPIの
   プロジェクトです。
   

   View Slide

6. 入力値検証の基本
   • 一般的に入力値検証(バリデーション）はクライアント側、
   サーバ側双方で行われることが一般的。
   • クライアント側で入力値検証が行われることでユーザ利便性を
   提供する。
   • サーバ側で入力値検証が行われることでセキュリティを担保す
   る。
   

   View Slide

7. Blazor WebAssembly(クライアント側）
   • 入力値検証のためのフォーム（EditForm)が用意されている
   • DataAnnotationsValidatorによって検証属性に基づいて検証
   を行うことができる。
   

   View Slide

8. 組み込みの入力コンポーネント
   入力コンポーネント 説明
   InputCheckbox チェックボックス
   InputDate 日付入力
   InputFile ファイルアップロード
   InputNumber 数値入力
   InputRadio ラジオボタン
   InputSelect ドロップダウンリスト
   InputText テキストボックス
   InputTextArea テキストエリア
   

   View Slide

9. ASP.NET Core WebAPI
   • ApiController属性によりモデル検証エラーが発生すると
   HTTP400応答が自動的にトリガーされる。
   • 必要な検証属性はクライアント側と共通
   • 組み込みのデータ検証とカスタム検証ロジックの両方が検証さ
   れる。
   

   View Slide

10. 代表的な組み込みの検証属性
    属性 説明
    Required 入力がされているかどうかを検証します。
    Range 入力が指定した範囲内であるかどうかを検証します。
    StringLength 入力文字列が指定した長さを超えてないかどうかを検証しま
    す。
    RegularExpression 入力が指定した正規表現と一致することを検証します。
    

    View Slide

11. モデル例
    

    View Slide

12. クライアント側検証エラー例
    必須入力の名前を空欄とし
    た
    

    View Slide

13. サーバ側検証エラー例
    名前を空欄とした
    

    View Slide

14. カスタム検証属性
    • ValidationAttributeを継承してカスタム検証クラスを作成す
    る
    • IsValidメソッドをオーバーライドする
    

    View Slide

15. カスタム検証属性エラー例
    未来日を入力
    

    View Slide

16. カスタム検証属性エラー例
    未来日を入力
    

    View Slide

17. ここまでのまとめ
    • モデルに検証属性を記述することによりクライアント側もサー
    バ側も非常に簡単に入力検証を実施することが可能。
    • 基本的な検証項目についてはコードの記述の必要はないのでと
    ても高効率。
    • カスタム検証属性もクライアント側とサーバ側のコードを共通
    とできるのでテストも1回で済む。
    

    View Slide

18. モデルが複合型になる場合
    • 例えば、1－Nのデータ構造を持つ入力フォームが必要になる場
    合
    

    View Slide

19. モデルが複合型になる場合
    • 例えば、1－Nのデータ構造を持つ入力フォームが必要になる場
    合
    

    View Slide

20. モデルが複合型になる場合の問題
    よし、クライアント側でちゃんと検証
    されてるぞ！！
    送信ボタンを押してみる
    なぜか、サーバ側に送られて
    400が返ってきた！
    

    View Slide

21. 解決策（試験的）
    • 「 Microsoft.AspNetCore.Components.DataAnnotations.V
    alidation」をNuGet(プレリリース)
    • DataAnnotationsValidatorの代わりに
    ObjectGraphDataAnnotationsValidatorを使用する。
    • ValidateComplexTypeでモデルのプロパティに注釈をつける
    

    View Slide

22. 変更点(フォーム）
    

    View Slide

23. 変更点(モデル）
    

    View Slide

24. 無事
    よし、クライアント側でちゃんと検証
    されてるぞ！！
    送信ボタンを押してみる
    サーバ送信されてない。
    めでたし。
    

    View Slide

25. デモコード
    • https://github.com/tomokusaba/Dotn
    etLab202303Hosted
    • LocalDBを使用
    • Visual Studioのパッケージマネージャコ
    ンソールで「update-database」
    

    View Slide

26. .NET8 Preview2で追加
    • .NET8 Preview2で組み込みのデータ検証に拡張属性がいくつ
    か追加されました。
    属性 説明
    Required(DisallowAllDefalutValues) 構造体がデフォルト値と等しくないことを検証
    DateOnlyなら0001/01/01
    Range(MinimumIsExclusive,MaximumIsE
    xclusive)
    範囲の検証で境界値を拒否できるようになった
    (0,10)としたときは０と１０はダメのように設定可能
    ex) Length(10, 20) 文字列またはコレクションの長さの下限と上限を設定できるようになりました。
    AllowedValues プロパティを検証するための許可リストを指定できる
    DeniedValues プロパティを検証するための拒否リストを指定できる
    

    View Slide

27. デモコード
    • https://github.com/tomokusaba/DataAnnotationsTestDo
    tnet8pre2
    

    View Slide

28. 参考文献
    • ASP.NET Core Blazor のフォームと入力コンポーネント
    

    View Slide

29. おしまい
    おしまい
    

    View Slide