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

هام

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

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

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

تلميح

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

نظرة عامة مخصصة على HTML وCSS

Azure AD B2C يشغل الكود في متصفح عميلك باستخدام Cross-Origin Resource Sharing (CORS). في وقت التشغيل، يتم تحميل المحتوى من عنوان URL الذي تحدده في تدفق المستخدم أو النهج المخصص. تقوم كل صفحة في تجربة المستخدم بتحميل محتواها من عنوان URL الذي تحدده لتلك الصفحة. بعد تحميل المحتوى من رابط الرابط الخاص بك، يتم دمجه مع جزء HTML تم إدخاله بواسطة Azure AD B2C، ثم تعرض الصفحة على عميلك.

هامش محتوى الصفحة المخصص

محتوى صفحة HTML المخصص

إنشاء صفحة HTML باستخدام العلامة التجارية الخاصة بك لخدمة محتوى الصفحة المخصصة. يمكن أن تكون هذه الصفحة صفحة ثابتة *.html، أو صفحة ديناميكية مثل .NET أو Node.jsأو PHP، ومع ذلك، Azure B2C لا تدعم أي محركات عرض. يجب إجراء أي عرض من جانب الخادم للصفحة الديناميكية بواسطة تطبيق ويب مخصص.

يمكن أن يحتوي محتوى الصفحة المخصصة على أي عناصر HTML، بما في ذلك CSS وJavaScript، ولكن لا يمكن أن يتضمن عناصر غير آمنة مثل iframes. العنصر الوحيد المطلوب هو عنصر div مع id تعيين على api، مثل هذا العنصر <div id="api"></div> في صفحة HTML الخاصة بك.

<!DOCTYPE html>
<html>
<head>
    <title>My Product Brand Name</title>
</head>
<body>
    <div id="api"></div>
</body>
</html>

تخصيص صفحات Azure AD B2C الافتراضية

بدلا من إنشاء محتوى الصفحة المخصص من الصفر، يمكنك تخصيص محتوى الصفحة الافتراضي ل Azure AD B2C.

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

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

استضافة محتوى الصفحة

عند استخدام ملفات HTML وCSS الخاصة بك لتخصيص واجهة المستخدم، قم باستضافة محتوى واجهة المستخدم على أي نقطة نهاية HTTPS متوفرة للجمهور تدعم CORS. على سبيل المثال، Azure تخزين Blob، Azure App Services، خوادم الويب، شبكات CDN، AWS S3، أو أنظمة مشاركة الملفات.

إرشادات استخدام محتوى الصفحة المخصص

  • استخدم عنوان URL مطلق عند تضمين موارد خارجية مثل ملفات الوسائط وCSS وJavaScript في ملف HTML.

  • باستخدام تصميم الصفحة الإصدار 1.2.0 وما بعده، يمكنك إضافة السمة data-preload="true" في علامات HTML الخاصة بك للتحكم في ترتيب التحميل ل CSS وJavaScript. مع data-preload="true"، يتم بناء الصفحة قبل عرضها للمستخدم. تساعد هذه السمة على منع الصفحة من "الوميض" عن طريق التحميل المسبق لملف CSS، دون عرض HTML غير المصمم للمستخدم. يظهر مقتطف كود HTML التالي استخدام الوسم data-preload .

    <link href="https://path-to-your-file/sample.css" rel="stylesheet" type="text/css" data-preload="true"/>

  • نوصي بالبدء بمحتوى الصفحة الافتراضية والبناء فوقه.

  • يمكنك تضمين جافا سكريبت في محتواك المخصص.

  • إصدارات المستعرض المدعومة هي:

    • Internet Explorer 11 و10 وMicrosoft Edge
    • دعم محدود ل Internet Explorer 9 و8
    • Google Chrome 42.0 وما فوق
    • Mozilla Firefox 38.0 وما فوق
    • Safari لنظامي التشغيل iOS وmacOS، الإصدار 12 والإصدارات الأحدث

  • بسبب قيود الأمان، لا يدعم Azure AD B2C عناصر HTML frame أو iframe أو form HTML.

ترجمة المحتوى

