ContentDefinitions

مقالة
01/11/2024

ملاحظة

في Azure Active Directory B2C، تم تصميم النُهج المخصصة بشكل أساسي لمعالجة السيناريوهات المعقدة. بالنسبة إلى معظم السيناريوهات، نوصي باستخدام تدفقات المستخدم المضمنة. إذا لم تقم بذلك، تعرف على حزمة بادئ النهج المخصصة في البدء باستخدام النهج المخصصة في Active Directory B2C.

من الممكن تخصيص الشكل والمظهر من أيملف تعريف تقني المؤكد ذاتيًا. يقوم Microsoft Azure Active Directory B2C (Azure AD B2C) بتشغيل التعليمات البرمجية في مستعرض العميل الخاص بك ويستخدم أسلوب حديث يسمى مشاركة الموارد عبر الأصل (CORS).

لتخصيص واجهة المستخدم، يمكنك تحديد URL فيالعنصر ContentDefinitionمع محتوى HTML المخصص. في ملف التعريف التقني المؤكد ذاتيًا أوOrchestrationStep، تشير إلى محتوى تعريف المحتوى ذلك. قد يحتوي تعريف المحتوىالعنصر LocalizedResourcesReferencesالتي تحدد قائمة بالموارد المحلية للتحميل. يدمج Microsoft Azure AD B2C عناصر واجهة المستخدم مع محتوى HTML الذي تم تحميله من عنوان URL الخاص بك وبعد ذلك يعرض الصفحة للمستخدم.

يحتوي عنصرContentDefinitionsعلى URLs لقوالب HTML5 التي يمكن استخدامها في الرحلة. يستخدم URI صفحة HTML5 لخطوة واجهة المستخدم المحددة. على سبيل المثال، تسجيل الدخول أو التسجيل أو إعادة تعيين كلمة المرور أو صفحات الأخطاء. يمكن تعديل الشكل والمظهر من خلال تجاوز LoadUri لملف HTML5. يمكنك إنشاء تعريفات محتوى جديدة بحسب احتياجاتك. قد يحتوي هذا العنصر على مرجع موارد محلية لمعرف التعريب المحدد في عنصرالتعريب.

يوضح المثال التالي وسيلة تحديد هوية معرف المحتوى وتعريف الموارد المحلية:

<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على السمة التالية:

السمة	مطلوب	الوصف
المعرّف	نعم	وسيلة لتحديد هوية معرف المحتوى. القيمة هي واحدة محددة في المقطعوسيلة تحديد هوية المحتوى اللاحق في هذه الصفحة.

يحتوي عنصرContentDefinitionعلى السمة الآتية:

العنصر	الأحداث	الوصف
LoadUri	1:1	السلسلة التي تحتوي على عنوان URL لصفحة HTML5 لتعريف المحتوى.
RecoveryUri	1:1	السلسلة التي تحتوي على عنوان URL لصفحة HTML لعرض الخطأ المتعلق بتعريف المحتوى. لا يتم استخدامها حاليًا، يجب على القيمة أن تكون`~/common/default_page_error.html`.
DataUri	1:1	السلسلة المحتوية على عنوان URL النسبي لملف HTML الذي يوفر تجربة المستخدم لاستدعاء الخطوة.
بيانات التعريف	0:1	مجموعة من ثنائي المفاتيح/ القيم المحتوية على بيانات التعريف المستخدمة من قِبل تعريف المحتوى.
LocalizedResourcesReferences	0:1	مجموعة من مراجع الموارد المحلية. قم باستخدام هذا العنصر لتخصيص ترجمة واجهة المستخدم وسمة المطالبات.

LoadUri

يُستخدم عنصرLoadUriلتحديد عنوان URL لصفحة HTML5 لتعريف المحتوى. تأتيحزم بداية النهج المخصصة لـ Microsoft Azure AD B2C مع تعريفات المحتوى الذي يستخدم صفحات HTML Microsoft Azure AD B2C. يبدأLoadUriمع~، والذي يمثل مسارًا نسبيًا لمستأجر Microsoft 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لتحديد مُعرّف الصفحة. يستخدم Microsoft Azure AD B2C معرف الصفحة لتحميل وبدء تشغيل عناصر واجهة المستخدم و JavaScript من جانب العميل. تنسيق القيمة هوurn:com:microsoft:aad:b2c:elements:page-name:version. يقوم الجدول التالي بقوائم معرفات الصفحة التي يمكنك استخدامها.

معرف مستخدم الصفحة	الوصف
`globalexception`	عرض صفحة الخطأ عندما تواجه استثناء أو خطأ.
`providerselection`, `idpselection`	قوائم موفري مزامنة الهوية الذين يمكن للمستخدمين الاختيار من بينهم أثناء عملية تسجيل الدخول.
`unifiedssp`	عرض نموذج لتسجيل الدخول باستخدام حساب محلي مستند إلى عنوان بريد إلكتروني أو اسم مستخدم. توفر هذه القيمة أيضًا «احتفظ بمهمة تسجيل الدخول» و«هل نسيت كلمة المرور الخاصة بك؟»
`unifiedssd`	عرض نموذج لتسجيل الدخول باستخدام حساب محلي مستند إلى عنوان بريد إلكتروني أو اسم المستخدم. معرف الصفحة هذا تم إهماله. استخدم`unifiedssp`معرف مستخدم الصفحة بدلًا من ذلك.
`multifactor`	التحقق من أرقام الهواتف من خلال استخدام رسالة نصية أو الصوت أثناء التسجيل أو تسجيل الدخول.
`selfasserted`	عرض نموذج لجمع البيانات من المستخدم. على سبيل المثال، تمكين المستخدمين لإنشاء أو تحديث ملف التعريف الخاص بهم.

