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

Статья
10/27/2023

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

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

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

defer Добавление атрибута, указывающего, что скрипт загружается параллельно с анализом страницы, затем скрипт выполняется после завершения анализа страницы:
```
 <script src="my-script.js" defer></script>
```
Добавление async атрибута, указывающего, что скрипт скачан параллельно с анализом страницы, скрипт выполняется сразу после того, как он будет доступен (перед завершением синтаксического анализа):
```
 <script src="my-script.js" async></script>	
```

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

Выберите разметку страницы
Включите ее в потоке пользователей с помощью портал Azure
Использование b2clogin.com в запросах

Выберите разметку страницы
Добавление элемента в настраиваемую политику
Использование b2clogin.com в запросах

Необходимые компоненты

Создайте поток пользователя, чтобы пользователи могли зарегистрироваться и входить в ваше приложение.
Зарегистрируйте веб-приложение.

Выполните шаги, описанные в статье Начало работы с настраиваемыми политиками в Azure Active Directory B2C.
Зарегистрируйте веб-приложение.

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

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

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

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

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

Page layout settings in portal showing page layout version dropdown

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

Выберите макет страницы для элементов пользовательского интерфейса приложения.
Определите версию макета страницы с версией страницы 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.

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

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

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

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

Примеры для 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.

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