Azure Active Directory B2C でユーザー属性を追加してユーザー入力をカスタマイズする

開始する前に[ポリシーの種類の選択] セレクターを使用して、設定するポリシーの種類を選択します。 Azure Active Directory B2C には、ユーザーがアプリケーションを操作する方法を定義する 2 つの方法 (定義済みのユーザー フローを使用する、または完全に構成可能なカスタム ポリシーを使用する) があります。 この記事で必要な手順は、方法ごとに異なります。

この記事では、Azure Active Directory B2C (Azure AD B2C) でのサインアップ体験時に新しい属性を収集します。 ユーザーの city (市区町村) を取得し、それをドロップダウンとして構成し、それを指定することが必須かどうかを定義します。

重要

このサンプルでは、組み込みの要求の "city" を使用します。 代わりに、サポートされている Azure AD B2C 組み込み属性のいずれか、またはカスタム属性を選択することもできます。 カスタム属性を使用するには、カスタム属性を有効にします。 別の組み込みまたはカスタム属性を使用するには、選択した属性で "city" を置き換えます。たとえば、組み込み属性 jobTitle や、extension_loyaltyId のようなカスタム属性を使用できます。

前提条件

ユーザー属性をユーザー フローに追加する

  1. Azure portal にサインインします。
  2. 複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを選び、[ディレクトリとサブスクリプション] メニューからお使いの Azure AD B2C テナントに切り替えます。
  3. [Azure サービス] で、 [Azure AD B2C] を選択します。 または、検索ボックスを使用して検索し、 [Azure AD B2C] を選択します。
  4. Azure AD B2C テナントで、 [ユーザー フロー] を選択します。
  5. ポリシー ("B2C_1_SignupSignin" など) を選択して開きます。
  6. [ユーザー属性] を選択してから、ユーザー属性 ("City" など) を選択します。
  7. [保存] を選択します。

アプリに省略可能な要求を提供する

アプリケーション要求は、アプリケーションに返される値です。 ユーザー フローを更新して、目的の要求を含めます。

  1. ポリシー ("B2C_1_SignupSignin" など) を選択して開きます。
  2. [アプリケーション クレーム] を選択します。
  3. アプリケーションに返信する属性を選択します ("City" など)。
  4. [保存] を選択します。

ユーザー属性の入力の種類を構成する

  1. ポリシー ("B2C_1_SignupSignin" など) を選択して開きます。

  2. [Page layouts](ページ レイアウト) を選択します。

  3. [ローカル アカウント サインアップ ページ] を選択します。

  4. [ユーザー属性][City] を選択します。

    1. [省略可能] ドロップダウンで、 [なし] を選択します。
    2. [ユーザー入力 の種類] で、現在のユーザー入力の種類 (TextBoxなど) を選択して、[ユーザー入力の種類エディター] ウィンドウを 開きます。
    3. [ユーザー入力の種類] ドロップダウンで、 [DropdownSingleSelect] を選択します。
    4. [テキスト][値] に、属性の応答セットを表すテキストと値のペアを入力します。 テキストはフローの Web インターフェイスに表示され、は、選択されたテキストのAzure AD B2C に格納されます。 省略可能: ドロップダウン 項目の順序を変更するには、[上へ移動]/[下へ移動] ボタンを使用します。
  5. [OK] を選択します。 省略可能: [上へ移動] または [下へ移動] ボタンを使用して、サインアップ ページのユーザー属性の順序を調整します。

  6. [保存] を選択します。

    Web page call green API.

ローカライズされたコレクションを使って値の一覧を提供する

city 属性の値のセットの一覧を指定するには、次のようにします。

  1. ユーザー フローで言語のカスタマイズを有効にする
  2. ポリシー ("B2C_1_SignupSignin" など) を選択して開きます。
  3. ユーザー フローの [言語] ページで、カスタマイズする言語を選択します。
  4. [Page-level-resources files](ページ レベル リソース ファイル) で、 [ローカル アカウントのサインアップ ページ] を選択します。
  5. [既定値のダウンロード] (この言語を前に編集した場合は [オーバーライドのダウンロード] ) を選びます。
  6. LocalizedCollections 属性を作成します。

