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

Это важно

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

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

Фирменная символика и настройка пользовательского интерфейса, который 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, например, на этой html-странице <div id="api"></div>.

<!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, учетная запись Майкрософт или локальные учетные записи. Классический, океанский синий и сланцевый серый.
Вход (только) Страница входа также называется выбором поставщика идентификации. Он обрабатывает вход пользователя с помощью локальной учетной записи или федеративных поставщиков удостоверений. Используйте эту страницу, чтобы разрешить вход без возможности регистрации. Например, прежде чем пользователь сможет изменить свой профиль. Классический, океанский синий и сланцевый серый.
Самоутвержденный Большинство взаимодействий в Azure AD B2C, где пользователь по ожиданиям предоставляет данные, самостоятельно подтверждаются. Например, страница регистрации, страница входа или страница сброса пароля. Используйте этот шаблон в качестве пользовательского содержимого страницы для страницы регистрации учетной записи социальной сети, страницы регистрации локальной учетной записи, страницы входа в локальную учетную запись, сброс пароля, изменение профиля, блокировка страницы и многое другое. Страница для ввода данных может содержать различные элементы управления, такие как текстовое поле, поле для ввода пароля, радиокнопка, раскрывающийся список с единичным выбором и флажки для множественного выбора. Классический, океанский синий и сланцевый серый.
Многофакторная проверка подлинности На этой странице пользователи могут проверить свои номера телефонов (с помощью текста или голоса) во время регистрации или входа. Классический, океанский синий и сланцевый серый.
Ошибка Эта страница отображается при обнаружении исключения или ошибки. Классический, океанский синий и сланцевый серый.

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

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

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

  • Используйте абсолютный URL-адрес при включении внешних ресурсов, таких как мультимедиа, CSS и JavaScript-файлы в HTML-файл.

  • Используя макет страницы версии 1.2.0 и более поздних версий, можно добавить data-preload="true" атрибут в теги HTML для управления порядком загрузки css и JavaScript. С помощью data-preload="true" страница создается полностью перед показом пользователю. Этот атрибут помогает предотвратить "мерцание" страницы путем предварительной загрузки CSS-файла, без отображения пользователю нестилизованного HTML-кода. В следующем фрагменте кода HTML показано использование тега data-preload .

    <link href="https://path-to-your-file/sample.css" rel="stylesheet" type="text/css" data-preload="true"/>

  • Мы рекомендуем начать с содержимого страницы по умолчанию и развивать его далее.

  • Вы можете включить JavaScript в пользовательское содержимое.

  • Поддерживаемые версии браузера:

    • Internet Explorer 11, 10 и Microsoft Edge
    • Ограниченная поддержка Internet Explorer 9 и 8
    • Google Chrome 42.0 и более поздних версий
    • Mozilla Firefox 38.0 и более поздних версий
    • Safari для iOS и macOS версии 12 и выше

  • Из-за ограничений безопасности Azure AD B2C не поддерживает HTML-элементы frame, iframe или form.

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

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

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

Во время загрузки страницы 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 передать параметр OpenID Connect ui_locales в конечную точку. Сервер содержимого может использовать этот параметр для предоставления 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

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

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

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

Предпосылки

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

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

  1. Скопируйте следующий фрагмент HTML. HTML5 является хорошо сформированным с пустым элементом с именем <div id="api"></div>, расположенным внутри тегов <body>. Этот элемент указывает, где необходимо вставить содержимое Azure AD B2C.

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

  2. Вставка скопированного фрагмента в текстовом редакторе

  3. Используйте 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 ;
}

  4. Сохраните файл как customize-ui.html.

Примечание.

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

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

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

