見出し画像

アプリケーションの認証基盤として Azure AD B2C を利用する手法について

TECH4ALL(テックブログ)

はじめに

IDサービスである Azure Active Directory B2C の一般的な利用方法についてまとめてみました。

Azure Active Directory B2C とは

Azure Active Directory B2C (以下、AAD B2C と記載する)は、企業↔︎消費者間のIDをサービスとして提供するものです。 消費者は好みのソーシャルIDやエンタープライズ、またはローカルアカウントIDを使用してアプリケーションやAPIへシングルサインオン(SSO)アクセスができます。

AAD B2C は[テナント]として管理され、Microsoft Entra テナントの一種となります。
AAD B2C テナントは複数作成でき、それぞれのテナントは分離されていて、アプリケーション毎に用意できるユーザーのディレクトリとなります。

AAD B2C の特徴

AAD B2C は 顧客のIDと、顧客によるアプリケーションへのアクセスを管理するためのものです。
AAD B2C には Microsoft Entra テナントが必要となりますが、組織で利用している Azure サブスクリプションが紐づいているものや Microsoft 365 で使用しているテナントとは別物となります。
AAD B2C テナントでは、まず最初にアプリケーションを登録する必要があります。
また、ユーザーのサインインやサインアップなどの操作管理にはユーザーフローを使用します。
ユーザーフローは複数の種類のユーザーフローを作成できます。
AAD B2Cの主な特徴は以下となります。

  • ユーザー(顧客)は自分自身が選択したIDプロバイダーを使用して認証が可能

  • ユーザー(顧客)のサインイン、個人設定、変換データの監視が可能となる

  • ユーザー(顧客)のカスタム属性が保存でき、アプリケーションでその属性情報を使用することができる

  • 独自のデザインのカスタムUIサインインのエクスペリエンスが構成できる

  • B2C を使用することで組織アカウントと顧客アカウントを分離して管理できる

AAD B2C テナントで使用する主なリソース

AAD B2C で利用するリソースには主に以下のものがあります。

利用方法

AAD B2C はデプロイする際に、Azure サブスクリプションに紐づきます。
Azure サブスクリプション上にリソースとしてデプロイされますが、実際の操作はテナントを切り替えて操作する必要があります。
利用するには Azure サブスクリプションが紐づいている Azure テナントにて行います。
Azure Portal へログインして操作します。

リソース（AAD B2Cテナント）の作成

Azure Portal から[リソースの作成]をクリックします。

[Azure AD B2C]を検索して[Azure Active Directory B2C]の下部にある[作成]をクリックします。

[新しい Azure AD B2C テナントを作成する]をクリックします。

入力項目は以下の通りです。

上記を入力して、[確認および作成]をクリックすることでデプロイが始まります。

作成が完了したら画面上に[テナントが正常に作成されました。新しいテナント ロンド・ベル に移動するには、ここをクリックします。]と表示されるので、リンクをクリックすることで新しいテナントへアクセスできます。

アプリケーション登録

アプリケーションと認証連携するには AAD B2C へ対象のアプリケーションを登録する必要があります。
AAD B2C 画面の[アプリの登録]から新規登録をします。

以下入力項目を入力し、[登録]します。
入力項目は以下の通りです。

以上でアプリケーションの登録が完了しました。

クライアント シークレットの作成

Webアプリケーションを登録する場合は、アプリケーションシークレットの作成が必要となります。
認証コードをアクセストークンと交換するためにアプリケーションで使用するものとなります。
AAD B2C 画面の[アプリの登録]から前項で作成したアプリケーションを選択します。
左部メニューの[管理]から[証明書とシークレット]を表示します。
[新しいクライアントシークレット]をクリックし、説明と有効期限を設定して[追加]します。

シークレットの値は一度しか表示されないため必ずメモしておきましょう。
この値はアプリケーションのコード内で、アプリケーションシークレットとして使用します。

次にユーザーフローやカスタムポリシーのテストを行うために、以下設定を行います。
左部メニューの[管理]から[認証]を表示します。
[暗黙的な許可およびハイブリッド フロー]で、[アクセス トークン (暗黙的なフローに使用)]と[ID トークン (暗黙的およびハイブリッド フローに使用)]の両方のチェックボックスにチェックを入れ、[保存]します。

ユーザーフロー作成

