はじめに
この記事は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関連のリンク] [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)