تخصيص واجهة المستخدم في Azure Active Directory B2C

هام

اعتبارا من 1 مايو 2025، لن يكون Azure AD B2C متوفرا للشراء للعملاء الجدد. تعرف على المزيد في الأسئلة المتداولة.

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

تساعد العلامة التجارية وتخصيص واجهة المستخدم التي يعرضها Azure Active Directory B2C (Azure AD B2C) لعملائك على توفير تجربة مستخدم سلسة في تطبيقك. تتضمن هذه التجارب التسجيل وتسجيل الدخول وتحرير ملف التعريف وإعادة تعيين كلمة المرور. في هذه المقالة، يمكنك تخصيص صفحات Azure AD B2C باستخدام قالب الصفحة والعلامة التجارية للشركة.

بقشيش

لتخصيص جوانب أخرى من صفحات تدفق المستخدم بخلاف قالب الصفحة أو شعار الشعار أو صورة الخلفية أو لون الخلفية، تعرف على كيفية تخصيص واجهة المستخدم باستخدام قالب HTML.

المتطلبات الأساسية

نظرة عامة

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

إشعار

تتضمن المستعرضات المدعومة للقالب الكلاسيكي الإصدارات الحالية والسابقة من Internet Explorer وMicrosoft Edge وGoogle Chrome وMozilla Firefox وSafari. قد يكون لقوالب Ocean Blue و Slate Gray دعم محدود مع إصدارات المتصفح القديمة ، مثل Internet Explorer 11 و 10 ؛ نوصي باختبار التطبيق الخاص بك باستخدام المتصفحات التي تنوي دعمها.

أزرق المحيط

مثال على قالب Ocean Blue الذي تم عرضه في صفحة التسجيل وتسجيل الدخول:

لقطة شاشة لقالب Ocean Blue

لائحة رمادي

مثال على قالب Slate Gray المعروض في صفحة تسجيل الدخول إلى التسجيل:

لقطة شاشة قالب Slate Gray

كلاسيكي

مثال على القالب الكلاسيكي المعروض في صفحة تسجيل الدخول بالتسجيل:

لقطة شاشة للقالب الكلاسيكي

العلامة التجارية للشركة

يمكنك تخصيص صفحات Azure AD B2C بشعار شعار وصورة خلفية ولون خلفية باستخدام العلامة التجارية لشركة معرف Microsoft Entra. تتضمن العلامة التجارية للشركة التسجيل وتسجيل الدخول وتحرير الملف الشخصي وإعادة تعيين كلمة المرور.

يوضح المثال التالي صفحة التسجيل وتسجيل الدخول بشعار مخصص وصورة خلفية باستخدام قالب Ocean Blue:

صفحة التسجيل/تسجيل الدخول ذات العلامات التجارية التي يقدمها Azure AD B2C

حدد قالب صفحة

  1. قم بتسجيل الدخول إلى بوابة Azure.
  2. إذا كان لديك حق الوصول إلى عدة مستأجرين، فحدد أيقونة الإعدادات في القائمة العلوية للتبديل إلى مستأجر Azure AD B2C من قائمة الدلائل + الاشتراكات .
  3. في مدخل Microsoft Azure، ابحث عن Azure AD B2C وحددها.
  4. حدد تدفقات المستخدم.
  5. حدد تدفق المستخدم الذي تريد تخصيصه.
  6. ضمن تخصيص في القائمة اليمنى، حدد تخطيطات الصفحة ثم حدد قالب. القائمة المنسدلة لتحديد القالب في صفحة تدفق المستخدم لمدخل Microsoft Azure

عند اختيار قالب، يتم تطبيق القالب المحدد على جميع الصفحات في تدفق المستخدم. يكون عنوان URI لكل صفحة مرئيا في حقل عنوان URI للصفحة المخصصة .

لتحديد قالب صفحة، قم بتعيين LoadUri عنصر تعريفات المحتوى. يوضح المثال التالي معرفات تعريف المحتوى والمعرفات المقابلة LoadUri.

أزرق المحيط:

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/templates/AzureBlue/exception.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/templates/AzureBlue/unified.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/templates/AzureBlue/multifactor-1.0.0.cshtml</LoadUri>
  </ContentDefinition>
</ContentDefinitions>

أردواز رمادي:

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/templates/MSA/exception.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/templates/MSA/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/templates/MSA/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/templates/MSA/unified.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/templates/MSA/multifactor-1.0.0.cshtml</LoadUri>
  </ContentDefinition>
</ContentDefinitions>

كلاسيكي:

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/default/exception.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/default/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/default/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/default/unified.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/default/multifactor-1.0.0.cshtml</LoadUri>
  </ContentDefinition>
</ContentDefinitions>

تكوين العلامة التجارية للشركة

لتخصيص صفحات تدفق المستخدم، يمكنك أولا تكوين العلامة التجارية للشركة في معرف Microsoft Entra، ثم تمكينها في تدفقات المستخدم في Azure AD B2C.

ابدأ بتعيين شعار اللافتة وصورة الخلفية ولون الخلفية داخل العلامة التجارية للشركة.

  1. قم بتسجيل الدخول إلى بوابة Azure.
  2. إذا كان لديك حق الوصول إلى عدة مستأجرين، فحدد أيقونة الإعدادات في القائمة العلوية للتبديل إلى مستأجر Azure AD B2C من قائمة الدلائل + الاشتراكات .
  3. في مدخل Microsoft Azure، ابحث عن Azure AD B2C وحددها.
  4. ضمن «Manage»، «select»Company branding.
  5. اتبع الخطوات الواردة في إضافة علامة تجارية إلى صفحة تسجيل الدخول إلى Microsoft Entra الخاصة بمؤسستك.

