ContentDefinitions

[アーティクル]
01/11/2024

注意

Azure Active Directory B2C で、カスタムポリシーは、主に、複雑なシナリオに取り組む用途向けに設計されています。ほとんどのシナリオで、組み込みユーザーフローを使用することをお勧めします。まだ行っていない場合は、Active Directory B2C でのカスタムポリシーの概要に関する記事で、カスタムポリシースターターパックの詳細を確認してください。

セルフアサート技術プロファイルの外観をカスタマイズすることができます。 Azure Active Directory B2C (Azure AD B2C) は、ユーザーのブラウザーでコードを実行し、クロスオリジンリソース共有 (CORS) と呼ばれる最新の手法を使用します。

ユーザーインターフェイスをカスタマイズするには、ContentDefinition 要素でカスタマイズされた HTMLコンテンツを含む URL を指定します。セルフアサート技術プロファイルまたは OrchestrationStep で、そのコンテンツ定義識別子をポイントします。コンテンツ定義には、ロードするローカライズされたリソースの一覧を指定する、LocalizedResourcesReference 要素を含めることができます。 Azure AD B2C により、ユーザーインターフェイス要素が URL から読み込まれた HTML コンテンツとマージされ、ユーザーにページが表示されます。

ContentDefinitions 要素には、ユーザー体験で使用できる HTML5 テンプレートへの URL が含まれています。 HTML5 ページの URI は、指定されたユーザーインターフェイスステップで使用されます。たとえば、サインインまたはサインアップ、パスワードリセット、またはエラーページなどです。 HTML5 ファイルの LoadUri をオーバーライドすることで、外観を変更できます。必要に応じて新しいコンテンツ定義を作成できます。この要素には、Localization 要素で指定されたローカライズ識別子への、ローカライズされたリソース参照を含めることができます。

次の例は、コンテンツ定義識別子とローカライズされたリソースの定義を示しています。

<ContentDefinition Id="api.localaccountsignup">
  <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
  <DataUri>urn:com:microsoft:aad:b2c:elements:selfasserted:1.1.0</DataUri>
  <Metadata>
    <Item Key="DisplayName">Local account sign up page</Item>
  </Metadata>
  <LocalizedResourcesReferences MergeBehavior="Prepend">
    <LocalizedResourcesReference Language="en" LocalizedResourcesReferenceId="api.localaccountsignup.en" />
    <LocalizedResourcesReference Language="es" LocalizedResourcesReferenceId="api.localaccountsignup.es" />
    ...

LocalAccountSignUpWithLogonEmail セルフアサート技術プロファイルには、api.localaccountsignup に設定されたコンテンツ定義識別子 ContentDefinitionReferenceId が含まれています。

<TechnicalProfile Id="LocalAccountSignUpWithLogonEmail">
  <DisplayName>Email signup</DisplayName>
  <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.SelfAssertedAttributeProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
  <Metadata>
    <Item Key="ContentDefinitionReferenceId">api.localaccountsignup</Item>
    ...
  </Metadata>
  ...

ContentDefinition

ContentDefinition 要素には、次の属性が含まれています。

属性	必須	説明
Id	はい	コンテンツ定義の識別子。この値は、このページの後半のコンテンツ定義 ID セクションで指定される値です。

ContentDefinition 要素には、次の属性が含まれています。

要素	発生回数	説明
LoadUri	1:1	コンテンツ定義用の HTML5 ページの URL を含む文字列。
RecoveryUri	1:1	コンテンツ定義に関連するエラーを表示するための HTML ページの URL を含む文字列。現在使用されていません。値は `~/common/default_page_error.html` にする必要があります。
DataUri	1:1	ステップに対して呼び出すユーザーエクスペリエンスを提供する、HTML ファイルの相対 URL を含む文字列。
Metadata	0:1	コンテンツ定義によって利用されるメタデータを含む、キー/値ペアのコレクション。
LocalizedResourcesReferences	0:1	ローカライズされたリソース参照のコレクション。この要素を使用して、ユーザーインターフェイスと要求属性のローカライズをカスタマイズします。