تقوم بتعريب محتوى HTML الخاص بك من خلال تمكين language customization في مستأجر AD B2C الخاص بك Azure. تمكين هذه الميزة يسمح Azure AD B2C بتعيين سمة لغة صفحات HTML وتمرير معامل OpenID Connect ui_locales إلى نقطة النهاية الخاصة بك.

نهج قالب واحد

أثناء تحميل الصفحة، يقوم Azure AD B2C بتعيين سمة لغة الصفحة HTML مع اللغة الحالية. على سبيل المثال، <html lang="en">. لعرض أنماط مختلفة حسب اللغة الحالية، استخدم محدد CSS :lang مع تعريف CSS الخاص بك.

يحدد المثال التالي الفئات التالية:

  • imprint-en - يستخدم عندما تكون اللغة الحالية هي الإنجليزية.
  • imprint-de - يستخدم عندما تكون اللغة الحالية ألمانية.
  • imprint - الفئة الافتراضية التي تستخدم عندما لا تكون اللغة الحالية هي الإنجليزية أو الألمانية.
.imprint-en:lang(en),
.imprint-de:lang(de) {
    display: inherit !important;
}
.imprint {
    display: none;
}

يتم عرض عناصر HTML التالية وفقا للغة الصفحة:

<a class="imprint imprint-en" href="Link EN">Imprint</a>
<a class="imprint imprint-de" href="Link DE">Impressum</a>

نهج متعدد القوالب

تسمح ميزة تخصيص اللغة Azure AD B2C بتمرير معامل OpenID Connect ui_locales إلى نقطة النهاية الخاصة بك. يمكن لخادم المحتوى استخدام هذه المعلمة لتوفير صفحات HTML الخاصة باللغة.

ملاحظه

Azure AD B2C لا يمرر معلمات OpenID Connect، مثل ui_locales، إلى exception pages.

يمكن سحب المحتوى من أماكن مختلفة استنادا إلى اللغة المستخدمة. في نقطة النهاية الممكنة ل CORS، يمكنك إعداد بنية مجلد لاستضافة محتوى للغات معينة. تتصل بالشخص الصحيح إذا استخدمت قيمة {Culture:RFC5646}البطاقة الغريبة .

على سبيل المثال، قد يبدو عنوان URI للصفحة المخصصة كما يلي:

https://contoso.blob.core.windows.net/{Culture:RFC5646}/myHTML/unified.html

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

https://contoso.blob.core.windows.net/fr/myHTML/unified.html

معاينة محتوى الصفحة المخصصة

فيما يلي نظرة عامة على العملية:

  1. قم بإعداد موقع لاستضافة محتوى الصفحة المخصصة (نقطة نهاية HTTPS يمكن الوصول إليها بشكل عام وممكنة بواسطة CORS).
  2. قم بتنزيل وتخصيص ملف محتوى صفحة افتراضي، على سبيل المثال unified.html.
  3. نشر محتوى الصفحة المخصصة لنقطة نهاية HTTPS المتوفرة للجمهور.
  4. تعيين مشاركة الموارد عبر المنشأ (CORS) لتطبيق الويب الخاص بك.
  5. أشر إلى نهجك إلى URI لمحتوى النهج المخصص.

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

1. إنشاء محتوى HTML

أنشئ محتوى صفحة مخصصا باسم العلامة التجارية لمنتجك في العنوان.

  1. انسخ مقتطف HTML التالي. إنه HTML5 مشكل جيدا مع عنصر فارغ يسمى <div id="api"></div> موجود داخل <علامات الجسم> . يشير هذا العنصر إلى مكان إدراج محتوى Azure AD B2C.

    <!DOCTYPE html>
<html>
<head>
    <title>My Product Brand Name</title>
</head>
<body>
    <div id="api"></div>
</body>
</html>

  2. لصق القصاصة البرمجية المنسوخة في محرر نص

  3. استخدم CSS لتنسيق عناصر واجهة المستخدم التي يدرجها Azure AD B2C في صفحتك. يوضح المثال التالي ملف CSS بسيطا يتضمن أيضا إعدادات لعناصر HTML التي تم إدخالها للتسجيل:

    h1 {
  color: blue;
  text-align: center;
}
.intro h2 {
  text-align: center;
}
.entry {
  width: 400px ;
  margin-left: auto ;
  margin-right: auto ;
}
.divider h2 {
  text-align: center;
}
.create {
  width: 400px ;
  margin-left: auto ;
  margin-right: auto ;
}

  4. احفظ الملف كcustomize-ui.html.

