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

• ユーザーが サインアップしてアプリケーションにサインインできるように、ユーザー フローを作成します。
• Web アプリケーションを登録します。

• 「Active Directory B2C でのカスタム ポリシーの概要」の手順を完了してください。 このチュートリアルでは、Azure AD B2C テナント構成を使用するようにカスタム ポリシー ファイルを更新する方法について説明します。
• Web アプリケーションを登録します。

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

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. [ページ レイアウト] を選択します。

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

4. [ ユーザー属性] で [ 市区町村] を選択します。

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

5. OK を選択します。 省略可能: サインアップ ページでユーザー属性を並べ替えるには、[上/下へ移動] ボタンを使用します。

6. 保存 を選択します。

   

ローカライズされたコレクションを使用して値の一覧を指定する

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

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

LocalizedCollectionsは、NameとValueのペアの配列です。 アイテムの順序は、表示される順序です。

• 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. [ページ レベルのリソース ファイル] で、[ローカル アカウントのサインアップ ページ] を選択します。
6. フォルダー アイコンを選び、アップロードする JSON ファイルを選びます。 変更がユーザー フローに自動的に保存されます。

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

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

概要

サインアップまたはサインイン ユーザー体験を使用して、ユーザーから初期データを収集できます。 後でプロファイル編集ユーザー体験を使用して、さらに多くの要求を収集できます。 Azure AD B2C は、ユーザーから対話形式で直接情報を収集するたびに、 セルフアサート技術プロファイルを使用します。 このサンプルでは、次の操作を行います。

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

要求を定義する

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

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

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

1. BuildingBlocks 要素を検索します。 要素が存在しない場合は、追加します。
2. ClaimsSchema 要素を見つけます。 要素が存在しない場合は、追加します。
3. ClaimsSchema 要素に市区町村の要求を追加します。

<!-- 
<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 属性を含めます。 たとえば、 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 - プロファイル フローの編集。

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

<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>

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

<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 技術プロファイルです。
PersistedClaimsを使用してユーザー プロファイルにデータを書き込み、OutputClaimsを使用して、それぞれの Active Directory 技術プロファイル内のユーザー プロファイルからデータを読み取ります。

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

<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>

トークンに要求を含める

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

<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. サインアップまたはサインイン ページで、[ 今すぐサインアップ ] を選択してサインアップします。 市区町村名を含むユーザー情報の入力を完了し、[ 作成] を選択します。 返されたトークンの内容が表示されます。

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

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

次の例では、英語とスペイン語の都市の一覧を指定する方法を示します。 両方とも、要求Restrictionの コレクションに、英語とスペイン語の項目の一覧を設定します。 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>-->

次のステップ

• 詳しくは、IEF リファレンスの ClaimsSchema 要素をご覧ください。
• Azure AD B2C でカスタム属性を使用する方法について説明します。

次のステップ

• Azure Active Directory B2C でユーザー インターフェイスをカスタマイズします。
• Azure Active Directory B2C の HTML テンプレートを使用してユーザー インターフェイスをカスタマイズします。
• JavaScript を有効にします。