Azure-AD-B2Cに電話番号やユーザー名でログインする

Azure AD B2Cではデフォルトでメールアドレスでのログインが可能ですが、
ユーザーフローやカスタムポリシーを編集することでユーザー名や電話番号でのログインも可能です。
今回はユーザーフローとカスタムポリシーの両方でユーザー名と電話番号それぞれでログインを行うための手順をご紹介します。

前提（カスタムポリシー）

カスタムポリシーを利用する場合、下記のStarterPackから3つのカスタムポリシーをコピーします。

• TrustFrameworkBase.xml
• TrustFrameworkLocalization.xml
• TrustFrameworkExtensions.xml

Github：https://github.com/Azure-Samples/active-directory-b2c-custom-policy-starterpack/tree/master/SocialAndLocalAccountsWithMfa

【補足】Facebookログインのコメントアウト

今回Facebookログインは利用しないため、上記サンプルポリシーのうちFacebook関連の箇所はコメントアウトしておきます。

1. TrustFrameworkBase.xml

   1. ClaimsProvider
      Domainがfacebook.comであるClaimsProviderをコメントアウトします。

      <!-- コメントアウト -->
      <!--
      <ClaimsProvider>
        <Domain>facebook.com</Domain>
        <DisplayName>Facebook</DisplayName>
        ...
      </ClaimsProvider>
      -->
      

   2. UserJourney
      Step1, 2のFacebookExchange参照している行をコメントアウトします。SignUpOrSignIn, ProfileEditのUserJourneyが該当します。

      <OrchestrationStep Order="1" Type="CombinedSignInAndSignUp" ContentDefinitionReferenceId="api.signuporsignin">
        <ClaimsProviderSelections>
          <!-- <ClaimsProviderSelection TargetClaimsExchangeId="FacebookExchange" /> --> <!-- コメントアウト -->
          <ClaimsProviderSelection ValidationClaimsExchangeId="LocalAccountSigninEmailExchange" />
        </ClaimsProviderSelections>
        ...
      </OrchestrationStep>
      
      <OrchestrationStep Order="2" Type="ClaimsExchange">
        ...
        <ClaimsExchanges>
          <!-- <ClaimsExchange Id="FacebookExchange" TechnicalProfileReferenceId="Facebook-OAUTH" /> --> <!-- コメントアウト -->
          <ClaimsExchange Id="SignUpWithLogonEmailExchange" TechnicalProfileReferenceId="LocalAccountSignUpWithLogonEmail" />
        </ClaimsExchanges>
      </OrchestrationStep>
      

2. TrustFrameworkExtensions.xml

   1. ClaimsProvider
      DisplayNameがFacebookのClaimsProviderをコメントアウトします。

      <!-- コメントアウト -->
      <!--
      <ClaimsProvider>
        <DisplayName>Facebook</DisplayName>
        <TechnicalProfiles>
          <TechnicalProfile Id="Facebook-OAUTH">
            ...
          </TechnicalProfile>
        </TechnicalProfiles>
      </ClaimsProvider>
      -->
      

ユーザー名でのログイン

ログインの流れ

基本的な流れは下記の通り、メールアドレスのログインとほぼ同じです。

ユーザーフロー

1. B2C管理画面のIDプロバイダーの画面でローカルアカウント > Usernameをチェックし保存します。
   
2. 「サインアップとサインイン」のユーザーフローを追加します
   
3. IDプロバイターはローカルアカウントの「User ID signup」を選びます。
   

カスタムポリシー

Githubにユーザー名でログイン・ユーザー登録するカスタムポリシーのサンプルコードがありますので、そちらを利用します。
上述のカスタムポリシーに加え、下記のGithubのカスタムポリシーをコピーします。

Github：https://github.com/azure-ad-b2c/samples/tree/master/policies/username-signup-or-signin

補足として、上述のTrustFrameworkLocalization.xmlの以下の箇所をUsernameに変えておきます。
ログイン画面でユーザー名を入力するよう促す文言です。

<LocalizedResources Id="api.signuporsignin.en">
  <LocalizedStrings>
    <LocalizedString ElementType="ClaimType" ElementId="signInName" StringId="DisplayName">Username</LocalizedString>
    <LocalizedString ElementType="UxElement" StringId="local_intro_generic">Sign in with your Username</LocalizedString>
    ...
  </LocalizedStrings>
  ...
</LocalizedResources>

実行結果

1. ユーザーフローやカスタムポリシーを実行すると、メールアドレス同様にログイン画面が表示されます。
   

2. 「Sign up now」のリンクをクリックするとユーザー登録画面が表示されます。
   

※今回は省略しますが、上記サンプルポリシーの「PasswordReset.xml」を適用することでログイン画面の「パスワードを忘れた場合」も動作できます。

電話番号でのログイン

ログインの流れ

基本的な流れについては下記の通りです。ポイントは電話番号を入力後にSMSや電話の発信を行い電話番号を認証する箇所になります。

ユーザーフロー

1. B2C管理画面のIDプロバイダーの画面でローカルアカウント > Phoneをチェックし保存します。

   

2. 「サインアップとサインイン」のユーザーフローを追加します

   

3. IDプロバイターはローカルアカウントの「Phone signup」を選びます。

   

カスタムポリシー

Githubにユーザー名でログイン・ユーザー登録するカスタムポリシーのサンプルコードがありますので、そちらを利用します。
上述のカスタムポリシーに加え、下記のGithubのpolicy/phone-signup-signin.xmlのみコピーします。

Github：https://github.com/azure-ad-b2c/samples/tree/master/policies/signup-signin-with-phone-number

また、日本の電話番号を登録できるよう、policy/phone-signup-signin.xmlに記載されているnationalNumberの正規表現を^[0-9]{1,10}$から^[0-9]{1,11}$に変更します。

<ClaimType Id="nationalNumber">
  <DisplayName>Enter Phone Number</DisplayName>
  <DataType>string</DataType>
  <UserHelpText>Enter Phone Number</UserHelpText>
  <UserInputType>TextBox</UserInputType>
  <Restriction>
    <Pattern RegularExpression="^[0-9]{1,11}$" HelpText="" /> <!-- ここの正規表現を更新 -->
  </Restriction>
</ClaimType>

実行してみる

1. ユーザーフローやカスタムポリシーを実行すると、メールアドレス同様にログイン画面が表示されます。
   ※カスタムポリシーの場合デフォルトの国コードがSwedenになっているため、日本に切り替えます
   

2. ログインボタンを押下すると、このようにSMSまたは通話による確認画面が出てくるため、どちらかを選択し認証します。
   

3. 認証が成功すると、ログインが完了しトークンが取得できます。
   

制限事項

現状、メールアドレス/ユーザー名/電話番号でB2Cに登録したアカウントは、それぞれ別アカウント扱いとなります。
そのため、例えばTwitterのようにユーザー名とメールアドレスを統合させ同一アカウントとしてログインさせるといったことはできません。
電話番号に関しても同様で、MFAに使う電話番号と電話番号ログインに使う番号が同じであっても同一アカウントとして扱われません。

まとめ

今回はメールアドレスだけでなく、ユーザー名や電話番号でB2Cにログインする方法をそれぞれご紹介しました。
また、Azure AD B2CではTwitterやGoogleなどの外部IDプロバイダーとの連携もサポートされており、GoogleやFacebookなどのアカウントでもログインが可能です。
こちらの記事ではLINEアカウントでのログインを記載していますので、合わせてご覧ください。

• Azure AD B2CにLINEアカウントでログインする

関連記事

• AD B2C記事まとめ