Добавление JavaScript (JS) в поток настройки пользовательского интерфейса B2C было на карте какое-то время и теперь, наконец, было выпущено.

Я предлагаю вам прочитать все ссылки ниже, а затем прочитать сообщение.

Хорошая рецензия здесь.

Будем следить за статьей.

Контракт страницы

Это описано здесь.

Найдите раздел ‹ContentDefinitions› в настраиваемой политике TrustFrameworkExtensions.

Затем вам нужно заменить все контракты, например

<ContentDefinition Id=”api.error”>
<LoadUri>~/tenant/default/exception.cshtml</LoadUri>
<RecoveryUri>~/common/default_page_error.html</RecoveryUri>
<! — <DataUri>urn:com:microsoft:aad:b2c:elements:globalexception:1.1.0</DataUri> →
<DataUri>urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.1.0</DataUri>
<Metadata>
<Item Key=”DisplayName”>Error page</Item>
</Metadata>

Найдите старый DataUri в таблице в ссылке на страницу контрактов и замените его новым, например. для «api.error» запись в таблице:

urn: com: microsoft: aad: b2c: elements: globalexception: 1.1.0 urn: com: microsoft: aad: b2c: elements: contract: globalexception: 1.1.0

Добавить элемент ScriptExecution

Согласно ссылке JS, это просто добавление:

<UserJourneyBehaviors>
    <ScriptExecution>Allow</ScriptExecution>
  </UserJourneyBehaviors>

например SignUpOrSignin.xml.

Загрузите JS

В статье говорится:

«Включите этот фрагмент кода в свой шаблон регистрации или входа для страницы с самоутверждением».

Это несколько расплывчато. Вам необходимо выполнить действия здесь. Их много, но давайте рассмотрим их один за другим.

Что касается «Создание содержимого HTML5», я использовал образец «Переключение пароля». Мой HTML:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <div id="api"></div>
<script>
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();
</script>   
</body>
</html>

Обратите внимание:

<div id="api"></div>

Здесь Azure AD B2C добавляет фактические элементы страницы входа.

После проработки шагов и предположения, что вы использовали хранилище BLOB-объектов (в отличие от веб-сайта), вы должны получить HTML-код, загруженный на:

https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html

и ваше «Определение содержания», указывающее на это.

<ContentDefinition Id="api.signuporsignin">
      <LoadUri>https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html</LoadUri>

Не забудьте загрузить измененные пользовательские политики:

  • SignUpOrSignin.xml
  • TrustFrameworkExtensions.xml

Примечание.

Настройка поля CORS «Разрешенные источники» с помощью:

your-tenant-name.b2clogin.com

привело к ошибке:

‘AADB2C90047: ресурс‘ https://your-storage-account.blob.core.windows.net/$root/customize-ui.html ’содержит ошибки скрипта, препятствующие его загрузке.

Я смог обойти это, введя «*», то есть разрешить все.

Выполнение моей настраиваемой политики «регистрация или вход» показывает:

Приложение:

Вместо загрузки в хранилище BLOB-объектов вручную можно воспользоваться утилитой.

Согласно документации:

«Простая программа, которая загружает каталог файлов в учетную запись хранилища BLOB-объектов Azure и обеспечивает доступ CORS для файлов. Используется для загрузки файлов HTML, CSS и изображений для настройки пользовательского интерфейса B2C.

Для запуска просто скачайте B2CAzureStorageClient.zip, разархивируйте и запустите B2CAzureStorageClient.exe ».

Обратите внимание, что утилита выгружает содержимое каталога.

Когда вы запустите его, вы увидите:

**************** Инструмент поддержки хранилища BLOB-объектов Azure AD B2C
Этот инструмент загружает все содержимое каталога в указанный вами контейнер хранилища BLOB-объектов Azure.
Это также обеспечит доступ CORS из всех источников к каждому из файлов.

Введите имя своей учетной записи хранения Azure:
your-storage-account
Введите основной ключ доступа к хранилищу BLOB-объектов Azure:
s // hX… JPKQnHOgErw ==
Введите свой Имя контейнера хранилища BLOB-объектов Azure:
$ root
Введите путь к каталогу, содержимое которого вы хотите загрузить:
C: \ B2C \ Upload
Успешно загруженный файл customize-ui. html в хранилище BLOB-объектов Azure
Успешно установите политику CORS, разрешающую GET для всех источников. См. Https: //msdn.mic
rosoft.com/en-us/library/azure/dn535601.aspx для получения дополнительной информации.
Нажмите Enter, чтобы закрыть…

Вы можете получить первичный ключ доступа к хранилищу BLOB-объектов Azure из меню хранилища BLOB-объектов:

Посмотрев на раздел политики CORS в хранилище BLOB-объектов после запуска утилиты, мы увидим:

Все хорошо!