Edited at

Azure AD B2C のススメ(1)

More than 1 year has passed since last update.


Azure AD B2C のススメ(1)

AzureAD B2C、非常に素晴らしい仕組みなのにイマイチマイナーな感じがするのでもっと広まってほしいと思い実例を交えつつ紹介記事を。

AzureAD B2Cってなんだよって一口に言うと、Azure上のMicrosoft Account他様々なソーシャルログインに対応したID管理サービスです(AzureADって昔からあるActiveDirectoryの名前を引き継いでいるせいで一般に機能を誤解されがちだと思います)。

GoogleやFacebookアカウントでのログインに加えローカルアカウントでのログイン(何と言えば良いんでしょう?非ソーシャルログイン?)までまるっと提供してくれるのでID管理するのにDBに個人情報が〜パスワードが〜と悩まされる事なくサービスの開発に集中できます。


ディレクトリ作成

とりあえずディレクトリを作りましょう。リソースの新規作成ボタンを押し、B2Cディレクトリを作成します。

1-create.png

正式名称 "Azure Active Directory B2C" なので "AzureAD B2C"だと出てきません。注意。

1-create-2.png

組織名とドメイン名を登録して作成開始です。多少時間は掛かります。

1-created.png

出来上がったら作成した AzureAD B2Cリソースの設定か、右上のアカウント情報からディレクトリの切り替えを使用して作成したディレクトリに切り替え、設定を進めていきましょう。


ID プロバイダー設定

次に ID プロバイダー設定を行っていきます。

1-id-provider.png

まず IDプロバイダーを開きます。ローカルアカウントというのは外部の認証を使わず、作成したディレクトリに直接ユーザを登録する使い方の事です。

Qiitaで言えばメールアドレス・パスワードによる登録のようなもの。これが AzureB2C から提供される事によって通常ならローカルアカウント(自前で管理)+外部認証になりがちなシステムがユーザ管理を全て外にぶん投げる事ができるようになるというのが非常に気に入っています。

で、ローカルアカウントにはユーザ名かユーザ登録時のメールアドレスのどちらを入力させるかです。

1-select-provider.png

追加ボタンを押し、使用するIDプロバイダーを追加していきます。プロバイダーごとの設定手順は

ハウツー記事に操作手順が記載されています。

いつの間にやらプレビュー含め10種類も^^;

1-id-provider-add-google.png

とりあえずここでは Googleアカウントでのサインインを追加します。

別途 Google Developer Console からプロジェクト・認証を追加し、クライアントID/シークレットを持ってきます(詳しい手順は公式ドキュメント参照)。


ポリシー作成

1-create-policy.png

戻ってポリシーを追加していきます。

追加したいポリシーの種類を選択して 追加 ボタンを押し、名前と各種設定を行っていきます。

ここではサインイン・アップ用に "B2C_sign_in_up" というポリシーを作成し、ローカルアカウントと先程追加した Google の IDプロバイダーを有効としました。


アプリケーション作成

1-create-application.png

作成したB2Cディレクトリで認証を行うアプリケーションを作成します。通常の AzureAD 連携を行うアプリケーションと同じ要領です。これは Webアプリを作成する場合の例です。

一度保存するとアプリケーションIDが払い出されるのでメモっておきましょう。

1-test-policy.png

また、アプリケーション登録後にポリシー編集画面に戻るとこんな感じでサインイン画面のテストを行う事ができます。

1-test-sign-in-up.png

リンクを開いてみるとこんな感じ。追加済みIDプロバイダーもしくはローカルログインによるサインインとローカルアカウントのサインアップが表示され、サインイン・サインアップの動きを確認できます。

もちろん応答URLには何もありませんのでその後は何もありませんが。


まとめ

とりあえずディレクトリを作成してアプリケーションの認証を設定して試せる所まで駆け足で説明しました。

次回はこのディレクトリの認証を利用したアプリケーションの実装を解説していきたいと思います。