LocalizedCollections は、NameValue のペアの配列です。 項目の順序は、表示される順序になります。

  • ElementId は、この LocalizedCollections 属性が応答になるユーザー属性です。
  • Name は、ユーザーに表示される値です。
  • Value は、このオプションが選択された場合に要求で返される値です。
{
  "LocalizedStrings": [...],
  "LocalizedCollections": [
    {
      "ElementType": "ClaimType",
      "ElementId": "city",
      "TargetCollection": "Restriction",
      "Override": true,
      "Items": [
        {
          "Name": "Berlin",
          "Value": "Berlin"
        },
        {
          "Name": "London",
          "Value": "London"
        },
        {
          "Name": "Seattle",
          "Value": "Seattle"
        }
      ]
    }
  ]
}

変更のアップロード

  1. JSON ファイルの変更が完了したら、B2C テナントに戻ります。
  2. [ユーザー フロー] を選択し、ポリシー ("B2C_1_SignupSignin" など) を選択して開きます。
  3. [言語] を選択します。
  4. 翻訳する言語を選びます。
  5. [Page-level-resources files](ページ レベル リソース ファイル) で、 [ローカル アカウントのサインアップ ページ] を選択します。
  6. フォルダー アイコンを選び、アップロードする JSON ファイルを選びます。 変更がユーザー フローに自動的に保存されます。

ユーザー フローをテストする

  1. ポリシー ("B2C_1_SignupSignin" など) を選択して開きます。
  2. ポリシーをテストするには、 [ユーザー フローを実行します] を選択します。
  3. [アプリケーション] には、以前に登録した testapp1 という名前の Web アプリケーションを選択します。 [応答 URL]https://jwt.ms と表示されます。
  4. [ユーザー フローを実行します] をクリックします

概要

ユーザーからの初期データは、サインアップまたはサインインのユーザー体験を使用して収集できます。 追加の要求は、後でプロファイル編集のユーザー体験を使用して収集できます。 Azure AD B2C は、対話形式でユーザーから直接情報を収集するときはいつでも、セルフアサート技術プロファイルを使用します。 このサンプルでは、以下を実行します。

  1. "city" 要求を定義します。
  2. ユーザーに city を尋ねます。
  3. Azure AD B2C ディレクトリのユーザー プロファイルに city を保持します。
  4. サインインのたびに、Azure AD B2C ディレクトリから city 要求を読み取ります。
  5. サインインまたはサインアップ後に、証明書利用者アプリケーションに city を返します。

要求を定義する

要求は、Azure AD B2C ポリシーの実行中に、データの一時的なストレージを提供します。 要求スキーマは、要求を宣言する場所です。 要求の定義には次の要素が使用されます。

  • DisplayName - ユーザーに表示される "ラベル" を定義する文字列です。
  • DataType - 要求の種類です。
  • UserHelpText - 必要なものをユーザーが理解するために役立ちます。
  • UserInputType - テキスト ボックス、ラジオ選択、ドロップダウン リスト、または複数選択などの入力コントロールの種類。

お使いのポリシーの拡張ファイルを開きます。 たとえば、「 SocialAndLocalAccounts/TrustFrameworkExtensions.xml 」のように入力します。

  1. BuildingBlocks 要素を検索します。 要素が存在しない場合は追加します。
  2. ClaimsSchema 要素を見つけます。 要素が存在しない場合は追加します。
  3. ClaimsSchema 要素に city 要求を追加します。
<!-- 
<BuildingBlocks>
  <ClaimsSchema> -->
    <ClaimType Id="city">
      <DisplayName>City where you work</DisplayName>
      <DataType>string</DataType>
      <UserInputType>DropdownSingleSelect</UserInputType>
      <Restriction>
        <Enumeration Text="Berlin" Value="berlin" />
        <Enumeration Text="London" Value="london" />
        <Enumeration Text="Seattle" Value="seattle" />
      </Restriction>
    </ClaimType>
  <!-- 
  </ClaimsSchema>
</BuildingBlocks>-->

Enumeration 要素に SelectByDefault 属性を含めて、ページが初めて読み込まれるときに既定で選択されるようにします。 たとえば、London 項目を事前選択するには、Enumeration 要素を次の例のように変更します。

