Добавление 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-объектов после запуска утилиты, мы увидим:
Все хорошо!