Blazor WebAssembly プロジェクト作成(認証あり)

#はじめに
この記事はBlazor WebAssemblyアプリプロジェクトを認証ありでデバック実行しSQLServerを使いアカウントの登録/ログインが出来るまで行うための記事です。「Qiita」という名前で以下の追加情報でプロジェクトを作成しています。

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110251/1527c10a-6ce4-db18-00f4-fd37c239b619.png)

- ターゲットフレームワーク
 - NET5.0使っています。デバックはしずらいです。.NET 6.0になるとデバックがしやすくなるだとか。
- 認証の種類
 - 個別のアカウントしか使った事がありません。 アプリの機能としてログイン機能や認証/承認を行えます。
- HTTPS用の構成
 - 基本的に社内環境でしか使わない場合でもHTTPS構成の選択で良いと思います。　※IISマネージャー上で自己署名入り証明書の作成(簡単)を行うことで無料で即使える状態に出来ます。
- ASP.NET Coreでホストされた
 - ソリューション内にBlazor WebAssembly用のプロジェクトと、Blazor WebAssemblyから情報取得する際に使うためのASP.NETcore(WebApi用)のプロジェクトが作成されます。
- プログレッシブWebアプリケーション
 - ブラウザによって表示のされ方は違いますが、インストールして使うことが出来ます。 youtubeで使ってみると分かりやすいです。下の図の赤丸でインストールして使えます。<br>![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110251/4e4ff9ee-1d88-1a5c-66e0-27b12dc568a5.png)


#デバック成功までの手順
この時点でデバック実行は正常に動きます。以下の画面が出ていると思います。
![キャプチャ3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110251/575507ea-47ab-8405-9a81-28791153570c.png)

しかし、右上のRegisterを押しフォームを入力し更新するとエラーが発生します。
![キャプチャ4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110251/acc3c51b-f9f5-fc8c-1e1f-c7323fdc4acb.png)
![キャプチャ5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110251/882fd677-7510-f10e-3ac7-34c44e7dfb9a.png)

このエラーはアカウントを登録するためDBが無いためエラーが発生しています。 DBのテーブルなどは簡単に作成出来るようになっています。

#アカウント情報格納用のテーブルを作成する。
- Serverプロジェクト内にあるappsettings.jsonファイルの「DefaultConnection」を変更。
 - 例)"DefaultConnection": "Server=localhost;Database=sample;User ID=sa;Password=password;"
- パッケージマネージャーコンソールで`Add-Migration InitialMigration`を実行。
 - 本当はこの時点ではしなくても良いが流れ上。`Add-Migration`はコードファーストの情報を元にDB変更の情報を作成する。「InitialMigration」は適当な文字列を入力する。
- パッケージマネージャーコンソールで`Update-Database`を実行。
 - `Add-Migration`で行ったDBの変更情報を元にDBを変更する。<br>
 - 以下のテーブルが自動で作成される。<br> 
  ![キャプチャ6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110251/13f4c6f6-c238-85bd-32cd-4a56a173222f.png)<br>
・__EFMigrationsHistory : Migrationの実行履歴保存用。この履歴を見て実行されていないMigrationが実行される。<br>
・AspNetUsers : アカウントの登録ユーザーが保存される。<br>
・AspNetRoles : アカウントの役割が登録される。<br>
・AspNetUserRoles : 上記2つの関連付けテーブル<br>
※他は省略

#動作確認
先ほど同じくRegister画面でフォームを入力し更新。
![キャプチャ4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110251/cde39584-2411-82a6-6358-3c9c69c57f27.png)
以下の画面が表示される。これは本来であれば登録したメールアドレスにメールが送信され、リンクをクリックする事でメールアドレスの確認が完了となるが、現在では実際にメールは送信されないようになっている(コーディングレベル)。「Click here to confirm your account」をクリックする事で確認済となる。
![キャプチャ8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110251/f3ddea6d-56d2-cbc2-9be8-ef68b595a3fc.png)
![キャプチャ9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110251/7148718a-8843-4c96-e815-83eb20386f82.png)
実際にログインして見る。
![キャプチャ10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110251/a69545c4-5a00-1546-8cef-f86f109cec70.png)
ログインに成功したらメニューの「Fetch data」にアクセスが可能となる。
![キャプチャ11.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110251/64a5a009-d395-647e-828e-30963b5d4249.png)

<br>
[Blazor関連のリンク]
[Blazor WebAssembly プロジェクト作成(認証あり)](https://qiita.com/pero_88/items/be142d5d0ba92e5c91d0)
[Blazor WebAssembly 初期プロジェクト構成の入門](https://qiita.com/pero_88/items/ced1028ad536a43fec1d)
[Blazor WebAssembly Postgresを使うまで](https://qiita.com/pero_88/items/23e88a1d2bc3659b9946)
[Blazor WebAssembly コードビハインド](https://qiita.com/pero_88/items/be871f4ac63868f048f0)
[Blazor WebAssembly InputSelectの使い方](https://qiita.com/pero_88/items/3eddcd1aedf8bbc8441b)