はじめに

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

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

デバック成功までの手順

この時点でデバック実行は正常に動きます。以下の画面が出ていると思います。

しかし、右上のRegisterを押しフォームを入力し更新するとエラーが発生します。

このエラーはアカウントを登録するため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を変更する。
- 以下のテーブルが自動で作成される。
  
  ・__EFMigrationsHistory : Migrationの実行履歴保存用。この履歴を見て実行されていないMigrationが実行される。
  ・AspNetUsers : アカウントの登録ユーザーが保存される。
  ・AspNetRoles : アカウントの役割が登録される。
  ・AspNetUserRoles : 上記2つの関連付けテーブル
  ※他は省略

動作確認

先ほど同じくRegister画面でフォームを入力し更新。

以下の画面が表示される。これは本来であれば登録したメールアドレスにメールが送信され、リンクをクリックする事でメールアドレスの確認が完了となるが、現在では実際にメールは送信されないようになっている(コーディングレベル)。「Click here to confirm your account」をクリックする事で確認済となる。

実際にログインして見る。

ログインに成功したらメニューの「Fetch data」にアクセスが可能となる。

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

はじめに

デバック成功までの手順

アカウント情報格納用のテーブルを作成する。

動作確認