ملاحظه

تتم إزالة عناصر نموذج HTML بسبب قيود الأمان إذا كنت تستخدم login.microsoftonline.com. إذا كنت تريد استخدام عناصر النماذج ب HTML في محتوى HTML المخصص الخاص بك، استخدم b2clogin.com.

2. إنشاء حساب تخزين في Azure Blob

في هذا المقال، نستخدم تخزين Azure Blob لاستضافة محتوانا. يمكنك اختيار استضافة محتواك على خادم ويب، لكن يجب عليك تفعيل CORS على خادم الويب الخاص بك.

ملاحظه

في مستأجر Azure AD B2C، لا يمكنك توفير تخزين Blob. يجب عليك إنشاء هذا المورد في مستأجر Microsoft Entra الخاص بك.

لاستضافة محتوى HTML في تخزين Blob، استخدم الخطوات التالية:

  1. سجل الدخول إلى بوابة Azure.
  2. إذا كان لديك إمكانية الوصول إلى عدة مستأجرين، اختر أيقونة Settings في القائمة العلوية للانتقال إلى المستأجر Microsoft Entra ID من قائمة الأدلة + الاشتراكات.
  3. في بوابة Azure، ابحث واختر <حسابات التخزين>
  4. حدد + إنشاء.
  5. اختر اشتراكا لحساب التخزين الخاص بك.
  6. أنشئ مجموعة موارد أو اختر مجموعة موجودة.
  7. أدخل اسم حساب تخزين فريد لحسابك التخزيني.
  8. اختر المنطقة الجغرافية لحساب التخزين الخاص بك.
  9. يمكن أن يبقى الأداءمعياريا.
  10. يمكن أن يبقى التكرارفي التخزين الجغرافي الزائد (GRS)
  11. اختر Review + create وانتظر بضع ثوان حتى Microsoft Entra ID لتشغيل التحقق.
  12. اختر إنشاء لإنشاء حساب تخزين. بعد الانتهاء من النشر، تفتح صفحة حساب التخزين تلقائيا أو تحتاج إلى اختيار الانتقال إلى المصدر.

2.1 إنشاء حاوية

لإنشاء حاوية عامة في تخزين Blob، قم بتنفيذ الخطوات التالية:

  1. تحت الإعدادات في القائمة اليسرى، اختر الإعدادات.
  2. تفعيل السماح بالوصول المجهول إلى Blob.
  3. حَدِّد حِفظ.
  4. تحت تخزين البيانات في القائمة اليسرى، اختر الحاويات.
  5. حدد + Container.
  6. بالنسبة للاسم، أدخل الجذر. يمكن أن يكون الاسم من اختيارك، مثل كونتوسو، لكننا نستخدم الجذر في هذا المثال للبساطة.
  7. لمستوى الوصول العام، اختر Blob. باختيار خيار Blob ، تسمح بوصول عام مجهول للقراءة فقط لهذا الحاوية.
  8. حدد إنشَاء لإنشَاء الحَاوية.
  9. اختر الجذر لفتح الحاوية الجديدة.

2.2 تحميل ملفات محتوى الصفحة المخصصة

  1. حدد تحميل.
  2. اختر أيقونة المجلد بجانب اختيار ملف.
  3. انتقل إلى customize-ui.htmlواختر ، الذي أنشأته سابقا في قسم تخصيص واجهة الصفحة.
  4. إذا أردت الرفع إلى مجلد فرعي ، قم بتوسيع المتقدم وأدخل اسم المجلد في الرفع إلى المجلد.
  5. حدد تحميل.
  6. اختر customize-ui.html الكتلة التي رفعتها.
  7. إلى يمين مربع نص الرابط ، اختر أيقونة "نسخ إلى الحافظة" لنسخ الرابط إلى لوحتك.
  8. في مستعرض الويب، انتقل إلى عنوان URL الذي نسخته للتحقق من إمكانية الوصول إلى الكائن الثنائي كبير الحجم الذي قمت بتحميله. إذا كان غير متاح، مثلا إذا واجهت ResourceNotFound خطأ، تأكد من أن نوع وصول الحاوية مضبوط على blob.

