Настройка пользовательского интерфейса с помощью шаблонов HTML в Azure Active Directory B2C

Это важно

Начиная с 1 мая 2025 г. Azure AD B2C больше не будет доступен для приобретения для новых клиентов. Дополнительные сведения см. в разделе "Вопросы и ответы".

Прежде чем начать, используйте селектор типа политики в верхней части этой страницы, чтобы выбрать тип политики, которую вы настроите. Azure Active Directory B2C предлагает два метода определения способа взаимодействия пользователей с вашими приложениями: с помощью предопределенных потоков пользователей или полностью настраиваемых пользовательских политик. Действия, которые необходимо выполнить, отличаются для каждого метода.

Фирменная символика и настройка пользовательского интерфейса, отображаемого Azure Active Directory B2C (Azure AD B2C) для клиентов, помогает обеспечить простой пользовательский интерфейс в приложении. Эти возможности включают регистрацию, вход, редактирование профиля и сброс паролей. В этой статье приведены методы настройки пользовательского интерфейса.

Подсказка

Если вы хотите изменить только логотип баннера, фоновое изображение и цвет фона страниц потока пользователя, можно попробовать функцию фирменной символики компании .

Обзор пользовательского HTML и CSS

Azure AD B2C выполняет код в браузере клиента с помощью общего доступа к ресурсам между источниками (CORS). Во время выполнения содержимое загружается из URL-адреса, указанного в пользовательском потоке или пользовательской политике. Каждая страница в пользовательском интерфейсе загружает содержимое из URL-адреса, указанного для этой страницы. После загрузки содержимого из URL-адреса он объединяется с фрагментом HTML, вставленным Azure AD B2C, а затем страница отображается клиенту.

Настраиваемое поле содержимого страницы

Настраиваемое содержимое HTML-страницы

Создайте HTML-страницу с собственной фирменной символикой для обслуживания пользовательского содержимого страницы. Эта страница может быть статической *.html или динамической страницей, например .NET, Node.jsили PHP, однако Azure B2C не поддерживает какие-либо обработчики представлений. Любая серверная отрисовка динамической страницы должна выполняться выделенным веб-приложением.

Пользовательское содержимое страницы может содержать любые элементы HTML, включая CSS и JavaScript, но не может включать небезопасные элементы, такие как iframes. Единственным обязательным элементом является элемент div с id заданным значением api, например, таким, как этот <div id="api"></div> на вашей HTML-странице.

<!DOCTYPE html>
<html>
<head>
    <title>My Product Brand Name</title>
</head>
<body>
    <div id="api"></div>
</body>
</html>

Настройка страниц Azure AD B2C по умолчанию

Вместо создания пользовательского содержимого страницы с нуля можно настроить содержимое страницы Azure AD B2C по умолчанию.

В следующей таблице перечислены содержимое страницы по умолчанию, предоставленное Azure AD B2C. Скачайте файлы и используйте их в качестве отправной точки для создания собственных пользовательских страниц. Ознакомьтесь с примерами шаблонов , чтобы узнать, как скачать и использовать примеры шаблонов.

Страница	Описание	Шаблоны
Единая регистрация или вход	Эта страница обрабатывает процесс регистрации и входа пользователя. Пользователи могут использовать корпоративные поставщики удостоверений, поставщики удостоверений социальных сетей, такие как Facebook, учетная запись Майкрософт или локальные учетные записи.	Классический, океанский синий и сланцевый серый.
Вход (только)	Страница входа также называется выбором поставщика идентификационных данных. Он обрабатывает вход пользователя с помощью локальной учетной записи или федеративных поставщиков удостоверений. Используйте эту страницу, чтобы разрешить вход без возможности регистрации. Например, прежде чем пользователь сможет изменить свой профиль.	Классический, океанский синий и сланцевый серый.
Self-Asserted	Большинство взаимодействий в Azure AD B2C, где от пользователя ожидается ввод данных, построены на принципе самоутверждения. Например, страница регистрации, страница входа или страница сброса пароля. Используйте этот шаблон в качестве пользовательского содержимого страницы для страницы регистрации учетной записи социальной сети, страницы регистрации локальной учетной записи, страницы входа в локальную учетную запись, сброс пароля, изменение профиля, блокировка страницы и многое другое. Страница для ввода данных может содержать различные элементы управления, такие как текстовое поле, поле для ввода пароля, радиокнопка, раскрывающийся список с единичным выбором и флажки для множественного выбора.	Классический, океанский синий и сланцевый серый.
Многофакторная проверка подлинности	На этой странице пользователи могут проверить свои номера телефонов (с помощью текста или голоса) во время регистрации или входа.	Классический, океанский синий и сланцевый серый.
Ошибка	Эта страница отображается при обнаружении исключения или ошибки.	Классический, океанский синий и сланцевый серый.