Примечание.

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

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

  1. Войдите на портал Azure.
  2. Если у вас есть доступ к нескольким тенантам, выберите значок Settings в верхнем меню, чтобы переключиться на тенант Microsoft Entra ID из меню Каталоги + подписки.
  3. На портале Azure найдите и выберите учетные записи Storage
  4. Нажмите кнопку +Создать.
  5. Выберите подписку для учетной записи хранения.
  6. Создайте группу ресурсов или выберите существующую.
  7. Введите уникальное имя учетной записи хранения для учетной записи хранения.
  8. Выберите географический регион для учетной записи хранения.
  9. Производительность может оставаться стандартной.
  10. Избыточность может оставаться геоизбыточным хранилищем (GRS)
  11. Выберите Review + create и подождите несколько секунд, пока Microsoft Entra ID запустит проверку.
  12. Нажмите кнопку "Создать", чтобы создать учетную запись хранения. После завершения развертывания страница учетной записи хранения открывается автоматически или необходимо выбрать "Перейти к ресурсу".

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Откройте базовый файл политики. Например: SocialAndLocalAccounts/TrustFrameworkBase.xml. Этот базовый файл является одним из файлов политики, включенных в начальный пакет настраиваемой политики, который должен быть получен в предварительных требованиях, начало работы с настраиваемыми политиками.

  2. Найдите и скопируйте все содержимое элемента ContentDefinitions .

  3. Откройте файл расширения. Например, TrustFrameworkExtensions.xml. Найдите элемент BuildingBlocks . Если элемент не существует, добавьте его.

  4. Вставьте все содержимое элемента ContentDefinitions , скопированного в качестве дочернего элемента BuildingBlocks .

  5. Выполните поиск элемента ContentDefinition , содержащегося Id="api.signuporsignin" в скопированном XML-файле.

  6. Измените значение 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>

  7. Сохраните файл расширений.

  8. Включение JavaScript

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

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

  1. Если у вас есть доступ к нескольким тенантам, выберите значок Settings в верхнем меню, чтобы переключиться на тенант AZURE AD B2C из меню Директории + подписки.
  2. Найдите и выберите Azure AD B2C.
  3. В разделе "Политики" выберите Identity Experience Framework.
  4. Выберите " Отправить настраиваемую политику".
  5. Отправьте файл расширений, который вы ранее изменили.

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

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

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

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

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

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

  1. Клонируйте репозиторий на локальном компьютере. Выберите папку /AzureBlue, /MSA или /classic.

  2. Отправьте все файлы, находящиеся под папкой шаблона и папкой /src, в хранилище объектов Blob, как описано в предыдущих разделах.

  3. Затем откройте каждый \*.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

  4. Сохраните \*.html файлы и отправьте их в хранилище Blob.

  5. Теперь измените политику, указывая на HTML-файл, как упоминалось ранее.

  6. Если вы видите отсутствующие шрифты, изображения или CSS, проверьте ссылки в политике расширений и файлах \*.html .

Зависимость от Bootstrap в примерах шаблонов

Примеры шаблонов используют Bootstrap 3.3.5, полученные из официального Bootstrap CDN. Эта версия проверена и протестирована с помощью Azure AD B2C.

Шаблоны используют следующий URL CDN для CSS Bootstrap:

https://cdn.jsdelivr.net/npm/bootstrap@3.3.5/dist/css/bootstrap.min.css

Конфигурация по умолчанию в HTML-файлах шаблона содержит элемент ссылки, аналогичный следующему примеру:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.5/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

Официальные сведения о загрузке bootstrap 3.3.5 и сведения о CDN см. в разделе "Начальная загрузка 3.3".

Замена ссылки CDN

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

Это важно

Шаблоны проверяются непосредственно на совместимость с Bootstrap версии 3.3.5. Обновление, понижение или иное изменение версии Bootstrap может привести к проблемам совместимости стилей, схемы или компонентов.

Если вы изменяете версию Bootstrap, вы несете ответственность за проведение регрессионного тестирования для проверки того, что ваши настраиваемые шаблоны корректно работают с Azure AD B2C. Сохраните проверенную версию, если вы не выполнили соответствующее тестирование.

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

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

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

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

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

  • Last updated on