3. تكوين CORS

تكوين تخزين Blob لمشاركة الموارد عبر المنشأ عن طريق تنفيذ الخطوات التالية:

  1. انتقل إلى حساب التخزين الخاص بك.
  2. في القائمة اليسرى، تحت الإعدادات، اختر مشاركة الموارد (CORS).
  3. للأصول المسموح بها، أدخل https://your-tenant-name.b2clogin.com. استبدل your-tenant-name باسم مستأجرك في AD B2C Azure. على سبيل المثال، https://fabrikam.b2clogin.com. استخدم جميع الأحرف الصغيرة عند إدخال اسم المستأجر الخاص بك.
  4. بالنسبة للطرق المسموح بها، اختر كلا من GET .OPTIONS
  5. للرؤوس المسموح بها، أدخل نجمة (*).
  6. بالنسبة للرؤوس المكشوفة، أدخل النجمة (*).
  7. بالنسبة للعمر الأقصى (Max Age)، ادخل 200.
  8. في أعلى الصفحة، حدد «Save».

3.1 اختبار CORS

تحقق من أنك جاهز من خلال تنفيذ الخطوات التالية:

  1. كرر خطوة تكوين CORS. للأصول المسموح بها، أدخل https://www.test-cors.org
  2. انتقل إلى www.test-cors.org
  3. بالنسبة لمربع الرابط البعيد ، الصق رابط ملف HTML الخاص بك. على سبيل المثال، https://your-account.blob.core.windows.net/root/azure-ad-b2c/unified.html
  4. حدد إرسال طلب. النتيجة يجب أن تكون XHR status: 200. إذا تلقيت خطأ، فتأكد من صحة إعدادات CORS. قد تحتاج أيضا إلى مسح ذاكرة التخزين المؤقت للمستعرض أو فتح جلسة استعراض خاصة بالضغط على Ctrl+Shift+P.

تعرف على المزيد حول كيفية إنشاء وإدارة حسابات التخزين Azure.

4. تحديث تدفق المستخدم

  1. إذا كان لديك إمكانية الوصول إلى عدة مستأجرين، اختر أيقونة Settings في القائمة العلوية للانتقال إلى مستأجر Azure AD B2C من قائمة المجلدات + الاشتراكات.
  2. في بوابة Azure، ابحث واختر Azure AD B2C.
  3. في القائمة اليسرى، اختر تدفقات المستخدم، ثم اختر تدفق المستخدم B2C_1_signupsignin1 .
  4. اختر تخطيطات الصفحات، ثم تحت صفحة التسجيل الموحدة أو صفحة تسجيل الدخول، اختر نعملاستخدام محتوى صفحة مخصص.
  5. في صفحة URI المخصصة، أدخل URI الخاص بملف custom-ui.html الذي قمت بتسجيله سابقا.
  6. في أعلى الصفحة، حدد «Save».

5. اختبار تدفق المستخدم

  1. في مستأجر AD B2C الخاص بك Azure، اختر User flows واختر تدفق المستخدم B2C_1_signupsignin1.
  2. في أعلى الصفحة، اختر تشغيل تدفق المستخدم.
  3. في اللوحة على الجانب الأيمن، اختر زر تشغيل تدفق المستخدم .

يجب أن تشاهد صفحة مشابهة للمثال التالي مع العناصر التي تم توسيطها استنادا إلى ملف CSS الذي قمت بإنشائه:

متصفح الويب يعرض صفحة التسجيل أو تسجيل الدخول مع عناصر واجهة مستخدم مخصصة

4. تعديل ملف الملحقات