Размещение содержимого страницы

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

Локализация содержимого

Вы локализуете HTML-содержимое, включив настройку языка в клиенте Azure AD B2C. Включение этой функции позволяет Azure AD B2C задать атрибут языка HTML-страницы и передать параметр ui_locales OpenID Connect в конечную точку.

Подход с одним шаблоном

Во время загрузки страницы Azure AD B2C задает атрибут языка HTML-страницы с текущим языком. Например: <html lang="en">. Чтобы отобразить различные стили на текущем языке, используйте селектор CSS :lang вместе с определением CSS.

В следующем примере определяются следующие классы:

imprint-en — используется, если текущий язык является английским.
imprint-de — используется, если текущий язык является немецким.
imprint — Класс по умолчанию, используемый, если текущий язык не является английским или немецким.

.imprint-en:lang(en),
.imprint-de:lang(de) {
    display: inherit !important;
}
.imprint {
    display: none;
}

В соответствии с языком страницы отображаются следующие элементы HTML:

<a class="imprint imprint-en" href="Link EN">Imprint</a>
<a class="imprint imprint-de" href="Link DE">Impressum</a>

Подход с несколькими шаблонами

Функция настройки языка позволяет Azure AD B2C передавать параметр ui_locales OpenID Connect в конечную точку. Сервер содержимого может использовать этот параметр для предоставления HTML-страниц для конкретного языка.

Примечание.

Azure AD B2C не передает параметры OpenID Connect, такие как ui_locales, к страницам ошибок.

Содержимое можно извлечь из разных источников на основе используемой локали. В конечной точке с поддержкой CORS можно настроить структуру папок для размещения содержимого для определенных языков. Вы вызовете правильную функцию, если используете подстановочное значение {Culture:RFC5646}.

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

https://contoso.blob.core.windows.net/{Culture:RFC5646}/myHTML/unified.html

Вы можете загрузить страницу на французском языке, извлекая содержимое из:

https://contoso.blob.core.windows.net/fr/myHTML/unified.html

Пошаговое руководство по пользовательскому содержимому страницы

Ниже приведен обзор процесса.

Подготовьте расположение для размещения пользовательского содержимого страницы (общедоступная конечная точка HTTPS с поддержкой CORS).
Скачайте и настройте файл содержимого страницы по умолчанию, например unified.html.
Опубликуйте пользовательское содержимое страницы на вашем общедоступном HTTPS-адресе.
Задайте общий доступ к ресурсам между источниками (CORS) для веб-приложения.
Направьте вашу политику на URI для пользовательского содержимого политики.

Предпосылки

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

Выполните действия, описанные в статье "Начало работы с настраиваемыми политиками в Active Directory B2C". В этом руководстве описано, как обновить пользовательские файлы политики для использования конфигурации клиента Azure AD B2C.
Зарегистрируйте веб-приложение.

1. Создание HTML-содержимого

Создайте страницу с индивидуальным содержимым и названием вашего бренда продукта в заголовке.

Скопируйте следующий фрагмент HTML. Он хорошо сформирован HTML5 с пустым элементом с именем <div id="api"></div> , расположенным <в тегах текста> . Этот элемент указывает, где нужно вставить содержимое Azure AD B2C.
```
<!DOCTYPE html>
<html>
<head>
    <title>My Product Brand Name</title>
</head>
<body>
    <div id="api"></div>
</body>
</html>
```
Вставка скопированного фрагмента в текстовом редакторе
Используйте CSS для стиля элементов пользовательского интерфейса, которые Azure AD B2C вставляет на страницу. В следующем примере показан простой CSS-файл, который также содержит параметры для внедренных HTML-элементов регистрации:
```
h1 {
  color: blue;
  text-align: center;
}
.intro h2 {
  text-align: center;
}
.entry {
  width: 400px ;
  margin-left: auto ;
  margin-right: auto ;
}
.divider h2 {
  text-align: center;
}
.create {
  width: 400px ;
  margin-left: auto ;
  margin-right: auto ;
}
```
Сохраните файл как customize-ui.html.

Примечание.

