次の方法で共有


ContentDefinitions

注意

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 」のように入力します。

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

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

<!-- 
<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+ など)、ローカル アカウントのいずれかを使用できます。

次のステップ

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

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