LoadUri

LoadUri 要素は、コンテンツ定義の HTML5 ページの URL を指定するために使用されます。 Azure AD B2C カスタムポリシースターターパックには、Azure AD B2C HTML ページを使用するコンテンツ定義が付属しています。 LoadUriは、Azure AD B2C テナントへの相対パスである ~ で始まります。

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>~/tenant/templates/AzureBlue/unified.cshtml</LoadUri>
  ...
</ContentDefinition>

HTML テンプレートを使用してユーザーインターフェイスをカスタマイズできます。 HTML テンプレートを使用する場合は、絶対 URL を指定します。次の例は、HTML テンプレートを使用したコンテンツ定義を示しています。

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html</LoadUri>
  ...
</ContentDefinition>

DataUri

DataUri 要素は、ページ識別子を指定するために使用されます。 Azure AD B2C は、ページ識別子を使用して、UI 要素とクライアント側の JavaScript を読み込み開始します。この値のフォーマットは urn:com:microsoft:aad:b2c:elements:page-name:version です。次の表に、使用できるページ識別子の一覧を示します。

ページ識別子	説明
`globalexception`	例外またはエラーが発生したときにエラーページを表示します。
`providerselection`, `idpselection`	ユーザーがサインイン時に選択できる ID プロバイダーを一覧表示します。
`unifiedssp`	電子メールアドレスまたはユーザー名に基づいたローカルアカウントでサインインするためのフォームを表示します。またこの値は、"サインインしたままにする機能" および "パスワードを忘れた場合" のリンクも提供します。
`unifiedssd`	メールアドレスまたはユーザー名に基づいたローカルアカウントでサインインするためのフォームを表示します。このページ識別子は非推奨になっています。代わりに `unifiedssp` ページ識別子を使用してください。
`multifactor`	サインアップ中またはサインイン中にテキストまたは音声を使用して電話番号を確認します。
`selfasserted`	ユーザーからデータを収集するためのフォームを表示します。たとえば、ユーザーがプロファイルを作成または更新できるようにします。

ページレイアウトを選択する

JavaScript クライアント側コードを有効にするには、elements とページの種類の間に contract を挿入します。たとえば、「 urn:com:microsoft:aad:b2c:elements:contract:page-name:version 」のように入力します。

DataUri の version 部分には、ポリシーのユーザーインターフェイス要素に対する HTML、CSS、JavaScript を含むコンテンツのパッケージが指定されます。 JavaScript クライアント側コードを有効にする場合は、JavaScript の基になる要素を変更不可にする必要があります。変更不可になっていないと、何らかの変更によってユーザーフローのページで予期しない動作が発生する可能性があります。このような問題を防ぐために、ページレイアウトの使用を強制して、ページレイアウトのバージョンを指定します。これにより、JavaScript の基になるすべてのコンテンツ定義が変更不可になります。 JavaScript を有効にする予定がない場合でも、引き続きページに対してページレイアウトのバージョンを指定する必要があります。

次の例は、selfasserted バージョン 1.2.0 の DataUri を示しています。

<!-- 
<BuildingBlocks> 
  <ContentDefinitions>-->
    <ContentDefinition Id="api.localaccountpasswordreset">
      <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
      <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
      <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
      <Metadata>
        <Item Key="DisplayName">Local account change password page</Item>
      </Metadata>
    </ContentDefinition>
  <!-- 
  </ContentDefinitions> 
</BuildingBlocks> -->

ページレイアウトへの移行

古い DataUri 値 (ページコントラクトを使用しない) からページレイアウトバージョンに移行するには、contract という単語の後にページバージョンを追加します。次の表を使用して、古い Datauri 値からページレイアウトバージョンに移行します。

