More than 1 year has passed since last update.

Azure AD B2C 入門のメモ書き

AzureADB2C

Last updated at 2022-11-11Posted at 2022-05-14

0.はじめに

おそらくこの記事を読む方は Azure AD B2C の経験や興味があったり、これから Azure AD B2C の導入を検討している方かと思います。
そうした方に向けて少し独特な部分で困惑したり、
学び初めでつまずくと言ったストレスを減らせるよう、
私なりにAzure AD B2C を使いこなすための学習順序をまとめてみました。
※実際に私は仕事でAzure AD B2C と格闘する経験がありましたので、その経験をまとめてみました

お困りの皆様やこれからチャレンジする方に向けて少しでも役立つ情報が見つかれば幸いです
(なお本記事では個人の見解で記載しており、組織や企業を代表するものではないことあらかじめご了承ください。)

1. まずは OAuth / Open ID Connect (OIDC) の基礎をおさえる

そもそも Azure AD B2C の主な役割は、コンシューマー向け OAuth / Open ID Connect (OIDC) の ID プロバイダー (IdP) となります。(一応 SAML も使えますが公開情報少なめな印象があります)
そのため公開情報は、OAuth / OIDC の知識があることを前提に書かれている部分が多いです。
OAuth / OIDC の知識がない場合、全体像が掴めなかったり、各種用語が分からないといったことが原因で、公開情報を十分に理解できないという現象が発生します。

なので、 Azure AD B2C を始める前に OAuth / OIDC についての基礎知識を先に準備したほうが良いと思います。
もし OAuth / OIDC の知識をキャッチアップする時間をあまりとれないという方は、
Authlete さんの以下動画 (約 1 時間 40 分)がとてもおすすめです。
OAuth & OIDC 入門編 by #authlete
↑実際に私もあまり勉強時間をとれなかったのでこの動画にお世話になりました。

2. Azure AD B2C の概要を理解する

かなり乱暴ですが、シンプルに説明するとすれば、 Azure AD B2C の概要は以下になります。

認証に関する機能を Azure AD B2C にお任せすることができるので、アプリケーション側で認証に関する実装や考慮すべき内容をかなり減らせます。
また条件付きアクセスや Identity Protection といった Azure AD のセキュリティ機能も導入できるといったことも
Azure AD B2C の魅力の 1 つになるかと思います。

より詳細には以下の公開情報に記載されていますので、こちらもご確認ください。
公開情報:Azure Active Directory B2C とは
 公開情報:Azure Active Directory B2C の技術と機能の概要
※"Azure Active Directory B2C の技術と機能の概要" には用語の説明が記載されていますので、慣れるまで便利です

また、上記の公開情報が分かりずらければ、以下のブログたちもおすすめです。
Azure AD B2C のアーキテクチャを理解する
 Azure AD B2C のキホンとよくある質問
特に "Azure AD B2C のキホンとよくある質問" では、 Azure AD B2C の活用に適したシナリオについての説明があるので、
Azure AD B2C を採用すべきかの検討にも役立つ情報になるかと思います。

長いドキュメントを読むのが苦手な方は以下の youtube 動画を見るのもよいと思います。
Azure AD B2C: How to enable consumer logins and access management for your B2C apps
↑こちら英語ですが、10 分 30 秒と短めですので手軽に見れます。
S14 Azure Active Directory B2C による顧客/市民 ID 管理の考え方と実装 | 日本マイクロソフト
↑こちらは日本語で、ユースケースについても含まれており、より丁寧に説明された動画です。

3.Azure AD B2C を含めたシステムの全体像を把握する

システムの全体構成は OAuth や OIDC に準ずるといった感じです。
各種要件によって異なる部分はありますが私なりにざっと全体像をまとめてみました。

※緑色の表記は操作や導入が必要な設定項目 / ライブラリを表しています。
※フロントエンドとバックエンドに分割されているアプリへ Azure AD B2C の認証を組み込むシナリオを想定しており、バックエンド API の要求には Azure AD B2C によって発行されたトークンの提示が必要な構成にしております。
※アプリがフロントエンドとバックエンドに分かれていない場合は、バックエンドがないものとしてお考えください