<Restriction>
  <Enumeration Text="Berlin" Value="berlin" />
  <Enumeration Text="London" Value="london" SelectByDefault="true" />
  <Enumeration Text="Seattle" Value="seattle" />
</Restriction>

ユーザー インターフェイスに要求を追加する

次の技術プロファイルは、ユーザーが入力を提供すると予期されているときに呼び出される、セルフアサートです。

  • LocalAccountSignUpWithLogonEmail - ローカル アカウントのサインアップ フロー。
  • SelfAsserted-Social - フェデレーション アカウントの初回ユーザー サインイン。
  • SelfAsserted-ProfileUpdate - プロファイルの編集フロー。

サインアップ時に city 要求を収集するには、それを出力要求として LocalAccountSignUpWithLogonEmail 技術プロファイルに追加する必要があります。 拡張ファイル内のこの技術プロファイルをオーバーライドします。 要求が画面に表示される順序を制御するには、出力要求の一覧全体を指定します。 ClaimsProviders 要素を見つけます。 新しい ClaimsProvider を次のように追加します。

<ClaimsProvider>
  <DisplayName>Local Account</DisplayName>
  <TechnicalProfiles>
    <!--Local account sign-up page-->
    <TechnicalProfile Id="LocalAccountSignUpWithLogonEmail">
      <OutputClaims>
       <OutputClaim ClaimTypeReferenceId="email" PartnerClaimType="Verified.Email" Required="true" />
       <OutputClaim ClaimTypeReferenceId="newPassword" Required="true" />
       <OutputClaim ClaimTypeReferenceId="reenterPassword" Required="true" />
       <OutputClaim ClaimTypeReferenceId="displayName" />
       <OutputClaim ClaimTypeReferenceId="givenName" />
       <OutputClaim ClaimTypeReferenceId="surName" />
       <OutputClaim ClaimTypeReferenceId="city"/>
     </OutputClaims>
   </TechnicalProfile>
  </TechnicalProfiles>
</ClaimsProvider>

フェデレーション アカウントを使用して初めてサインインした後に city 要求を収集するには、それを出力要求として SelfAsserted-Social 技術プロファイルに追加する必要があります。 ローカルとフェデレーション アカウントのユーザーが後でプロファイル データを編集できるようにするには、SelfAsserted-ProfileUpdate 技術プロファイルに入力/出力要求を追加します。 拡張ファイル内のこれらの技術プロファイルをオーバーライドします。 要求が画面に表示される順序を制御するには、出力要求の一覧全体を指定します。 ClaimsProviders 要素を見つけます。 新しい ClaimsProvider を次のように追加します。

<ClaimsProvider>
  <DisplayName>Self Asserted</DisplayName>
  <TechnicalProfiles>
    <!--Federated account first-time sign-in page-->
    <TechnicalProfile Id="SelfAsserted-Social">
      <InputClaims>
        <InputClaim ClaimTypeReferenceId="city" />
      </InputClaims>
      <OutputClaims>
        <OutputClaim ClaimTypeReferenceId="displayName"/>
        <OutputClaim ClaimTypeReferenceId="givenName"/>
        <OutputClaim ClaimTypeReferenceId="surname"/>
        <OutputClaim ClaimTypeReferenceId="city"/>
      </OutputClaims>
    </TechnicalProfile>
    <!--Edit profile page-->
    <TechnicalProfile Id="SelfAsserted-ProfileUpdate">
      <InputClaims>
        <InputClaim ClaimTypeReferenceId="city" />
      </InputClaims>
      <OutputClaims>
        <OutputClaim ClaimTypeReferenceId="displayName"/>
        <OutputClaim ClaimTypeReferenceId="givenName" />
        <OutputClaim ClaimTypeReferenceId="surname" />
        <OutputClaim ClaimTypeReferenceId="city"/>
      </OutputClaims>
    </TechnicalProfile>
  </TechnicalProfiles>
</ClaimsProvider>

要求の読み取りと書き込み

次の技術プロファイルは、Microsoft Entra ID へのデータの読み取りと書き込みを行う Active Directory 技術プロファイルです。
該当する Active Directory 技術プロファイル内のユーザー プロファイルにデータを書き込むには PersistedClaims を使用し、ユーザー プロファイルからデータを読み取るには OutputClaims を使用します。

