Поделиться через

Включение версий 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> тег. Начиная с версий макета страницы selfasserted 2.1.21, unifiedssp 2.1.10 и многофакторной 1.2.10, B2C не поддерживает добавление скриптов в тег <body> (так как это может представлять угрозу для межсайтовых скриптовых атак). Миграция существующих скриптов с <body> на <head> может время от времени требовать перезаписи существующих сценариев с помощью наблюдателей мутаций для правильной работы.

<script> Тег должен быть добавлен в <head> тег двумя способами:

  1. defer Добавление атрибута, указывающего, что скрипт загружается параллельно с анализом страницы, затем скрипт выполняется после завершения анализа страницы:

     <script src="my-script.js" defer></script>

  2. Добавление async атрибута, указывающего, что скрипт скачан параллельно с анализом страницы, скрипт выполняется сразу после того, как он будет доступен (перед завершением синтаксического анализа):

     <script src="my-script.js" async></script>

Чтобы включить JavaScript и расширенные HTML-теги и атрибуты, выполните следующие действия.

Предпосылки

Начало настройки версии макета страницы

Если вы планируете включить клиентский код JavaScript, элементы, на основе которых вы пишете JavaScript, должны быть неизменными. Если они не являются неизменяемыми, любые изменения могут привести к непредвиденному поведению на страницах пользователей. Чтобы предотвратить эти проблемы, примените использование макета страницы и укажите версию макета страницы, чтобы убедиться, что определения контента на основе JavaScript неизменяемы. Даже если вы не планируете включить JavaScript, можно указать версию макета страницы для страниц.

Чтобы указать версию макета страниц для страниц потока пользователя, выполните указанные действия.

  1. В клиенте Azure AD B2C выберите потоки пользователей.
  2. Выберите политику (например, B2C_1_SignupSignin), чтобы открыть ее.
  3. Выберите макеты страниц. Выберите имя макета и выберите версию макета страницы.

Сведения о различных версиях макета страницы см. в журнале изменений версии макета страницы.

Параметры макета страницы на портале с раскрывающимся списком версии макета страницы

Чтобы указать версию макета страниц для страниц пользовательской политики, выполните следующие действия.

  1. Выберите макет страницы для элементов пользовательского интерфейса приложения.
  2. Определите версию макета страницы с версией страницы contract для всех определений контента в вашей пользовательской политике. Формат значения должен содержать слово contract: urn:com:microsoft:aad:b2c:elements:contract:page-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 также заставляет использовать макет страницы. Затем можно задать версию макета страницы для потока пользователя, как описано в следующем разделе.

Страница свойств потока пользователя с выделенным параметром Enable JavaScript

Вы можете включить выполнение скрипта, добавив элемент ScriptExecution в элемент RelyingParty .

  1. Откройте файл настраиваемой политики. Например, SignUpOrSignin.xml.

  2. Добавьте элемент ScriptExecution в элемент RelyingParty :

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

  3. Сохраните и отправьте файл.

Рекомендации по использованию JavaScript

Следуйте этим рекомендациям при настройке интерфейса приложения с помощью JavaScript:

  • Не делайте:
    • привязать событие щелчка к <a> ЭЛЕМЕНТАМ HTML.
    • взять зависимость от кода или комментариев Azure AD B2C.
    • измените порядок или иерархию элементов HTML Azure AD B2C. Используйте политику 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 , а затем включите терминыOfUse в качестве атрибута пользователя.

Кроме того, можно добавить ссылку в нижней части самоутверждаемых страниц без использования 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.