なお Github にあるサンプルコードの READ.ME などにも少し構成についての記載があったりもします。
Github のサンプルコードへのアクセスは以下の公開情報からたどることができます。
数あるサンプルのうちシングルページアプリの Github あたりが割としっかり READ.ME の記載があります。
Azure Active Directory B2C のサンプルコード

4.ユーザーフローについて学習する

全体構成のうち、まずはユーザーフローにのみ着眼点を当てて学習します。

まずは、以下 3 つのチュートリアルを実施し、ユーザーフローのイメージをつかみます。
公開情報: チュートリアル:Azure Active Directory B2C テナントの作成
 公開情報: チュートリアル:Azure Active Directory B2C に Web アプリケーションを登録する
 公開情報: チュートリアル: Azure Active Directory B2C でユーザーフローとカスタムポリシーを作成する

ある程度ユーザーフローの理解が深まったところで、次に Azure AD B2C 公開情報のうち以下の、[操作方法のガイド] > [フローを作成する] の配下にある各種公開情報の内容を一通り試します。[操作方法のガイド] > [フローを作成する] を一通り試し理解できれば、ユーザーフローのキホンを習得したといえると思います。

公開情報: Azure Active Directory B2C でサインアップおよびサインインフローを設定する

キホン習得後は、目的や要件、お好みに応じて、[操作方法のガイド] 配下に存在する公開情報を試して、
ユーザーフローの設定やカスタマイズ性についてさらに学習します。

例えば [操作のガイド] > [ID プロバイダー] では SNS によるサインインといった内容を、
[操作のガイド] > [UX のカスタマイズ] ではサインイン画面のカスタマイズ、多言語対応、パスワードの複雑性などの設定を学ぶことができます。

また以下の公開情報にはユーザーフローでできることの概要がまとまっておりますので、ご参考になると思います。
公開情報: Azure Active Directory B2C のユーザーフローバージョン

5.アプリケーション側のサンプルコードを学習する

5.1.アプリケーション側 (フロントエンド側) を学習する

全体構成のうち、まずはアプリケーション側 (フロントエンド側) に着眼点を当てて学習します。

ここでは、Microsoft 社が提供するライブラリ(MSAL.JS またはMicrosoft.Identity.Web)を使ったアプリケーションに Azure AD B2C の認証を導入する方法を学びます。

Azure AD B2C の公開情報のうち [操作方法のガイド] > [アプリの統合] の配下で、ご自身になじみのある言語やフレームワークのものを選んでいただき、更にその配下にある [...サンプル Web アプリを構成する] などを実施します。
公開情報: Azure AD B2C を使用して Web API を呼び出すサンプルの Web アプリで認証を構成する

※可能であればバックエンド側の実装含まれている以下のいずれかのサンプルで学習するのが良いと思います。
・Web API を呼び出す ASP.NET Core Web アプリ
・シングルページアプリケーション (SPA)
・Web API を呼び出す Node.js Web アプリ
・Angular シングルページアプリケーション

更に詳細を学ぶ場合には Github サンプル側の READ.ME などを熟読したり、サンプルアプリの動作をご自身で検証研究する形になると思います。
Github サンプルのリンクは公開情報の末尾や、公開情報の手順の途中に git clone コマンドがあるので、そこに記載された URL をブラウザで開きます。

5.2.アプリケーション側 (バックエンド側) を学習する

次にアプリケーション側 (バックエンド側) に着眼点を当てて学習します。

ASP.NET Core または Node.js の場合は以下の公開情報で詳細を学習することができます。
公開情報: 保護された Web API: コード構成

それ以外の言語などについては、以下サンプルにバックエンド側の実装が行われていますので、
その詳細を、 Github サンプル側の READ.ME やサンプルコードから学ぶことができます。
・Web API を呼び出す ASP.NET Core Web アプリ
・シングルページアプリケーション (SPA)
・Web API を呼び出す Node.js Web アプリ
・Angular シングルページアプリケーション

5.3.サンプルにない言語やフレームワークを使いたい場合 (必要があれば実施)

この場合はMicrosoft 側の公開情報の記載が少なく、また OAuth/OIDC の実装の知識や自身の試行錯誤が必要になってきます。
自信や経験が少ない方はなるべくサンプルにある言語やフレームワークを使うことをおすすめします。

