ホーム

【Azure AD B2C】ユーザーフローでメールアドレスログインを行う

導入

本記事では、Azure AD B2Cのユーザーフローを使い、メールアドレスアカウントでの認証処理を開発していきます。

目次

  1. ユーザーフローとは
  2. 事前準備
  3. アプリの設定

    1. アプリケーションの登録
    2. 暗黙の付与を許可する
  4. ユーザーフローの作成
  5. ユーザーフローの実行

ユーザーフローとは

ユーザーフローとは、AzureADB2Cにデフォルトで用意されている認証機能の雛形のことです。
これをベースに画面UIや言語、連携データなどの情報をGUIでカスタムしていくことができます。
用意されているユーザーフローは大きく3種類です。

  • サインアップとサインイン(新規登録とログインができます)
  • プロファイルの編集(ユーザー情報の編集ができます)
  • パスワードリセット(パスワードの変更ができます)
    ※他にもありますが、旧バージョンのフローになります

今回はサインアップとサインインを作成し、ログインできるところまで確認していきます。

事前準備

AzureADB2Cのテナントが作成されている必要があります。
テナントの作成方法についてはこちらを参照してください。

アプリの設定

アプリケーションの登録

左のナビゲーションメニューから「アプリの登録」を押下します。
ScreenShot 2020-09-13 14.09.14.png

「新規登録」を押下し、アプリの情報を入力していきます。
以下の通り入力したら「登録」を押下します。

  • アプリ名:sample-express-app(任意の値で大丈夫です)
  • サポートされているアカウントの種類:任意の組織ディレクトリ内のアカウントまたは任意の ID プロバイダー。Azure AD B2C でユーザーを認証します。
  • リダイレクトURI:https://jwt.ms/ を設定
  • アクセス許可:チェックを入れます

screencapture-portal-azure-2020-09-13-14_14_33.png

これでアプリが登録されました。
ScreenShot 2020-09-13 14.20.40.png

暗黙の付与を許可する

認証タブを押下し、画面の真ん中あたりに暗黙の付与という項目があります。
ScreenShot 2020-09-13 15.13.16.png

これはOAuth2.0におけるインプリシットフローを許可するか、という設定なのですが、詳細はここでは理解していなくて大丈夫です。
これの「IDトークン」と「アクセストークン」にチェックを入れ、「保存」を押下します。
※ここのチェックを入れておくことで、以降のユーザーフローを実行したときにトークンの中身を確認することができます。

ユーザーフローの作成

左のナビゲーションメニューから「ユーザーフロー」を押下します。
「新しいユーザーフロー」を押下します。 ScreenShot 2020-09-13 14.23.59.png

「サインアップとサインイン」を選択します。
バージョン設定はデフォルトのままで、「作成」を押下します。 ScreenShot 2020-09-13 14.24.25.png

ユーザーフローの設定をしていきます。
ここでは以下のように入力しています。

  • ユーザーフロー名:B2C1SampleSignUpSignIn
  • IDプロバイダー:Email signup にチェック
  • 多要素認証:デフォルトのまま
  • 条件付きアクセス:「条件付きアクセス ポリシーを適用する」のチェックを外す(チェックが入っているとMFAが有効になり、課金される可能性があります)
  • ユーザー情報とトークン要求:ここでは、性と名について、属性を収集すると要求を返すにチェックを入れています(任意) ScreenShot 2020-09-13 14.33.24.png ScreenShot 2020-09-13 14.33.33.png

作成が完了すると、一覧部分に表示されるようになります。 ScreenShot 2020-09-13 14.34.16.png

ユーザーフローの実行

B2C1SampleSignUpSignInを選択します。 ScreenShot 2020-09-13 14.40.13.png

「ユーザーフローを実行する」を押下すると、右側に以下の画面が表示されるかと思います。
ここではデフォルトで先ほど作成したアプリケーションと応答URLが表示されています。
デフォルトのままで大丈夫ですので、「ユーザーフローを実行します」を押下します。 ScreenShot 2020-09-13 14.41.11.png

別タブで以下の画面が開きます。 ScreenShot 2020-09-13 14.45.50.png

URLをみると以下のようになっています。
ここではパラメータの説明は省略します。

https://{テナント名}.b2clogin.com/{テナント名}.onmicrosoft.com/oauth2/v2.0/authorize
?p=B2C_1_SampleSignUpSignIn
&client_id=ae0b7503-a335-43a1-8776-e1707cca3930
&nonce=defaultNonce
&redirect_uri=https%3A%2F%2Fjwt.ms%2F
&scope=openid
&response_type=code
&prompt=login

認証機能をテストしていきますが、テスト用のアカウントが未作成かと思いますので、「Sign up now」を選択します。
ScreenShot 2020-09-13 14.56.31.png

メールアドレスを入力して「Send verification code」を押下すると、確認コードが届きます。
コードを入力し、「Verify code」を押下すると認証完了です。
パスワードと姓名の情報を入力し、createを押下します。
ScreenShot 2020-09-13 14.59.58.png

以下のようにhttps://jwt.ms/の画面が表示されていれば認証成功です。
ScreenShot 2020-09-13 15.15.11.png

URLを見てみるとid_token=eyJ0eX・・・とあるかと思います。
これはIDトークンというAzureADB2Cで認証したことを証明する情報です。
このサイトではURL部分にトークン情報が含まれていると、その情報を画面に表示する仕様となっています。
※ここではトークンの詳細な説明は省略します。

以上でユーザーフローを使った認証処理は完了です。