👥

Azure初心者がAzure AD B2Cについて整理してみた part2

2022/02/05に公開

Azure

はじめに

この記事は4部構成で書いている記事の第2弾です。

part1 アカウント作成〜B2Cテナント作成
part2 B2Cテナントを触ってログイン画面を作る ←　今回
part3 part2で作った画面（ユーザーフロー）のカスタマイズ
part4 GraphAPIを使ってみる

part2である当記事は、B2Cテナントを触ってログイン画面を作るの部分を書いていきます。
part1の記事は以下からご確認ください。

part2でやること

アプリの登録
ユーザーフローの作成
アカウントを作成してみる

前提

この記事で紹介する内容は、前提として以下の作業が必ず必要となります。

part1の作業が全て完了していること
part1の記事で作成したB2Cテナントに切り替えていること
↓前回作成したテナントに切り替える方法
今回はAzure AD B2CとNext.jsを連携させています。Next.js側の設定は以下の記事を参考にしました。

アプリの登録

作成したWebアプリ、もしくはネイティブアプリでAzure AD B2Cを実装するには、Azure AD B2C側で「アプリの登録」が必要になります。
今回はローカルでNext.jsで作成したWebアプリを用意して、Azure AD B2Cと連携するようにしていきます。

↓B2Cテナントに移動したら、Azure portalホーム画面で「Azure AD B2C」を検索し、選択します。

↓「アプリの登録」をクリックします。

↓「新規登録」をクリックします。

↓各種情報を入力し、「登録」をクリックします。
今回登録するのはローカルで動くNext.jsのWebアプリなので、リダイレクトURIには「シングルページアプリケーション (SPA)」してlocalhostのURLを入力しています。
この項目は実装する環境によって入力する内容が異なります。
その他のアプリの名前以外の項目はデフォルト値のままで作成します。

これでアプリの登録は完了です。

ユーザーフローの作成

次にユーザーフローを作成します。
ユーザーフローとは、先程登録したアプリにサインイン、サインアップ等の機能を簡単に組み込むためのものです。
ユーザーフローにはサインイン、サインアップ、パスワード変更、ユーザー情報変更などの色々なフローが用意されています。これらをシチュエーションに合わせて利用します。
今回は「サインアップとサインイン」のユーザーフローを作成します。

↓B2Cの画面を開いて、「ユーザーフロー」をクリックします。

↓「新しいユーザーフロー」をクリックします。

↓今回は「サインアップとサインイン」のフローを選択し、バージョンには「推奨」を選択して、「作成」をクリックします。

↓各種情報を入力して、「作成」をクリックします。

アカウントについて

少し紛らわしいのですが、B2Cテナント内では大きく分けて2種類のユーザーが存在します。

コンシューマーユーザー
作業ユーザー（正しい名称ではありません）

コンシューマーユーザーはAzure portalでB2Cテナントを触ることはできません。ユーザーフローで作成したログイン画面からログインし、サービスを利用する側（提供される側）のユーザーです。
一方作業ユーザーというのは、Azure portalでB2Cテナントの設定をさわることができるユーザーです。
要はサービスを提供する側のユーザーです。