コンテンツ定義

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

ユーザー インターフェイスをカスタマイズするには、カスタマイズされた HTML コンテンツを含む ContentDefinition 要素に URL を指定します。 セルフアサート技術プロファイルまたは OrchestrationStep では、そのコンテンツ定義識別子をポイントします。 コンテンツ定義には、読み込むローカライズされたリソースの一覧を指定する LocalizedResourcesReferences 要素を含むことができます。 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 セルフアサート技術プロファイルのメタデータには、次に設定されたコンテンツ定義識別子 ContentDefinitionReferenceId が含まれています。api.localaccountsignup

<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 要素には、次の要素が含まれています。

ロード URI

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>

データUri

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

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

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

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

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

<!-- 
<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 と 最新のページ バージョンを示しています。

<!-- 
<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 要素には、次の属性が含まれています。

メタデータ キー

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

ローカライズされたリソース参照

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

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

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

<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 を使用して独自のコンテンツ定義を作成できます。

次のステップ

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

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