Blazor WebAssemblyでAzure AD B2Cを使ったログイン処理を構成する

いわさです。

先日、Blazor WebAssemblyを触ってみました。

正直色々なテンプレートや構築オプションが用意されているようで、まだまだ理解が追いついていないです。
起動オプションに"ローカルユーザーアカウントストア"という機能があります。
こちらを使うとOpenID Connectに対応したIDプロバイダーでの認証機能を組む込むことが出来るようです。

OpenID Connectに対応したIdPのひとつにAzureAD B2Cがあります。
ローカルユーザーアカウントストアとAzureAD B2Cを連携させるべく調査を進めていましたが、どうやらAzureAD B2Cを使った認証処理を組み込むテンプレートが最初から用意されているようです。
本日はこちらを試してみました。

なお、"構成する"というタイトルにしたのは、コーディング実装はしていないからです。
テンプレートが用意されているのでそこから設定しただけで動作します。

プロダクトに適用する場合はそのままではいかないので、テンプレートでどういう処理が実装されているかは別途まとめる予定です。

前提

Azure AD B2Cテナントが作成出来ていることを前提とします。
Azure AD B2Cのテナントを作成する際にリソースプロバイダーエラーが表示されて失敗する場合は以下を参照してください。

まとめ

長いので先にまとめます。
以下の準備ですぐBlazorでAzureAD B2Cの認証機能使えます。

• サーバーアプリとクライアントアプリをAzureAD B2Cに登録する
• ユーザーフローを作成する
• Azureポータル登録時の諸々の情報を使ってBlazorアプリを構成する

ここから先はマニュアル的な感じになってしまうので、公式手順どおり実施して躓いたときに参考にしてもらえると良いかなと思っております。

Azureポータルへアプリを登録

アプリの登録メニューから新規登録を行います。
ここでは、サーバーアプリ(ASP.NET)とクライアントアプリ(SPA)の2つを登録します。

なお、アプリの登録でエンドポイント情報が確認出来ます。
この情報は後ほどBlazorのテンプレート起動を行う際に使います。

サーバー

まずはサーバー側のアプリ登録を行います。

サポートされているアカウントの種類は任意のIDプロバイダーまたは組織ディレクトリ内のアカウント（ユーザーフローを使用したユーザーの認証用）を選択します。
リダイレクトURIはWebを選択しURIは未設定とします。

登録後、ブランドから「パブリッシャードメイン」を確認しておきましょう。
Blazorでテンプレート起動する際に使います。

APIの公開からスコープを追加します。
ここで追加した、スコープ名とアプリケーションIDのURIはBlazorでテンプレート起動する際に使います。

クライアント

次にクライアント用にアプリケーションの登録を行います。　　 先程と違い、リダイレクトURIはシングルページアプリケーションを選択し、URIは以下の形式で入力します。

https://localhost:5001/authentication/login-callback

認証メニューを開き、アクセストークン（暗黙的なフローに使用）とIDトークン（暗黙的およびハイブリッドフローに使用）がチェックされてないことを確認します。

APIのアクセス許可メニューから、アクセス許可を追加します。 先程作成したAPIを選択しスコープのアクセス許可にチェックを入れます。

アクセス許可一覧に戻ったあと、iwasa-b2c-orgに管理者の同意を与えますをクリックします。

ユーザーフロー作成

B2Cテナントでユーザーフローを新規作成します。
ユーザーフローを使うとサインインやサインアップ、パスワードリセットなどを行う際に、アプリケーションとどのように対話するかを設定することが出来ます。

新しいユーザーフローから、ここでは"サインアップとサインイン"を選択します。

"ユーザー属性とトークン要求"で詳細を表示し、表示名をチェックします。

最後に、 事前に確認用ユーザーをAzureAD B2Cテナントに作っておきます。

Blazorアプリを構成し確認

Azureポータル上での準備が完了しましたので、Blazorアプリを作成し動作確認してみます。

以下のコマンドを実行し、認証機能を組み込んだBlazor WebAssemblyテンプレートを起動します。

dotnet new blazorwasm -au IndividualB2C --aad-b2c-instance "https://iwasab2c.b2clogin.com/" --api-client-id "de6c4ac5-a958-4e97-9d49-1480c1bf034b" --app-id-uri "de6c4ac5-a958-4e97-9d49-1480c1bf034b" --client-id "3878dc16-8f21-4b27-b647-9bac55363492" --default-scope "hoge" --domain "iwasab2c.onmicrosoft.com" -ho -o BlazorAuthSample -ssp "B2C_1_signupsignin"

サーバーアプリをスタートアッププロジェクトに設定して実行します。

前回と同様のデフォルトアプリが起動されますが、Log inメニューが用意されています。
選択しログイン操作してみましょう。

作成したテストユーザーのEメールアドレスとパスワードを入力します。

ログインに成功しました。

先程のコマンドで、Azureポータル上で用意した各種情報を使ってソースコードや設定ファイルが生成されています。
自前のアプリケーションに組み込む際はこれらの設定処理を把握し、実装する必要があります。
そのあたりの情報整理は別途準備したいと思います。

参考