Элементы формы HTML удаляются из-за ограничений безопасности при использовании login.microsoftonline.com. Если вы хотите использовать элементы формы HTML в пользовательском HTML-содержимом, используйте b2clogin.com.

2. Создайте учетную запись для хранения BLOB-объектов Azure

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

Примечание.

В клиенте Azure AD B2C невозможно создать хранилище объектов BLOB. Этот ресурс необходимо создать в клиенте Microsoft Entra.

Чтобы разместить HTML-содержимое в хранилище BLOB-объектов, выполните следующие действия.

Войдите на портал Azure.
Если у вас есть доступ к нескольким арендаторам, щелкните значок Настройки в верхнем меню, чтобы переключиться на арендатора Microsoft Entra ID из меню Каталоги и подписки.
На портале Azure найдите и выберите учетные записи хранения
Выберите + Создать.
Выберите подписку для учетной записи хранения.
Создайте группу ресурсов или выберите существующую.
Введите уникальное имя учетной записи хранения для учетной записи хранения.
Выберите географический регион для учетной записи хранения.
Производительность может оставаться стандартной.
Избыточность может оставаться геоизбыточным хранилищем (GRS)
Нажмите кнопку "Проверка и создание" и подождите несколько секунд, чтобы идентификатор Microsoft Entra id выполнял проверку.
Выберите Создать, чтобы создать учетную запись для хранения. После завершения развертывания страница учетной записи хранения открывается автоматически или необходимо выбрать "Перейти к ресурсу".

2.1. Создание контейнера

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

В разделе "Параметры " в самом левом меню выберите "Конфигурация".
Включите анонимный доступ к BLOB-объектам.
Выберите Сохранить.
В разделе "Хранилище данных " в меню слева выберите "Контейнеры".
Выберите + Контейнер.
В поле "Имя" введите root. Имя может быть выбрано вами, например contoso, но в этом примере для простоты мы используем root.
Для уровня общедоступного доступа выберите Blob. Выбрав параметр Blob, вы разрешаете анонимный общедоступный доступ для чтения этого контейнера.
Щелкните Создать, чтобы создать контейнер.
Выберите корневой каталог , чтобы открыть новый контейнер.

2.2 Отправка пользовательских файлов содержимого страницы

Выберите Загрузить.
Щелкните значок папки рядом с Выберите файл.
Перейдите к customize-ui.html, который вы создали ранее в разделе настройки пользовательского интерфейса страницы.
Если вы хотите загрузить в вложенную папку, разверните "Дополнительно" и введите имя папки в поле папки для загрузки.
Выберите Загрузить.
Выберите объект blobcustomize-ui.html, который вы загрузили.
Справа от текстового поля URL-адреса щелкните значок копирования в буфер обмена , чтобы скопировать URL-адрес в буфер обмена.
В веб-браузере перейдите по скопированному URL-адресу, чтобы проверить доступность загруженного blob. Если он недоступен, например, если вы столкнетесь с ошибкой ResourceNotFound, убедитесь, что для типа доступа контейнера задан blob.

3. Настройка CORS

Настройте хранилище BLOB-объектов для общего доступа к ресурсам между источниками, выполнив следующие действия:

Перейдите к учетной записи хранилища.
В меню слева в разделе "Параметры" выберите пункт "Общий доступ к ресурсам" (CORS).
Для разрешенных источников введите https://your-tenant-name.b2clogin.com. Замените your-tenant-name именем клиента Azure AD B2C. Например: https://fabrikam.b2clogin.com. При вводе имени клиента используйте все строчные буквы.
Для разрешенных методов выберите оба GET и OPTIONS.
Для разрешенных заголовков введите звездочку (*).
Для открытых заголовков введите звездочку (*).
Для максимального возраста введите 200.
В верхней части страницы щелкните Сохранить.

3.1 Тестирование CORS

Убедитесь, что вы готовы, выполнив следующие действия:

Повторите шаг настройки CORS. Для разрешенных источников введите https://www.test-cors.org
Перейдите к www.test-cors.org
В поле "Удаленный URL-адрес" вставьте URL-адрес HTML-файла. Например: https://your-account.blob.core.windows.net/root/azure-ad-b2c/unified.html
Выберите Отправить запрос. Результат должен быть XHR status: 200. Если вы получаете сообщение об ошибке, убедитесь, что параметры CORS верны. Кроме того, может потребоваться очистить кэш браузера или открыть сеанс просмотра в частном режиме, нажав клавиши CTRL+SHIFT+P.