古い DataUri 値	新しい DataUri 値
`urn:com:microsoft:aad:b2c:elements:globalexception:1.0.0`	`urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.1`
`urn:com:microsoft:aad:b2c:elements:globalexception:1.1.0`	`urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.1`
`urn:com:microsoft:aad:b2c:elements:idpselection:1.0.0`	`urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.1`
`urn:com:microsoft:aad:b2c:elements:selfasserted:1.0.0`	`urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.7`
`urn:com:microsoft:aad:b2c:elements:selfasserted:1.1.0`	`urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.7`
`urn:com:microsoft:aad:b2c:elements:unifiedssd:1.0.0`	`urn:com:microsoft:aad:b2c:elements:contract:unifiedssd:1.2.1`
`urn:com:microsoft:aad:b2c:elements:unifiedssp:1.0.0`	`urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.5`
`urn:com:microsoft:aad:b2c:elements:unifiedssp:1.1.0`	`urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.5`
`urn:com:microsoft:aad:b2c:elements:multifactor:1.0.0`	`urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.5`
`urn:com:microsoft:aad:b2c:elements:multifactor:1.1.0`	`urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.5`

次の例では、コンテンツ定義識別子と、対応する DataUri および最新ページバージョンを示します。

<!-- 
<BuildingBlocks> -->
  <ContentDefinitions>
    <ContentDefinition Id="api.error">
      <DataUri>urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.1</DataUri>
    </ContentDefinition>
    <ContentDefinition Id="api.idpselections">
      <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.1</DataUri>
    </ContentDefinition>
    <ContentDefinition Id="api.idpselections.signup">
      <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.1</DataUri>
    </ContentDefinition>
    <ContentDefinition Id="api.signuporsignin">
      <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.7</DataUri>
    </ContentDefinition>
    <ContentDefinition Id="api.selfasserted">
      <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.14</DataUri>
    </ContentDefinition>
    <ContentDefinition Id="api.selfasserted.profileupdate">
      <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.14</DataUri>
    </ContentDefinition>
    <ContentDefinition Id="api.localaccountsignup">
      <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.14</DataUri>
    </ContentDefinition>
    <ContentDefinition Id="api.localaccountpasswordreset">
      <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.14</DataUri>
    </ContentDefinition>
    <ContentDefinition Id="api.phonefactor">
      <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
      <DataUri>urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.5</DataUri>
    </ContentDefinition>
  </ContentDefinitions>
<!-- 
</BuildingBlocks> -->

Metadata

Metadata 要素には、次の要素が含まれています。

要素	発生回数	説明
Item	0:n	コンテンツ定義に関連するメタデータ。

Metadata 要素の Item 要素には、次の属性が含まれています。

属性	必須	説明
Key	はい	メタデータキー。

メタデータキー

コンテンツ定義では、次のメタデータ項目がサポートされています。

Key	必須	説明
DisplayName	いいえ	コンテンツ定義の名前を表す文字列。

LocalizedResourcesReferences

LocalizedResourcesReferences 要素には、次の属性が含まれています。

要素	発生回数	説明
LocalizedResourcesReference	1:n	コンテンツ定義のローカライズされたリソース参照の一覧。

LocalizedResourcesReference 要素には、次の属性が含まれています。

属性	必須	説明
Language	はい	「RFC 5646 - 言語を識別するタグ」に従ってポリシーでサポートされている言語を含む文字列。
LocalizedResourcesReferenceId	はい	LocalizedResources 要素の識別子。

次の例は、英語、フランス語、およびスペイン語のローカライズへの参照を含む、サインアップまたはサインインのコンテンツ定義を示しています。

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>~/tenant/default/unified.cshtml</LoadUri>
  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
  <DataUri>urn:com:microsoft:aad:b2c:elements:unifiedssp:1.0.0</DataUri>
  <Metadata>
    <Item Key="DisplayName">Signin and Signup</Item>
  </Metadata>
  <LocalizedResourcesReferences MergeBehavior="Prepend">
    <LocalizedResourcesReference Language="en" LocalizedResourcesReferenceId="api.signuporsignin.en" />
    <LocalizedResourcesReference Language="fr" LocalizedResourcesReferenceId="api.signuporsignin.rf" />
    <LocalizedResourcesReference Language="es" LocalizedResourcesReferenceId="api.signuporsignin.es" />