ضع هذه الأشياء في الاعتبار عند تكوين العلامة التجارية للشركة في Azure AD B2C:

  • تقتصر العلامة التجارية للشركة في Azure AD B2C حاليا على صورة الخلفيةوشعار الشعار وتخصيص لون الخلفية . الخصائص الأخرى في جزء العلامة التجارية للشركة، على سبيل المثال، الإعدادات المتقدمة، غير مدعومة.
  • في صفحات تدفق المستخدم، يتم عرض لون الخلفية قبل تحميل صورة الخلفية. نوصيك باختيار لون خلفية يتطابق بشكل وثيق مع الألوان في صورة الخلفية للحصول على تجربة تحميل أكثر سلاسة.
  • يظهر شعار البانر في رسائل البريد الإلكتروني للتحقق المرسلة إلى المستخدمين عند بدء تدفق مستخدم التسجيل.

تمكين العلامة التجارية للشركة في صفحات تدفق المستخدم

بمجرد تكوين العلامة التجارية للشركة، قم بتمكينها في تدفقات المستخدم.

  1. في القائمة اليسرى لمدخل Microsoft Azure، حدد Azure AD B2C.
  2. ضمن النهج، حدد تدفقات المستخدم (النهج).
  3. اختر تدفق المستخدم الذي تريد تمكين العلامة التجارية للشركة له. العلامة التجارية للشركة غير مدعومة لأنواع تدفق المستخدم القياسية لتسجيل الدخول وتحرير ملف التعريف القياسي.
  4. ضمن تخصيص، حدد تخطيطات الصفحة، ثم حدد الصفحة التي ترغب في وضع علامة تجارية عليها. على سبيل المثال، حدد صفحة التسجيل الموحد أو تسجيل الدخول.
  5. بالنسبة لإصدار تخطيط الصفحة (معاينة)، اختر الإصدار 1.2.0 أو أعلى.
  6. حدد حفظ.

إذا كنت ترغب في وضع علامة تجارية على جميع الصفحات في تدفق المستخدم، فقم بتعيين إصدار تخطيط الصفحة لكل تخطيط صفحة في تدفق المستخدم.

تحديد تخطيط الصفحة في Azure AD B2C في مدخل Microsoft Azure.

تمكين العلامة التجارية للشركة في صفحات السياسة المخصصة

بمجرد تكوين العلامة التجارية للشركة، قم بتمكينها في سياستك المخصصة. قم بتكوين إصدار تخطيط الصفحة باستخدام إصدار الصفحة contractلجميع تعريفات المحتوى في النهج المخصص. يجب أن يحتوي تنسيق القيمة على الكلمة contract: urn:com:microsoft:aad:b2c:elements:contract:p age-name:version. لتحديد تخطيط صفحة في نهجك المخصصة التي تستخدم قيمة DataUri قديمة. لمزيد من المعلومات، تعرف على كيفية الترحيل إلى تنسيق الصفحة باستخدام إصدار الصفحة.

يوضح المثال التالي تعريفات المحتوى مع عقد الصفحة المقابلة لها، وقالب صفحة Ocean Blue :

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/templates/AzureBlue/exception.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/templates/AzureBlue/unified.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
     <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
     <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
     <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/templates/AzureBlue/multifactor-1.0.0.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.0</DataUri>
  </ContentDefinition>
</ContentDefinitions>

إعادة ترتيب حقول الإدخال في نموذج التسجيل

لإعادة ترتيب حقول الإدخال في صفحة التسجيل لنموذج الحسابات المحلية، اتبع الخطوات التالية:

  1. قم بتسجيل الدخول إلى بوابة Azure.
  2. إذا كان لديك حق الوصول إلى عدة مستأجرين، فحدد أيقونة الإعدادات في القائمة العلوية للتبديل إلى مستأجر Azure AD B2C من قائمة الدلائل + الاشتراكات .
  3. في مدخل Microsoft Azure، ابحث عن Azure AD B2C وحددها.
  4. في القائمة اليمنى، حدد تدفقات المستخدم.
  5. حدد تدفق مستخدم (للحسابات المحلية فقط) تريد إعادة ترتيب حقول الإدخال الخاصة به.
  6. في القائمة اليمنى، اختر تخطيطات الصفحة
  7. في الجدول، حدد الصف صفحة الاشتراك في الحساب المحلي.
  8. ضمن سمات المستخدم، حدد حقل الإدخال الذي تريد إعادة ترتيبه، واسحب (لأعلى أو لأسفل) وأفلت أو استخدم عناصر التحكم تحريك لأعلى أو تحريك لأسفل لتحقيق الترتيب المطلوب.
  9. في أعلى الصفحة، حدد «Save».

القائمة المنسدلة لتحديد القالب في صفحة تدفق المستخدم في مدخل Microsoft Azure.

المحتوى ذو الصلة

اعثر على مزيد من المعلومات حول كيفية تخصيص واجهة المستخدم لتطبيقاتك في تخصيص واجهة المستخدم للتطبيق الخاص بك في Azure Active Directory B2C.

  • Last updated on