Узнайте больше о создании учетных записей хранения Azure и управлении ими.

4. Обновление потока пользователя

Если у вас есть доступ к нескольким клиентам, щелкните значок Настройки в верхнем меню, чтобы переключиться на клиент Azure AD B2C из меню Каталоги и подписки.
В портале Azure найдите и выберите Azure AD B2C.
В меню слева выберите потоки пользователей и выберите поток B2C_1_signupsignin1 пользователя.
Выберите макеты страниц, а затем в разделе "Единая регистрация" или "Вход" выберите "Да " для использования пользовательского содержимого страницы.
В поле URI пользовательской страницы введите URI для файлаcustom-ui.html, который вы записали ранее.
В верхней части страницы щелкните Сохранить.

5. Тестирование потока пользователя

В клиенте Azure AD B2C выберите пользовательские потоки и выберите пользовательский поток B2C_1_signupsignin1.
В верхней части страницы выберите "Запустить поток пользователя".
В области справа нажмите кнопку «Запустить поток пользователя».

Вы увидите страницу, аналогичную следующему примеру, с элементами, центрированными на основе созданного CSS-файла:

Веб-браузер с страницей для регистрации или входа с настраиваемыми элементами интерфейса

4. Изменение файла расширений

Чтобы настроить настройку пользовательского интерфейса, скопируйте ContentDefinition и его дочерние элементы из базового файла в файл расширений:

Откройте базовый файл политики. Например: SocialAndLocalAccounts/TrustFrameworkBase.xml. Этот базовый файл является одним из файлов политики, включенных в начальный пакет настраиваемой политики, который должен быть получен в предварительных требованиях, начало работы с настраиваемыми политиками.
Найдите и скопируйте все содержимое элемента ContentDefinitions .
Откройте файл расширения. Например, TrustFrameworkExtensions.xml. Найдите элемент BuildingBlocks . Если элемент не существует, добавьте его.
Вставьте все содержимое элемента ContentDefinitions , скопированного в качестве дочернего элемента BuildingBlocks .
Выполните поиск элемента ContentDefinition , содержащегося Id="api.signuporsignin" в скопированном XML-файле.

Измените значение LoadUri на URL-адрес HTML-файла, отправленного в хранилище. Например: https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html.

Ваша пользовательская политика должна выглядеть примерно как следующий фрагмент кода:

<BuildingBlocks>
  <ContentDefinitions>
    <ContentDefinition Id="api.signuporsignin">
      <LoadUri>https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html</LoadUri>
      <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
      <DataUri>urn:com:microsoft:aad:b2c:elements:unifiedssp:1.0.0</DataUri>
      <Metadata>
        <Item Key="DisplayName">Signin and Signup</Item>
      </Metadata>
    </ContentDefinition>
  </ContentDefinitions>
</BuildingBlocks>

Сохраните файл расширений.
Включение JavaScript

5. Отправка и проверка обновленной пользовательской политики

5.1 Отправка настраиваемой политики

Если у вас есть доступ к нескольким клиентам, щелкните значок Настройки в верхнем меню, чтобы переключиться на клиент Azure AD B2C из меню Каталоги и подписки.
Найдите и выберите Azure AD B2C.
В разделе "Политики" выберите Identity Experience Framework.
Выберите " Отправить настраиваемую политику".
Отправьте файл расширений, который вы ранее изменили.

5.2. Протестируйте настраиваемую политику, используя Запустить сейчас

Выберите отправленную политику, а затем нажмите кнопку "Выполнить".
Вы можете зарегистрироваться с помощью адреса электронной почты.

Настройка динамического URI пользовательского содержимого страницы

С помощью пользовательских политик Azure AD B2C можно отправить параметр в пути URL-адреса или строку запроса. Передавая параметр в конечную точку HTML, вы можете динамически изменять содержимое страницы. Например, можно изменить фоновое изображение страницы регистрации или входа в Azure AD B2C на основе параметра, передаваемого из веб-приложения или мобильного приложения. Параметр может быть любым сопоставителем утверждений, например идентификатор приложения, идентификатор языка или параметр пользовательской строки запроса, например campaignId.

Отправка параметров строки запроса

Чтобы отправить параметры строки запроса, добавьте элемент в ContentDefinitionParameters, как показано ниже.

<RelyingParty>
    <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
    <UserJourneyBehaviors>
    <ContentDefinitionParameters>
        <Parameter Name="campaignId">{OAUTH-KV:campaignId}</Parameter>
        <Parameter Name="lang">{Culture:LanguageName}</Parameter>
        <Parameter Name="appId">{OIDC:ClientId}</Parameter>
    </ContentDefinitionParameters>
    </UserJourneyBehaviors>
    ...