拡張ファイル内のこれらの技術プロファイルをオーバーライドします。 ClaimsProviders 要素を見つけます。 新しい ClaimsProvider を次のように追加します。

<ClaimsProvider>
  <DisplayName>Azure Active Directory</DisplayName>
  <TechnicalProfiles>
    <!-- Write data during a local account sign-up flow. -->
    <TechnicalProfile Id="AAD-UserWriteUsingLogonEmail">
      <PersistedClaims>
        <PersistedClaim ClaimTypeReferenceId="city"/>
      </PersistedClaims>
    </TechnicalProfile>
    <!-- Write data during a federated account first-time sign-in flow. -->
    <TechnicalProfile Id="AAD-UserWriteUsingAlternativeSecurityId">
      <PersistedClaims>
        <PersistedClaim ClaimTypeReferenceId="city"/>
      </PersistedClaims>
    </TechnicalProfile>
    <!-- Write data during edit profile flow. -->
    <TechnicalProfile Id="AAD-UserWriteProfileUsingObjectId">
      <PersistedClaims>
        <PersistedClaim ClaimTypeReferenceId="city"/>
      </PersistedClaims>
    </TechnicalProfile>
    <!-- Read data after user resets the password. -->
    <TechnicalProfile Id="AAD-UserReadUsingEmailAddress">
      <OutputClaims>  
        <OutputClaim ClaimTypeReferenceId="city" />
      </OutputClaims>
    </TechnicalProfile>
    <!-- Read data after user authenticates with a local account. -->
    <TechnicalProfile Id="AAD-UserReadUsingObjectId">
      <OutputClaims>  
        <OutputClaim ClaimTypeReferenceId="city" />
      </OutputClaims>
    </TechnicalProfile>
    <!-- Read data after user authenticates with a federated account. -->
    <TechnicalProfile Id="AAD-UserReadUsingAlternativeSecurityId">
      <OutputClaims>  
        <OutputClaim ClaimTypeReferenceId="city" />
      </OutputClaims>
    </TechnicalProfile>
  </TechnicalProfiles>
</ClaimsProvider>

トークンに要求を含める

city 要求を証明書利用者アプリケーションに返すには、出力要求を SocialAndLocalAccounts/SignUpOrSignIn.xml ファイルに追加します。 ユーザー体験が成功した後、出力要求がトークンに追加され、アプリケーションに送信されます。 証明書利用者セクション内の技術プロファイル要素を変更して、city を出力要求として追加します。

<RelyingParty>
  <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
  <TechnicalProfile Id="PolicyProfile">
    <DisplayName>PolicyProfile</DisplayName>
    <Protocol Name="OpenIdConnect" />
    <OutputClaims>
      <OutputClaim ClaimTypeReferenceId="displayName" />
      <OutputClaim ClaimTypeReferenceId="givenName" />
      <OutputClaim ClaimTypeReferenceId="surname" />
      <OutputClaim ClaimTypeReferenceId="email" />
      <OutputClaim ClaimTypeReferenceId="objectId" PartnerClaimType="sub"/>
      <OutputClaim ClaimTypeReferenceId="identityProvider" />
      <OutputClaim ClaimTypeReferenceId="tenantId" AlwaysUseDefaultValue="true" DefaultValue="{Policy:TenantObjectId}" />
      <OutputClaim ClaimTypeReferenceId="city" DefaultValue="" />
    </OutputClaims>
    <SubjectNamingInfo ClaimType="sub" />
  </TechnicalProfile>
</RelyingParty>

更新されたカスタム ポリシーをアップロードしてテストする

  1. 複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを選び、[ディレクトリとサブスクリプション] メニューからお使いの Azure AD B2C テナントに切り替えます。
  2. Azure AD B2C を検索して選択します。
  3. [ポリシー][Identity Experience Framework] を選択します。
  4. [カスタム ポリシーのアップロード] を選択します。
  5. 以前に変更したポリシー ファイルをアップロードします。