とはいえ、OAuth / OIDC のリクエストとトークンの検証さえできればよいので、
手探りにはなりますが3rd Party や OSS のライブラリを使っても実装はできると予想されます。
ちなみにアプリ側の実装概要は以下になるかと思われます。

アプリケーション側 (フロントエンド側)では、OAuth / OIDC 認証のリクエスト要求とトークンの検証
アプリケーション側 (バックエンド側)では、トークンの検証

OAuth / OIDC 認証のリクエスト要求については以下の公開情報などに仕様が記載されています。
公開情報: Microsoft ID プラットフォームと OAuth 2.0 認証コードフロー
こちらの仕様に合うように3rd Party のライブラリなどを使ってリクエストを行えるように実装します。

トークンの検証については、JWT の署名検証を行う必要があります。
少しだけ公開情報にも言及がありますが、より具体的な方法については JWT の署名検証という観点で調べていただくのが良いかと思います。
公開情報:Azure Active Directory B2C のトークンの概要
例えば、こちらのブログでは 3rd Party のライブラリをJWT の署名検証の方法が紹介されています。
Azure ADのIDトークンの署名を検証する

JWT の署名の検証について詳しく知りたいという方は、以下の Qiita を読むのがいいかと思います。
※一からの実装は結構大変そうですので、何らなのライブラリを使うのがまずはよいかなと思います。
OpenID Connect の JWT の署名を自力で検証してみると見えてきた公開鍵暗号の実装の話

なおOAuth / OIDC 認証のリクエスト要求とトークンの検証を実装するためには認可エンドポイントやJWK URI (署名を検証するための公開鍵) など Azure AD B2C の各種情報が必要になります。
特に、OAuth / OIDC 認証のリクエスト要求とトークンの検証に係る公開情報は Azure AD のものと共用になっており、
認可エンドポイントやトークンエンドポイント JWK URI などについては Azure AD B2C のものに置き替えて読む必要があります。

これらの情報は OIDCメタデータとして提供されおり、以下の URI より取得できます。
https://<テナント名>.b2clogin.com/<テナント名>.onmicrosoft.com/<ユーザーフロー名またはカスタムポリシー名>/v2.0/.well-known/openid-configuration

[Azure Portal] >[Azure AD B2C] > [ユーザーフロー] > "対象のユーザーフロー" > [ユーザーフローを実行します] からも
取得できますので、こちらのほうが手軽かもしれせん。

6.カスタムポリシーを学習する(必要があれば実施)

6.0. カスタムポリシーを始める前に

ユーザーフローではあらかじめ Micorosoft によって用意された処理しかできません。
そのため例えば、サインイン時に使用されたパスワードが 90 日以上古かったらパスワードの変更したい、
サインアップの処理の中に、他のサービスの API を組み込みたいなどといったカスタマイズ要件に
ユーザーフローでは対応できない場合があります。
こうした高度なカスタマイズ要件がある場合にはカスタムポリシーを利用します。

カスタムポリシーはコードを記載できるのでかなり柔軟でカスタマイズ性に優れるといったメリットがあります。
一方でカスタムポリシーのコードは XML 形式で、独自の文法を持つため、難易度が高く、学習コストも要求されます。
そのためカスタムポリシーの導入はユーザーフローに比べて開発/運用のコストが増大する傾向があるので注意が必要です。

なおカスタムポリシーはいきなり公開情報を見つつ 0 から記載するのは非常に難しいのでやめたほうがいいです。
その代わり、基本的なものから応用的なものまでかなり豊富にサンプルが用意されておりますので、
まずはそのサンプルをベースに必要な部分を少しずつカスタマイズしていくのが良いかと思います。
私の経験から、カスタムポリシーを習得するにあたりおすすめに学習順序について以下に記載しました。
ぜひご参考ください。

6.1.チュートリアルをやってみる

まず以下の公開情報を試し、カスタムポリシーの構成 / アップロード / 利用までの一連の流れを理解することから始めます。
公開情報: チュートリアル: Azure Active Directory B2C でユーザーフローとカスタムポリシーを作成する
※Starter Pack というもっとも基本的なサンプルを使用します。Starter Pack はチュートリアル以降も使う重要なツールです。

