تمكين JavaScript وإصدارات تخطيط الصفحة في Azure Active Directory B2C

هام

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

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

باستخدام قوالب HTML Azure Active Directory B2C (Azure AD B2C)، يمكنك صياغة تجارب هوية المستخدمين. يمكن أن تحتوي قوالب HTML على علامات وسمات HTML معينة فقط. يسمح بعلامات HTML الأساسية ، مثل b و i و u و h1< و >hr<. ><><><> تتم إزالة العلامات الأكثر تقدما مثل <البرنامج النصي> و <iframe> لأسباب أمنية ولكن <script> يجب إضافة العلامة في <head> العلامة. من الإصدار 2.1.21 من تخطيط الصفحة المؤكد ذاتيا / الإصدار 2.1.10 من unifiedssp / الإصدار متعدد العوامل 1.2.10 وما بعده ، لا يدعم B2C إضافة البرامج النصية في <body> العلامة (لأن هذا يمكن أن يشكل خطرا على هجوم البرمجة النصية عبر المواقع). قد يتطلب ترحيل البرامج النصية الحالية من <body> إلى <head> قد يتطلب في بعض الأحيان إعادة كتابة البرامج النصية الحالية مع مراقبي الطفرات من أجل العمل السليم.

يجب إضافة العلامة <script> في <head> العلامة بطريقتين:

إضافة السمة defer ، التي تحدد تنزيل البرنامج النصي بالتوازي مع تحليل الصفحة، ثم يتم تنفيذ البرنامج النصي بعد انتهاء الصفحة:
```
 <script src="my-script.js" defer></script>
```
إضافة async سمة تحدد تنزيل البرنامج النصي بالتوازي مع تحليل الصفحة، ثم يتم تنفيذ البرنامج النصي بمجرد توفره (قبل اكتمال التحليل):
```
 <script src="my-script.js" async></script>	
```

لتمكين JavaScript وعلامات HTML والسمات المتقدمة:

تحديد تخطيط صفحة
تمكينه على تدفق المستخدم باستخدام مدخل Microsoft Azure
استخدم b2clogin.com في طلباتك

تحديد تخطيط صفحة
إضافة عنصر إلى النهج المخصص
استخدم b2clogin.com في طلباتك

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

إنشاء تدفق مستخدم حتى يتمكن المستخدمون من التسجيل وتسجيل الدخول إلى التطبيق الخاص بك.
تسجيل تطبيق ويب.

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

بدء إعداد إصدار تخطيط الصفحة

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

لتحديد إصدار تخطيط صفحة لصفحات تدفق المستخدم:

في مستأجر Azure AD B2C، حدد تدفقات المستخدم.
حدد النهج الخاص بك (على سبيل المثال، "B2C_1_SignupSignin") لفتحه.
حدد تخطيطات الصفحة. اختر اسم تخطيط، ثم اختر إصدار تخطيط الصفحة.

للحصول على معلومات حول إصدارات تخطيط الصفحة المختلفة، راجع سجل تغيير إصدار تخطيط الصفحة.

إعدادات تخطيط الصفحة في المدخل التي تعرض القائمة المنسدلة لإصدار تخطيط الصفحة

لتحديد إصدار تخطيط صفحة لصفحات السياسة المخصصة:

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

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

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.0</DataUri>
  </ContentDefinition>
</ContentDefinitions>

تمكين JavaScript

في خصائص تدفق المستخدم، يمكنك تمكين JavaScript. يؤدي تمكين JavaScript أيضا إلى فرض استخدام تخطيط الصفحة. يمكنك بعد ذلك تعيين إصدار تخطيط الصفحة لتدفق المستخدم كما هو موضح في القسم التالي.

صفحة خصائص تدفق المستخدم مع تمييز إعداد تمكين JavaScript

يمكنك تمكين تنفيذ البرنامج النصي عن طريق إضافة عنصر ScriptExecution إلى عنصر RelyingParty .

افتح ملف النهج المخصص. على سبيل المثال ، SignUpOrSignin.xml.

أضف العنصر ScriptExecution إلى العنصر RelyingParty :

<RelyingParty>
  <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
  <UserJourneyBehaviors>
    <ScriptExecution>Allow</ScriptExecution>
  </UserJourneyBehaviors>
  ...
</RelyingParty>

احفظ الملف وقم بتحميله.

إرشادات استخدام JavaScript

اتبع هذه الإرشادات عند تخصيص واجهة التطبيق باستخدام JavaScript:

لا:
- ربط حدث نقرة على <a> عناصر HTML.
- الاعتماد على التعليمات البرمجية أو التعليقات الخاصة ب Azure AD B2C.
- تغيير الترتيب أو التسلسل الهرمي لعناصر Azure AD B2C HTML. استخدم نهج Azure AD B2C للتحكم في ترتيب عناصر واجهة المستخدم.
يمكنك الاتصال بأي خدمة RESTful مع هذه الاعتبارات:
- قد تحتاج إلى تعيين CORS لخدمة RESTful للسماح بمكالمات HTTP من جانب العميل.
- تأكد من أن خدمة RESTful الخاصة بك آمنة وتستخدم بروتوكول HTTPS فقط.
- لا تستخدم JavaScript مباشرة لاستدعاء نقاط نهاية Azure AD B2C.
يمكنك تضمين JavaScript أو يمكنك الارتباط بملفات JavaScript الخارجية. عند استخدام ملف JavaScript خارجي، تأكد من استخدام عنوان URL المطلق وليس عنوان URL النسبي.
أطر عمل JavaScript:
- يستخدم Azure AD B2C إصدارا محددا من jQuery. لا تقم بتضمين إصدار آخر من jQuery. يؤدي استخدام أكثر من إصدار واحد في نفس الصفحة إلى حدوث مشكلات.
- استخدام RequireJS غير مدعوم.
- معظم أطر عمل JavaScript غير مدعومة بواسطة Azure AD B2C.
يمكن قراءة إعدادات Azure AD B2C عن طريق استدعاء window.SETTINGSالكائنات، window.CONTENT مثل لغة واجهة المستخدم الحالية. لا تغير قيمة هذه الكائنات.
لتخصيص رسالة خطأ Azure AD B2C، استخدم الترجمة في نهج.
إذا كان من الممكن تحقيق أي شيء باستخدام سياسة ، فهذه هي الطريقة الموصى بها بشكل عام.
نوصي باستخدام عناصر التحكم الحالية في واجهة المستخدم، مثل الأزرار، بدلا من إخفائها وتنفيذ روابط النقرات على عناصر التحكم في واجهة المستخدم الخاصة بك. يضمن هذا الأسلوب استمرار تجربة المستخدم في العمل بشكل صحيح حتى عندما نصدر ترقيات عقد صفحة جديدة.

نماذج JavaScript

إظهار كلمة مرور أو إخفاؤها

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

function makePwdToggler(pwd){
  // Create show-password checkbox
  var checkbox = document.createElement('input');
  checkbox.setAttribute('type', 'checkbox');
  var id = pwd.id + 'toggler';
  checkbox.setAttribute('id', id);

  var label = document.createElement('label');
  label.setAttribute('for', id);
  label.appendChild(document.createTextNode('show password'));

  var div = document.createElement('div');
  div.appendChild(checkbox);
  div.appendChild(label);

  // Add show-password checkbox under password input
  pwd.insertAdjacentElement('afterend', div);

  // Add toggle password callback
  function toggle(){
    if(pwd.type === 'password'){
      pwd.type = 'text';
    } else {
      pwd.type = 'password';
    }
  }
  checkbox.onclick = toggle;
  // For non-mouse usage
  checkbox.onkeydown = toggle;
}

function setupPwdTogglers(){
  var pwdInputs = document.querySelectorAll('input[type=password]');
  for (var i = 0; i < pwdInputs.length; i++) {
    makePwdToggler(pwdInputs[i]);
  }
}

setupPwdTogglers();

إضافة شروط الاستخدام

قم بتضمين التعليمات البرمجية التالية في صفحتك حيث تريد تضمين خانة اختيار شروط الاستخدام . عادة ما تكون خانة الاختيار هذه مطلوبة في صفحات الاشتراك في حسابك المحلي والاشتراك في الحساب الاجتماعي.

function addTermsOfUseLink() {
    // find the terms of use label element
    var termsOfUseLabel = document.querySelector('#api label[for="termsOfUse"]');
    if (!termsOfUseLabel) {
        return;
    }

    // get the label text
    var termsLabelText = termsOfUseLabel.innerHTML;

    // create a new <a> element with the same inner text
    var termsOfUseUrl = 'https://learn.microsoft.com/legal/termsofuse';
    var termsOfUseLink = document.createElement('a');
    termsOfUseLink.setAttribute('href', termsOfUseUrl);
    termsOfUseLink.setAttribute('target', '_blank');
    termsOfUseLink.appendChild(document.createTextNode(termsLabelText));

    // replace the label text with the new element
    termsOfUseLabel.replaceChild(termsOfUseLink, termsOfUseLabel.firstChild);
}

في الكود، استبدل termsOfUseUrl برابط اتفاقية شروط الاستخدام الخاصة بك. بالنسبة إلى الدليل، قم بإنشاء سمة مستخدم جديدة تسمى termsOfUse ثم قم بتضمين termsOfUse كسمة مستخدم.

بدلا من ذلك ، يمكنك إضافة رابط في أسفل الصفحات المؤكدة ذاتيا ، دون استخدام JavaScript. استخدم الترجمة التالية:

<LocalizedResources Id="api.localaccountsignup.en">
  <LocalizedStrings>
    <!-- The following elements will display a link at the bottom of the page. -->
    <LocalizedString ElementType="UxElement" StringId="disclaimer_link_1_text">Terms of use</LocalizedString>
    <LocalizedString ElementType="UxElement" StringId="disclaimer_link_1_url">termsOfUseUrl</LocalizedString>
    </LocalizedStrings>
</LocalizedResources>

استبدل termsOfUseUrl الرابط الخاص بسياسة الخصوصية وشروط الاستخدام الخاصة بمؤسستك.

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

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

الملاحظات

هل كانت هذه الصفحة مفيدة؟

Last updated on 2025-05-08