認証

【Blazor】認証機能を Azure Active Directory B2C で実現する方法

azure-active-directory-b2c
何か Web サービスを作るぞ!

このように意気込んだものの、最初のログイン機能でつまづいてしまう、なんて話はよくあります(私です)。

実は Blazor ではユーザー認証機能が用意されているので、サインインやログインの処理は簡単に追加できるんです。

テンプレートを作成するときに「認証あり」として作成すれば、Identity Server を使用した認証機能が自動で追加されるようにもなっています。

Identity Server でのセットアップについては、「Identity Server を使用して認証機能を実装する方法」を参照してください。

ですが上記の方法で実装をしてみると、とても処理が重くて使い物になりませんでした。

そこで本記事では、より軽く動作する「Azure Active Directory B2C」を Blazor に統合する手順について解説しました。

処理が軽いだけでなく、ユーザー管理も簡単になります。

月間のアクティブユーザー(MAU)が 50,000 ユーザーまで無料なので、十分な容量ですね。

手順としては少し長いですが、途中を省略せずに解説しているので、迷うことなく進められると思います。

前置きはこれくらいにして、さっそく見ていきましょう。

テナントの作成

うまくいかない場合は、「チュートリアル:Azure Active DirectoryB2Cテナントを作成する」も参照してください。

まずは、「テナント」というものを作成していきます。

普段の生活で「テナント募集中」という張り紙があるのを見たことがありませんか?

Azure でも同じで、「お店」みたいなイメージをもっていただくといいと思います。

では、Azure ポータルにアクセスして、「リソース」の追加を選択してください。

azure-active-directory-b2c

続いて、検索窓に「Azure Active Directory B2C」を入力して該当のサービスを探します。(長いので、以下 Azure AD B2C と表現します)

azure-active-directory-b2c

Azure AD B2C が表示されたら、作成ボタンを押しましょう。

azure-active-directory-b2c

新しい Azure AD B2C テナントを作成します。

azure-active-directory-b2c

組織名と初期ドメイン名は好きなもので構いません。

国は日本を選んでおきましょう。

azure-active-directory-b2c

サブスクリプションとリソースグループを選びます。

課金先みたいなイメージですね。

サブスクリプションの作成方法については、「追加 Azure サブスクリプションの作成」を参考にしてください。

入力ができたら「確認および作成」を選択します。

azure-active-directory-b2c

これでテナントの登録は完了なのですが、これだけでは使えません。

サブスクリプションに対して「Active Directory を使いますよ」という設定をする必要があります

サブスクリプションのリソースプロバイダーを開き、「Microsoft.AzureActiveDirectory」を登録してあげましょう。

azure-active-directory-b2c

そして、先ほど作成したテナントがディレクトリとしてできているはずなので、ホーム画面から切り替えをしておきます。

azure-active-directory-b2c

これでテナントの準備が整いました。

アプリの登録(サーバー側)

Azure AD B2C にサーバー側のアプリを登録していきます。

「アプリの登録 > 新規登録」を選択してください。

azure-active-directory-b2c

アプリケーションの名前は何でもいいですが、「BlazorSignIn」としました。

サポートされているアカウントの種類は、「任意の ID プロバイダーまたは組織ディレクトリ内のアカウント(ユーザーフローを使用したユーザーの認証用)」を選択します。

ユーザーフローについては後で登録するので、今は気にしなくて大丈夫です。

azure-active-directory-b2c

リダイレクト URI は空欄にします(クライアント側のアプリで設定します)。

アクセス許可のチェックが付いていることを確認して、登録しましょう。

azure-active-directory-b2c

続いて、スコープの追加をしていきます。

API が許可する範囲を設定するイメージですね。

「API の公開 > Scope の追加」を選択してください。

azure-active-directory-b2c

画像では xxxx にしていますが、ランダムな文字列が自動生成されます。

そのまま「保存して続ける」を選択してください。

azure-active-directory-b2c

スコープ名は何でも構いません。

公式ドキュメントにしたがって、「API.Access」としました。

同意の表示名と同意の説明については、それっぽい内容を書いておけば OK です。

状態が「有効」になっていることを確認して、「スコープの追加」を選択してください。

azure-active-directory-b2c

これでサーバー側の登録は完了です。

アプリの登録(クライアント側)

次に、クライアント側のアプリを登録していきましょう。

名前は「BlazorSignInClient」としました。

サポートされているアカウントの種類は、「任意の ID プロバイダーまたは組織ディレクトリ内のアカウント(ユーザーフローを使用したユーザーの認証用)」を選択します。

azure-active-directory-b2c