لتكوين تخصيص واجهة المستخدم، انسخ ContentDefinition وعناصره الفرعية من الملف الأساسي إلى ملف الامتدادات:

  1. افتح الملف الأساسي للنهج الخاص بك. على سبيل المثال، SocialAndLocalAccounts/TrustFrameworkBase.xml. هذا الملف الأساسي هو أحد ملفات السياسات المدرجة في حزمة بدء السياسة المخصصة، والتي كان يجب أن تكون قد حصلت عليها في الشرط المسبق، ابدأ بالسياسات المخصصة.

  2. ابحث عن محتوى العنصر ContentDefinitions وانسخ بالكامل.

  3. افتح ملف الملحق. على سبيل المثال، TrustFrameworkExtensions.xml. ابحث عن عنصر BuildingBlocks . إذا لم يكن العنصر موجودا، أضفه.

  4. قم بلصق محتوى عنصر ContentDefinitions بالكامل الذي نسخته كفرع من عنصر BuildingBlock .

  5. ابحث عن عنصر ContentDefinition الذي يحتوي Id="api.signuporsignin" على ملف XML الذي قمت بنسخه.

  6. غير قيمة LoadUri إلى عنوان URL لملف HTML الذي رفعته إلى التخزين. على سبيل المثال، https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html.

    يجب أن يبدو نهجك المخصص مثل مقتطف التعليمات البرمجية التالي:

    <BuildingBlocks>
  <ContentDefinitions>
    <ContentDefinition Id="api.signuporsignin">
      <LoadUri>https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html</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>
    </ContentDefinition>
  </ContentDefinitions>
</BuildingBlocks>

  7. احفظ ملف الامتدادات.

  8. تمكين JavaScript

5. تحميل نهجك المخصص المحدث واختباره

5.1 تحميل النهج المخصص

  1. إذا كان لديك إمكانية الوصول إلى عدة مستأجرين، اختر أيقونة Settings في القائمة العلوية للانتقال إلى مستأجر Azure AD B2C من قائمة المجلدات + الاشتراكات.
  2. ابحث واختر Azure AD B2C.
  3. ضمن Policies، حدد Identity Experience Framework.
  4. حدد Upload custom policy.
  5. حمل ملف الامتدادات الذي قمت بتغييره مسبقا.

5.2 اختبار السياسة المخصصة باستخدام Run Now

  1. اختر السياسة التي رفعتها، ثم اختر الركض الآن.
  2. يجب أن تكون قادرا على التسجيل باستخدام عنوان بريد إلكتروني.

تكوين URI لمحتوى الصفحة المخصصة الديناميكية

باستخدام سياسات Azure AD B2C المخصصة، يمكنك إرسال معلمة في مسار الرابط أو سلسلة استعلام. من خلال تمرير المعلمة إلى نقطة نهاية HTML الخاصة بك، يمكنك تغيير محتوى الصفحة ديناميكياً. على سبيل المثال، يمكنك تغيير صورة الخلفية في صفحة التسجيل أو تسجيل الدخول في Azure AD B2C، بناء على معامل تمرره من تطبيقك على الويب أو الهاتف المحمول. يمكن أن يكون المعامل أي محلل مطالبات، مثل معرف التطبيق، معرف اللغة، أو معامل سلاسل استعلام مخصصة، مثل campaignId.

إرسال معلمات سلسلة الاستعلام

لإرسال معلمات سلسلة الاستعلام، في سياسة الطرف المعتمد، أضف عنصرا ContentDefinitionParameters كما هو موضح أدناه.

<RelyingParty>
    <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
    <UserJourneyBehaviors>
    <ContentDefinitionParameters>
        <Parameter Name="campaignId">{OAUTH-KV:campaignId}</Parameter>
        <Parameter Name="lang">{Culture:LanguageName}</Parameter>
        <Parameter Name="appId">{OIDC:ClientId}</Parameter>
    </ContentDefinitionParameters>
    </UserJourneyBehaviors>
    ...
</RelyingParty>

في تعريف المحتوى الخاص بك، غير قيمة إلى LoadUrihttps://<app_name>.azurewebsites.net/home/unified. يجب أن تبدو وثيقتك ContentDefinition المخصصة مثل مقتطف الكود التالي:

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://<app_name>.azurewebsites.net/home/unified</LoadUri>
  ...
</ContentDefinition>

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

https://<app_name>.azurewebsites.net/home/unified?campaignId=123&lang=fr&appId=00001111-aaaa-2222-bbbb-3333cccc4444

