Включение JavaScript и версий разметки страниц в Azure Active Directory B2C

Для начала с помощью селектора Choose a policy type (Выбрать тип политики) выберите тип пользовательской политики. Azure Active Directory B2C предлагает два метода определения способа взаимодействия пользователей с вашими приложениями: с помощью предопределенных потоков пользователей или полностью настраиваемых пользовательских политик. Действия, которые необходимо выполнить, отличаются для каждого метода.

Шаблоны HTML для Azure Active Directory B2C (Azure AD B2C) позволяют вам создать собственные механизмы идентификации пользователей. Шаблоны HTML могут содержать только определенные теги и атрибуты HTML. Разрешены базовые теги HTML, например <b>, <i>, <u>, <h1> и <hr>. Расширенные теги, например <script> и <iframe> удалены по соображениям безопасности.

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

Предварительные требования

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

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

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

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

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

Page layout settings in portal showing page layout version dropdown

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

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

User flow properties page with Enable JavaScript setting highlighted

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

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

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

    <RelyingParty>
      <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
      <UserJourneyBehaviors>
        <ScriptExecution>Allow</ScriptExecution>
      </UserJourneyBehaviors>
      ...
    </RelyingParty>
    
  3. Сохраните и отправьте этот файл.

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

При настройке интерфейса приложения с помощью JavaScript следуйте приведенным ниже рекомендациям.

  • Не рекомендуется
    • привязывать события щелчка к элементам HTML <a>;
    • принимать зависимость от кода или комментариев 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 не поддерживается.
    • Azure AD B2C не поддерживает большинство платформ JavaScript.
  • Параметры 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://docs.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 как атрибут пользователя.

Дальнейшие действия

См. дополнительные сведения о настройке пользовательского интерфейса приложения в Azure Active Directory B2C.