クライアント側のアプリでは、リダイレクト URI(https://localhost:5001/authentication/login-callback)を設定します。

ローカルで試すので、localhost を指定しました。

アクセス許可のチェックが付いていることを確認して、登録しましょう。

azure-active-directory-b2c

続いて、「認証」のメニューを開き、次のふたつにチェックを付けて保存してください。

  • アクセストークン(暗黙的なフローに使用)
  • ID トークン(暗黙的およびハイブリッドフローに使用)
azure-active-directory-b2c

認証のところではもうひとつ操作があります。

URI リダイレクトの「→」を選択してください。

azure-active-directory-b2c

リダイレクト URI にチェックを付けて、構成ボタンを押せば完了です。

azure-active-directory-b2c

続いて、登録したスコープを許可するため「API のアクセス許可 > アクセス許可の追加」を選択します。

azure-active-directory-b2c

「自分のAPI」のタブを開き、サーバー側のアプリとして登録したものを選択します。

azure-active-directory-b2c

最初の方で追加した「API.Access」にチェックを付けて、アクセス許可の追加をします。

azure-active-directory-b2c

次に、いま追加した API.Access に対して、管理者の同意を与えてあげます。

azure-active-directory-b2c

API.Access の状態がになっていれば OK です。

azure-active-directory-b2c

これでクライアント側のアプリ登録は完了しました。

ユーザーフローの作成

うまくいかない場合は、「チュートリアル:Azure Active Directory B2C 内にユーザー フローを作成する」も参照してみてください。

もう少し設定があるので、頑張りましょう。

Azure AD B2C の「ユーザーフロー > 新しいユーザーフロー」を選択して、ユーザーフローを追加していきます。

azure-active-directory-b2c

「サインアップとサインイン」を選択します。

azure-active-directory-b2c

「推奨」を選択して、作成します。

azure-active-directory-b2c

ユーザーフローの名前は好きな名前で構いません。

azure-active-directory-b2c

次に多要素認証についてです。

SMS/電話ベースの多要素認証を試行するたびに定額料金 ¥3.36 が請求されるので、どうしても必要な場合以外は設定しないほうがいいでしょう。

「条件付きアクセスポリシーを適用する」のチェックを外せば、メール認証だけになります。

最新の料金は「Azure Active Directory 外部 ID の料金」を参照してください。
azure-active-directory-b2c

あとは、ユーザーから収集する情報を選択していきます。

今回は表示名だけチェックをつけて、OK をしました。

azure-active-directory-b2c

これでユーザーフローの作成は完了です。

Blazor プロジェクトの作成

おまたせしました。

ようやく Blazor プロジェクトを作成することができます。

ターミナルで以下のコマンドを実行して、プロジェクトを作成していきます。

{} で表現しているところは、表の通り個別に値を設定してあげてください。

dotnet new blazorwasm -au IndividualB2C --aad-b2c-instance "{AAD B2C INSTANCE}" --api-client-id "{SERVER API APP CLIENT ID}" --app-id-uri "{SERVER API APP ID URI}" --client-id "{CLIENT APP CLIENT ID}" --default-scope "{DEFAULT SCOPE}" --domain "{TENANT DOMAIN}" -ho -o {APP NAME} -ssp "{SIGN UP OR SIGN IN POLICY}"
プレースホルダー 意味
{AAD B2C INSTANCE} インスタンス名 https://nekojoker.b2clogin.com/
{SERVER API APP CLIENT ID} サーバー側のアプリID 6518a3e3-b571-4402-bddd-e89f29bafa3e
{SERVER API APP ID URI} サーバー側のアプリ URI 6518a3e3-b571-4402-bddd-e89f29bafa3e
{CLIENT APP CLIENT ID} クライアント側のアプリID 3b8ab272-3eb2-486a-a3bf-3c661ed46d44
{DEFAULT SCOPE} スコープ名 API.Access
{TENANT DOMAIN} ドメイン名 nekojoker.onmicrosoft.com
{APP NAME} アプリ名 これから作るプロジェクト名
{SIGN UP OR SIGN IN POLICY} サインアップまたはサインインポリシー B2C_1_Signin

アプリ URI のところは、スコープを追加するときに指定した URL の初期値がサーバー側のアプリ ID と一緒になっています。

コマンドを実行してプロジェクトの作成ができたら、動作確認をしていきましょう。

デバッグ実行をすると、Hello World が表示されます。

この画面はログインをしていなくても見ることができます。

azure-active-directory-b2c

「Fetch data」のメニューを選択すると、ログイン画面が出てきました。

「Fetch data」は Home とは違って、認証されていないと見ることができないページだからですね。

azure-active-directory-b2c

まだアカウントがないので、下の方にある「Sign up now」を選択して、メールアドレスから認証コードを送信します。

azure-active-directory-b2c

届いた認証コードを入れて、パスワードとユーザー名を入力したら「Create」を押しましょう。

azure-active-directory-b2c

無事に認証が完了して、Fetch data のページを見ることができました。

画面の右上には、先ほど登録したユーザー名も表示されていることが確認できますね。

azure-active-directory-b2c

また、Azure AD B2C の画面から見ても、ユーザーが登録されていることが確認できます。

azure-active-directory-b2c
ペンギンくん
ペンギンくん
なるほど、これは便利そう!

ログイン画面の日本語化

ログイン画面が英語なので、日本語にしていきましょう。

ユーザーフローの「言語のカスタマイズの有効化」から、カスタマイズを有効にします。

azure-active-directory-b2c

日本語を既定値で有効にし、保存しましょう。

azure-active-directory-b2c

英語は使わないので、無効にしておきます。

azure-active-directory-b2c

この状態でもう一度ログイン画面を表示してみると、日本語で表示されていることが確認できました。

azure-active-directory-b2c

もし文言を変えたい場合は、設定画面から所定の JSON ファイルをアップロードすることで、文言をオーバーライドすることも可能です。

まとめ

Blazor の認証機能を Azure AD B2C を使って実現する方法について解説しました。

「なんだかうまくいかない」という人は、参考にした記事や動画を載せておくので、チェックしてみてください。

また、プログラム的にどうなっているのかについても、以下の記事に詳しく書いてあります。

ねこじょーかー
ねこじょーかー
ぜひこの記事を参考に、Azure AD B2C を導入してみてください!
【無料】PDF書籍「猫でもわかるBlazor入門」
blazor-beginner-book

Blazor の入門書を書きました。

この本を読むことで、挫折することなくスムーズに入門できます。

「無料」で配布しているので、もしよければお受け取りください。