عنوان URI لمحتوى الصفحة الديناميكي

يمكن سحب المحتوى من أماكن مختلفة استنادا إلى المعلمات المستخدمة. في نقطة النهاية الممكنة ل CORS، قم بإعداد بنية مجلد لاستضافة المحتوى. على سبيل المثال، يمكنك تنظيم المحتوى في البنية التالية. المجلد/المجلد الجذري حسب اللغة/ملفات HTML الخاصة بك. على سبيل المثال، قد يبدو عنوان URI للصفحة المخصصة كما يلي:

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://contoso.blob.core.windows.net/{Culture:LanguageName}/myHTML/unified.html</LoadUri>
  ...
</ContentDefinition>

Azure AD يرسل B2C رمز ISO مكون من حرفين للغة، fr للفرنسية:

https://contoso.blob.core.windows.net/fr/myHTML/unified.html

عينات القوالب

يمكنك العثور على نماذج قوالب لتخصيص واجهة المستخدم هنا:

git clone https://github.com/azure-ad-b2c/html-templates

يحتوي هذا المشروع على القوالب التالية:

لاستخدام العينة:

  1. استنساخ المستودع على جهازك المحلي. اختر مجلد /AzureBlueقالب ، /MSA، أو /classic.

  2. قم برفع جميع الملفات ضمن مجلد القالب والمجلد /src إلى تخزين Blob كما هو موضح في الأقسام السابقة.

  3. بعد ذلك، افتح كل \*.html ملف في مجلد القالب. ثم استبدل https://login.microsoftonline.com جميع نسخ الروابط بالعنوان الذي رفعته في الخطوة الثانية. على سبيل المثال:

    من:

    https://login.microsoftonline.com/templates/src/fonts/segoeui.WOFF

    إلى:

    https://your-storage-account.blob.core.windows.net/your-container/templates/src/fonts/segoeui.WOFF

  4. احفظ الملفات \*.html ورفعها إلى مخزن Blob.

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

  6. إذا رأيت خطوطا أو صورا أو CSS مفقودة، تحقق من مراجعك في سياسة الإضافات والملفات \*.html .

اعتماد التمهيد في قوالب العينات

تستخدم نماذج النماذجBootstrap 3.3.5، المستمدة من CDN Bootstrap الرسمي. تم التحقق من صحة هذا الإصدار واختباره باستخدام Azure AD B2C.

تشير القوالب إلى عنوان URL CDN التالي ل Bootstrap CSS:

https://cdn.jsdelivr.net/npm/bootstrap@3.3.5/dist/css/bootstrap.min.css

التكوين الافتراضي في ملفات HTML النموذجية يتضمن عنصر رابط مشابه للمثال التالي:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.5/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

للحصول على تفاصيل التحميل الرسمية للعبة Bootstrap 3.3.5 وبيانات CDN، راجع Bootstrap 3.3 Getting Started.

استبدال مرجع CDN

يمكنك استبدال مرجع CDN برقم CDN الداخلي لمؤسستك أو نسخة مستضافة محليا لتلبية متطلبات الموثوقية أو الأمان أو الامتثال.

هام

تم التحقق من صحة القوالب تحديدا مقابل Bootstrap 3.3.5. قد يؤدي الترقية، التراجع، أو تعديل نسخة Bootstrap إلى مشاكل في التصميم أو التخطيط أو توافق المكونات.

إذا غيرت نسخة Bootstrap، فأنت مسؤول عن إكمال اختبار الانحدار للتحقق من أن القوالب المخصصة تعمل بشكل صحيح مع Azure AD B2C. احتفظ بالنسخة المعتمدة ما لم تكن قد أكملت الاختبار المناسب.

استخدام أصول العلامة التجارية للشركة في HTML المخصص

لاستخدام أصول العلامة التجارية للشركة في HTML مخصص، أضف العلامات التالية خارج الوسم <div id="api"> . يتم استبدال مصدر الصورة بمصدر صورة الخلفية وشعار الشعار.

<img data-tenant-branding-background="true" />
<img data-tenant-branding-logo="true" alt="Company Logo" />

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

تعلم كيفية تفعيل كود جافاسكريبت على جانب العميل.

  • Last updated on