حدد تخطيط الصفحة

يمكنك تمكينالتعليمات البرمجية من جانب العميل JavaScriptمن خلال إدراجcontractبينelementsونوع الصفحة. على سبيل المثال، ⁧urn:com:microsoft:aad:b2c:elements:contract:page-name:version⁩.

يحدد جزءالإصدارمنDataUriحزمة المحتوى الذي يحتوي على HTML وCSS وJavaScript لعناصر واجهة المستخدم في النهج. إذا كنت تنوي تمكين التعليمات البرمجية من جانب العميل JavaScript، يجب أن تكون العناصر التي تستند إليها JavaScript غير قابلة للتغيير. إذا لم تكن هذه التغييرات غير قابلة للتغيير، فقد تتسبب أي تغييرات في حدوث سلوك غير متوقع على صفحات المستخدم الخاص بك. لمنع هذه المشكلات، قم بفرض استخدام تخطيط الصفحة وتحديد إصدار تخطيط الصفحة. يضمن القيام بذلك أن جميع تعريفات المحتوى التي أسست عليها JavaScript غير قابلة للتغيير. حتى إذا كنت لا تنوي تمكين JavaScript، فلا تزال بحاجة إلى تحديد إصدار تخطيط الصفحة للصفحات الخاصة بك.

يوضح المثال التاليDataUriلـ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	القيمة الجديدة لـ 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> -->

بيانات التعريف

يحتوي عنصربيانات التعريفعلى العناصر التالي:

العنصر	الأحداث	الوصف
Item	0:n	بيانات التعريف المتعلقة بتعريف المحتوى.

يحتوي العنصرعنصرعنصر منبيانات التعريفعلى السمات التالية:

السمة	مطلوب	الوصف
المفتاح	نعم	بيانات التعريف الرئيسية.

بيانات التعريف الرئيسية

يدعم تعريف المتعلق بالمحتوى عناصر بيانات التعريف التالية:

المفتاح	مطلوب	الوصف
DisplayName	لا	السلسلة التي تحتوي على اسم تعريف المحتوى.

LocalizedResourcesReferences

يتضمن عنصرLocalizedResourcesReferences السمات التالية:

العنصر	الأحداث	الوصف
LocalizedResourcesReference	1:n	قائمة بمراجع الموارد المحلية لتعريف المحتوى.

يتضمن عنصرLocalizedResourcesReference السمات التالية:

السمة	مطلوب	الوصف
اللغة	نعم	السلسلة التي تحتوي على لغة معتمدة للنهج لكل 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>

لمعرفة كيفية إضافة دعم الترجمة إلى تعريفات المحتوى، انظرترجمة.

المعرفات المتعلقة بتعريف المحتوى

تُحدد سمة معرف العنصرContentDefinitionنوع الصفحة المتعلقة بتعريف المحتوى. يحدد العنصر السياق الذي سيتم تطبيقه بواسطة قالب HTML5 / CSS المخصص. يصف الجدول التالي مجموعة هويات تعريف المحتوى التي تم التعرف عليها من قِبل Identity Experience Framework وأنواع الصفحات التي تتعلق بها. يمكنك إنشاء معرفات المحتوى الخاصة بك باستخدام هوية عشوائي.

المعرف	القالب الافتراضي	الوصف
api.error	exception.cshtml	صفحة خطأ- تُعرض صفحة خطأ عند مواجهة استثناء أو خطأ.
api.idpselections	idpSelector.cshtml	صفحة تحديد موفر الهوية- قوائم موفري الهوية الذين يمكن للمستخدمين الاختيار من بينهم أثناء تسجيل الدخول. عادةً ما تكون الخيارات هي موفرو هوية المؤسسة أو موفرو الهوية الاجتماعية مثل Facebook وGoogle+ أو الحسابات المحلية.
api.idpselections.signup	idpSelector.cshtml	تحديد موفر الهوية للتسجيل- فوائم موفري الهوية الذين يمكن للمستخدمين الاختيار من بينهم أثناء التسجيل. عادةً ما تكون الخيارات هي موفرو هوية المؤسسة أو موفرو الهوية الاجتماعية مثل 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	صفحة الاشتراك في الحساب الاجتماعي- تعرض النموذج الذي يجب على المستخدمين إكماله عند التسجيل باستخدام حساب موجود من موفر الهوية الاجتماعية. تشبه هذه الصفحة صفحة التسجيل في حساب التواصل الاجتماعي السابقة، باستثناء حقول إدخال كلمة المرور.
api.selfasserted.profileupdate	updateprofile.cshtml	صفحة تحديث ملف التعريف - تعرض النموذج الذي يمكن للمستخدمين الوصول إليه لتحديث ملف التعريف الخاص بهم. تشبه هذه الصفحة صفحة الاشتراك في الحساب الاجتماعي، باستثناء حقول إدخال كلمة المرور.
api.signuporsignin	unified.cshtml	صفحة التسجيل أو تسجيل الدخول الموحدة- تُعالج عملية تسجيل وتسجيل الدخول للمستخدم. يمكن للمستخدمين استخدام موفري هوية المؤسسة أو موفري الهوية الاجتماعية مثل Facebook أو Google+ أو الحسابات المحلية.

الخطوات التالية

للحصول على مثال لتخصيص واجهة المستخدم باستخدام تعريفات المحتوى، انظر:

تخصيص واجهة المستخدم للتطبيق باستخدام نهج مخصص

مشاركة عبر