6.2. カスタムポリシーの概要を学習します。

基本用語やどのように動作するのかなどについて学んでいきます。
学習には以下の公開情報やブログを利用するのがおすすめです。
公開情報: Azure AD B2C カスタムポリシーの概要
 冴えないCustom Policyの育て方

英語でも構わなければ Azure AD B2C Community が用意している Wiki やyoutube に動画もあり、かなり詳細な説明があります。
Azure AD B2C Webinar Series: Custom Policies Part 1
Azure AD B2C Community IEF Wiki Concepts

6.3 チュートリアルで作成したカスタムポリシーを読み込む

チュートリアルで作成したカスタムポリシー (Starter Pack) の詳細を読み込みどのように動作しているのかを確認します。
その勉強には以下のように Starter Pack に用意されたカスタムポリシーの READ.ME や Azure AD B2C Community の Wiki を活用しつつ、手元にあるカスタムポリシーの記述と照らし合わせて少しづつ理解してみるのがおすすめです。
active-directory-b2c-custom-policy-starterpack/LocalAccounts
Azure AD B2C Community IEF Wiki Code walkthrough

[2022/11/11 追記]
またスタータパックの解説記事も書いたので、よければこちらもご参考ください
Azure AD B2C カスタムポリシーのスターターパック (LocalAccounts) の解説

6.4. サンプル集をいくつか使ってみる

これまで使って気がサンプル Starter Pack はかなりシンプルな動作内容しかないため、そのまま実践に使っていくことは難しいです。
そこでより実践的な様々なシナリオ様に Starter Pack をベースに拡張されたサンプル集が以下の Github に用意されています。
azure-ad-b2c/samples
興味があるものをいくつか選んで試しつつ、Github の READ.ME を読んだり
各種細かなパラメータの意味や定義などについて、公開情報の [リファレンス]>[カスタムポリシースキーマ] で調べて理解していきます。

6.5. サンプル集を使用して要件が達成できないかを考えてみる

この段階でいよいよ本来やりたかった要件の実装を考えていきます。
基本的にはサンプル集 azure-ad-b2c/samples をベースにしたり、
サンプル同士をマージすることで要件を達成できないかを考えます。
サンプル集をベースにして、足りない部分に関しては公開情報の [操作方法]>[フロー] や [リファレンス]>[カスタムポリシースキーマ] から着想を得て、独自のカスタマイズを足してみたりします。
また、英語でstackoverflow や　Github issue で Azure AD B2C Community に相談することもできます。

7.最後の仕上げ : Azure AD B2C のベストプラクティスや公開情報の全体を学習する

この段階は、ほとんど最後の仕上げになります。
ここまでで、 Azure AD B2C のメインとなる機能や実装については習得しているので、
最後に全体的に Azure AD B2C の公開情報についてさっと目を通し、見落としていたり試していなかった各種機能をキャッチアップします。
特に実装後の運用回りなどを考慮するための観点として、各種ベストプラクティスやサービスの制限についても目を通しておくのが良いと思います。
公開情報: Azure Active Directory B2C の推奨事項とベストプラクティス
 公開情報: Azure Active Directory B2C を使用して顧客 ID およびアクセス管理で回復性を強化する
 公開情報: Azure Active Directory B2C サービスの制限と制約

ここまでやれれば、Azure AD B2C をかなり使いこなせるようになりその特徴や癖も十分に把握できるようになっているかと思います。
ここから先で何か困ったことやわからないなど、自分の力だけはどうにもならない時は、
stackoverflow や Github issue で Azure AD B2C Community に力を借りたり、
Azure サポートを契約して技術サポートを受けたりするのが良いかなと思います。

参考文献 / 引用文献

参考動画

OAuth & OIDC 入門編 by #authlete
Azure AD B2C: How to enable consumer logins and access management for your B2C apps
S14 Azure Active Directory B2C による顧客/市民 ID 管理の考え方と実装 | 日本マイクロソフト
 Azure AD B2C Webinar Series: Custom Policies Part 1

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up