ここでは一般的なシナリオとしてサインアップとサインインのユーザーフローを作成します。
テンプレートとして用意されているものは以下となります。

  • サインアップとサインイン

  • プロファイル編集

  • パスワード リセット

  • サインアップ

  • サインイン

  • リソース所有者のパスワード資格情報(ROPC)を使用してサインインする

サインアップとサインインを使用することで、1つの構成でサインアップとサインインが処理できます。

作成するには[Azure AD B2C]の左部メニューの[ポリシー]から[ユーザーフロー]を表示します。

[新しいユーザーフロー]を実行し、[サインアップとサインイン]をクリックします。
バージョンは[推奨]を選択して[作成]します。

作成画面では以下項目を入力します。

入力が終わったら[作成]をクリックして作成します。
作成されたユーザーフローを選択します。
現状の設定値が表示されます。
言語などある程度変更可能ですが、画面自体のカスタマイズをしたい場合はカスタムページコンテンツを作成することで構成できます。
ここでは標準のサインアップとサインインのユーザーフローをテスト実行していきます。

画面上部の[ユーザー フローを実行します]をクリックします。

作成済みのアプリケーションと応答URLを選択して、[ユーザー フローを実行します]をクリックします。

以下のような画面が表示されるので、[今すぐサインアップ]を実行してみます。

以下のような画面が表示されるので、メールアドレスを入力してコードの確認とパスワード入力をします。

メールに届いたコードを入力した後、アプリケーションへリダイレクトされトークンが引き渡されます。
以下画面はMicrosoftが用意しているテスト用サイトへリダイレクトした例となります。

上記はテンプレートとして用意されている画面ですので、実際のアプリケーションを運用するとなるとテンプレートの画面では詳細なカスタマイズが出来ず、画面要求に沿ったサインアップ画面やサインイン画面の実現が困難です。
そういった場合にはページレイアウトをカスタマイズして適用するということが可能になっていますので、カスタムページコンテンツを作成して適用しましょう。
適用するには別途Webサーバー(Web Apps や Storage Blob の Static Web Sites 機能を利用したりすると良いです)を構築し、コンテンツを配置してユーザーフローの[カスタムページコンテンツの使用]を[はい]にして、[カスタムページURI]へ作成したコンテンツを設定します。

カスタムポリシー作成

カスタムポリシーは AAD B2C テナントの一般的なIDタスクの定義には構成されていないものを追加するために利用されます。
カスタムポリシーを利用することで、標準プロトコル(OpenID Connect、OAuth、SAMLなど)が利用可能となります。
カスタムポリシーはXML形式で作成され、構成要素やユーザー及び他の利用者との対話、ビジネスロジックが定義されます。

カスタムポリシーは事前に構成されたサンプルとしてカスタムポリシースターターパックが用意されています

。
また、サンプルも GitHub にてAzure AD B2C サンプルが公開されており、ローカルアカウントポリシーの強化やソーシャルアカウントポリシーの強化、MFAの強化、ユーザーインターフェイスの強化、アプリケーションの移行、ユーザーの移行など様々なサンプルが用意されています。
ポリシーのカスタマイズを検討されている場合は、上記スターターパックやサンプルを元にカスタマイズすると良いでしょう。
本項では深くは記載しませんが、編集したXMLは以下画面より登録して利用する形となります。

まとめ

如何でしたでしょうか。
アプリケーション側で認証の仕組みを作ることなく、認証画面まで用意できるサービスとなっているためアプリケーション開発者は認証部分の仕組みの工数削減が可能となります。
実際案件でも多々利用されるサービスとなっていますので、リリース当初と比較すると大分利用しやすくなったと思います。
以下が利用する大きなメリットとなるのではと感じています。

  • 複数のユーザーフローを用意でき、サインアップやサインインを個別に用意するなど画面仕様によって使い分けられる

  • IDプロバイダーをサポートすることで、Amazon、Microsoft Entra ID、Facebook、LinkedIn、X(旧Twitter）、Microsoft アカウントなどのソーシャル プロバイダーのサポートも可能

  • UIのブランド化がサポートされており、独自のHTMLやCSSを用意することでユーザーフローのページをカスタマイズできる

  • ユーザー属性情報をアプリケーションと連携可能

アプリケーションの設計を検討されているのであれば、このようなIDサービスの利用を一考してみるのも良いかと思います。
ID管理部分をサービス化するだけで運用コストも下げることが出来ると思いますので、是非検討してみてください。

この記事が気に入ったらサポートをしてみませんか？