はじめに
この記事は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 プロジェクト作成(認証あり)
Blazor WebAssembly 初期プロジェクト構成の入門
Blazor WebAssembly Postgresを使うまで
Blazor WebAssembly コードビハインド
Blazor WebAssembly InputSelectの使い方
↧