</RelyingParty>

В определении содержимого измените значение LoadUri на https://<app_name>.azurewebsites.net/home/unified. Пользовательская политика ContentDefinition должна выглядеть следующим фрагментом кода:

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://<app_name>.azurewebsites.net/home/unified</LoadUri>
  ...
</ContentDefinition>

Когда Azure AD B2C загружает страницу, она вызывает конечную точку веб-сервера:

https://<app_name>.azurewebsites.net/home/unified?campaignId=123&lang=fr&appId=00001111-aaaa-2222-bbbb-3333cccc4444

Идентификатор ресурса динамического содержимого страницы

Содержимое можно извлечь из разных мест на основе используемых параметров. В конечной точке с поддержкой CORS настройте структуру папок для размещения содержимого. Например, можно упорядочить содержимое в следующей структуре. Корневая папка/папка для каждого языка/ваши html-файлы. Например, URI настраиваемой страницы может выглядеть следующим образом:

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://contoso.blob.core.windows.net/{Culture:LanguageName}/myHTML/unified.html</LoadUri>
  ...
</ContentDefinition>

Azure AD B2C отправляет двух букв ISO-кода языка, например, fr для французского:

https://contoso.blob.core.windows.net/fr/myHTML/unified.html

Шаблоны с примерами

Примеры шаблонов для настройки пользовательского интерфейса можно найти здесь:

git clone https://github.com/azure-ad-b2c/html-templates

Этот проект содержит следующие шаблоны:

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

Клонируйте репозиторий на локальном компьютере. Выберите папку шаблона /AzureBlue, /MSA или /classic.
Отправьте все файлы из папки шаблона и папки /src в хранилище объектов Blob, как описано в предыдущих разделах.
Затем откройте каждый \*.html файл в папке шаблона. Затем замените все экземпляры https://login.microsoftonline.com URL-адресов на URL-адрес, который вы загрузили на шаге 2. Рассмотрим пример.

От:
```
https://login.microsoftonline.com/templates/src/fonts/segoeui.WOFF
```
Кому:
```
https://your-storage-account.blob.core.windows.net/your-container/templates/src/fonts/segoeui.WOFF
```
Сохраните \*.html файлы и загрузите их в хранилище объектов Blob.
Теперь измените политику, указывая на HTML-файл, как упоминалось ранее.
Если вы видите отсутствующие шрифты, изображения или CSS, проверьте ссылки в политике расширений и файлах \*.html .

Использование ресурсов фирменной символики компании в пользовательском HTML

Чтобы использовать ресурсы фирменной символики компании в пользовательском HTML, добавьте следующие теги за пределами тега <div id="api"> . Источник изображения заменен логотипом фонового изображения и баннера.

<img data-tenant-branding-background="true" />
<img data-tenant-branding-logo="true" alt="Company Logo" />

Узнайте, как включить клиентский код JavaScript.

Обратная связь

Была ли эта страница полезна?

Last updated on 2025-05-01

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

Настройка пользовательского интерфейса с помощью шаблонов HTML в Azure Active Directory B2C

Обзор пользовательского HTML и CSS

Настраиваемое содержимое HTML-страницы

Настройка страниц Azure AD B2C по умолчанию

Размещение содержимого страницы

Рекомендации по использованию пользовательского содержимого страницы

Локализация содержимого

Подход с одним шаблоном

Подход с несколькими шаблонами

Пошаговое руководство по пользовательскому содержимому страницы

Предпосылки

1. Создание HTML-содержимого

2. Создайте учетную запись для хранения BLOB-объектов Azure

2.1. Создание контейнера

2.2 Отправка пользовательских файлов содержимого страницы

3. Настройка CORS

3.1 Тестирование CORS

4. Обновление потока пользователя

5. Тестирование потока пользователя

4. Изменение файла расширений

5. Отправка и проверка обновленной пользовательской политики

5.1 Отправка настраиваемой политики

5.2. Протестируйте настраиваемую политику, используя Запустить сейчас

Настройка динамического URI пользовательского содержимого страницы

Отправка параметров строки запроса

Идентификатор ресурса динамического содержимого страницы

Шаблоны с примерами

Использование ресурсов фирменной символики компании в пользовательском HTML

Связанный контент

Обратная связь

Дополнительные ресурсы