カスタム ポリシーをテストする

  1. 証明書利用者ポリシー (B2C_1A_signup_signin など) を選択します。
  2. [アプリケーション] には、前に登録した Web アプリケーションを選択します。 [応答 URL]https://jwt.ms と表示されます。
  3. [今すぐ実行] ボタンを選択します。
  4. サインアップまたはサインイン ページで、 [今すぐサインアップ] を選択してサインアップします。 市区町村名を含むユーザー情報の入力を完了し、 [作成] をクリックします。 返されたトークンの内容が表示されます。

サインアップ画面は次のスクリーンショットのようになります。

Screenshot of modified sign-up option

アプリケーションに返送されるトークンには、city 要求が含まれています。

{
  "typ": "JWT",
  "alg": "RS256",
  "kid": "X5eXk4xyojNFum1kl2Ytv8dlNP4-c57dO6QGTVBwaNk"
}.{
  "exp": 1583500140,
  "nbf": 1583496540,
  "ver": "1.0",
  "iss": "https://contoso.b2clogin.com/f06c2fe8-709f-4030-85dc-38a4bfd9e82d/v2.0/",
  "aud": "e1d2612f-c2bc-4599-8e7b-d874eaca1ee1",
  "acr": "b2c_1a_signup_signin",
  "nonce": "defaultNonce",
  "iat": 1583496540,
  "auth_time": 1583496540,
  "name": "Emily Smith",
  "email": "joe@outlook.com",
  "given_name": "Emily",
  "family_name": "Smith",
  "city": "Berlin"
  ...
}

[オプション] UI をローカライズする

Azure AD B2C を使用すると、ポリシーをさまざまな言語に対応させることができます。 詳細については、言語エクスペリエンスのカスタマイズに関するページを参照してください。 サインアップ ページをローカライズするには、サポートされている言語の一覧を設定し、言語固有のラベルを指定します。

注意

LocalizedCollection と言語固有のラベルを使用する場合は、要求の定義から Restriction コレクションを削除できます。

次の例は、英語とスペイン語の市区町村の一覧を指定する方法を示しています。 両方とも、要求 cityRestriction コレクションに英語とスペイン語の項目の一覧を設定します。 SelectByDefault は、ページが初めて読み込まれるときに、項目が既定で選択されるようにします。

<!-- 
<BuildingBlocks>-->
  <Localization Enabled="true">
    <SupportedLanguages DefaultLanguage="en" MergeBehavior="Append">
      <SupportedLanguage>en</SupportedLanguage>
      <SupportedLanguage>es</SupportedLanguage>
    </SupportedLanguages>
    <LocalizedResources Id="api.localaccountsignup.en">
      <LocalizedCollections>
        <LocalizedCollection ElementType="ClaimType" ElementId="city" TargetCollection="Restriction">
          <Item Text="Berlin" Value="Berlin"></Item>
          <Item Text="London" Value="London" SelectByDefault="true"></Item>
          <Item Text="Seattle" Value="Seattle"></Item>
        </LocalizedCollection>
      </LocalizedCollections>
    </LocalizedResources>
    <LocalizedResources Id="api.localaccountsignup.es">
      <LocalizedCollections>
        <LocalizedCollection ElementType="ClaimType" ElementId="city" TargetCollection="Restriction">
          <Item Text="Berlina" Value="Berlin"></Item>
          <Item Text="Londres" Value="London" SelectByDefault="true"></Item>
          <Item Text="Seattle" Value="Seattle"></Item>
        </LocalizedCollection>
      </LocalizedCollections>
    </LocalizedResources>
  </Localization>
<!-- 
</BuildingBlocks>-->

ローカライズ要素を追加した後、ローカライズを使用してコンテンツ定義を編集します。 次の例では、英語 (en) とスペイン語 (es) のカスタム ローカライズ リソースが、サインアップ ページに追加されています。

<!-- 
<BuildingBlocks>
  <ContentDefinitions> -->
   <ContentDefinition Id="api.localaccountsignup">
    <LocalizedResourcesReferences MergeBehavior="Prepend">
        <LocalizedResourcesReference Language="en" LocalizedResourcesReferenceId="api.localaccountsignup.en" />
        <LocalizedResourcesReference Language="es" LocalizedResourcesReferenceId="api.localaccountsignup.es" />
    </LocalizedResourcesReferences>
   </ContentDefinition>
  <!-- 
  </ContentDefinitions>
</BuildingBlocks>-->

次のステップ