</LocalizedResourcesReferences>
</ContentDefinition>

コンテンツ定義にローカライズサポートを追加する方法については、「ローカライズ」を参照してください。

コンテンツ定義 ID

ContentDefinition 要素の ID 属性は、コンテンツ定義に関連するページの種類を指定します。この要素は、カスタム HTML5/CSS テンプレートが適用されるコンテキストを定義します。次の表は、Identity Experience Framework によって認識される一連のコンテンツ定義 ID と、それらに関連するページの種類を示しています。任意の ID を使用して独自のコンテンツ定義を作成できます。

ID	既定のテンプレート	説明
api.error	exception.cshtml	エラーページ - 例外またはエラーが発生したときにエラーページを表示します。
api.idpselections	idpSelector.cshtml	ID プロバイダーの選択ページ - ユーザーがサインイン時に選択できる ID プロバイダーを一覧表示します。 ID プロバイダーは、通常、エンタープライズ ID プロバイダー、ソーシャル ID プロバイダー (Facebook や Google+ など)、ローカルアカウントのいずれかです。
api.idpselections.signup	idpSelector.cshtml	サインアップのための ID プロバイダーの選択 - ユーザーがサインアップ時に選択できる ID プロバイダーを一覧表示します。 ID プロバイダーは、通常、エンタープライズ ID プロバイダー、ソーシャル ID プロバイダー (Facebook や Google+ など)、ローカルアカウントのいずれかです。
api.localaccountpasswordreset	selfasserted.cshtml	パスワードを忘れた場合のページ - パスワードのリセットを開始するためにユーザーが入力する必要があるフォームを表示します。
api.localaccountsignin	selfasserted.cshtml	ローカルアカウントのサインインページ - 電子メールアドレスまたはユーザー名に基づいたローカルアカウントでサインインするためのフォームを表示します。このフォームには、テキスト入力ボックスとパスワード入力ボックスを含めることができます。
api.localaccountsignup	selfasserted.cshtml	ローカルアカウントのサインアップページ - 電子メールアドレスまたはユーザー名に基づいたローカルアカウントでサインアップするためのフォームを表示します。このフォームには、テキスト入力ボックス、パスワード入力ボックス、ラジオボタン、単一選択ドロップダウンボックス、複数選択チェックボックスなど、さまざまな入力コントロールを含めることができます。
api.phonefactor	multifactor-1.0.0.cshtml	多要素認証ページ - サインアップ中またはサインイン中にテキストまたは音声を使用して電話番号を確認します。
api.selfasserted	selfasserted.cshtml	ソーシャルアカウントのサインアップページ - ソーシャル ID プロバイダーの既存のアカウントを使用してサインアップするときに、ユーザーが入力する必要があるフォームを表示します。このページは、パスワード入力フィールドを除いて、上記のソーシャルアカウントのサインアップページに似ています。
api.selfasserted.profileupdate	updateprofile.cshtml	プロファイルの更新ページ - ユーザーがプロファイルを更新するためにアクセスできるフォームを表示します。このページは、パスワード入力フィールドを除いて、ソーシャルアカウントのサインアップページに似ています。
api.signuporsignin	unified.cshtml	統合されたサインアップページまたはサインインページ - ユーザーのサインアップおよびサインインプロセスを処理します。ユーザーは、エンタープライズ ID プロバイダー、ソーシャル ID プロバイダー (Facebook や Google+ など)、ローカルアカウントのいずれかを使用できます。

次のステップ

コンテンツ定義を使用してユーザーインターフェイスをカスタマイズする例については、次を参照してください。

カスタムポリシーを使用してアプリケーションのユーザーインターフェイスをカスタマイズする