Внедренный интерфейс регистрации или входа

Эта функция доступна только для пользовательских политик. Для действий по настройке выберите пользовательскую политику в предыдущем селекторе.

Для более простой регистрации или входа можно избежать перенаправления пользователей на отдельную страницу регистрации или входа или создания всплывающего окна. С помощью встроенного HTML-элемента <iframe> вы можете напрямую внедрить пользовательский интерфейс входа Azure AD B2C в ваше веб-приложение.

Интегрированный вход в веб-приложение

Элемент инлайн-фрейма <iframe> используется для встраивания документа в веб-страницу HTML5. Элемент iframe можно использовать для внедрения пользовательского интерфейса входа Azure AD B2C непосредственно в веб-приложение, как показано в следующем примере:

При использовании iframe следует учитывать следующее:

• Внедренная регистрация или вход поддерживают только локальные учетные записи. Большинство поставщиков идентификации в социальных сетях (например, Google и Facebook) блокируют отображение страниц входа во встроенных фреймах.
• Некоторые браузеры, такие как Safari или Chrome в режиме инкогнито, просматривают файлы cookie сеанса Azure AD B2C в iframe как сторонние файлы cookie. Эти браузеры могут блокировать или очищать эти файлы cookie, что может привести к менее оптимальному интерфейсу пользователя. Чтобы предотвратить эту проблему, убедитесь, что доменное имя приложения и домен Azure AD B2C имеют одинаковый источник. Чтобы использовать тот же источник, включите настраиваемые домены для клиента Azure AD B2C, а затем настройте веб-приложение с тем же источником. Например, приложение, размещенное в 'https://app.contoso.com' имеет тот же источник, что и Azure AD B2C, работающий в 'https://login.contoso.com'.

Предпосылки

• Выполните действия, описанные в разделе "Начало работы с настраиваемыми политиками" в Active Directory B2C.
• Включите пользовательские домены для политик.

Настройка политики

Чтобы пользовательский интерфейс Azure AD B2C был внедрен в iframe, политика Content-Security-Policy безопасности содержимого и параметры X-Frame-Options кадров должны быть включены в заголовки ответов HTTP Azure AD B2C. Эти заголовки позволяют пользовательскому интерфейсу Azure AD B2C выполняться под доменным именем приложения.

Добавьте элемент JourneyFraming в элемент RelyingParty . Элемент UserJourneyBehaviors должен соответствовать defaultUserJourney. Элемент UserJourneyBehaviors должен выглядеть следующим образом:

<!--
<RelyingParty>
  <DefaultUserJourney ReferenceId="SignUpOrSignIn" /> -->
  <UserJourneyBehaviors> 
    <JourneyFraming Enabled="true" Sources="https://somesite.com https://anothersite.com" /> 
  </UserJourneyBehaviors>
<!--
</RelyingParty> -->

Атрибут Sources содержит универсальный код ресурса (URI) веб-приложения. Добавьте пробел между URI. Каждый URI должен соответствовать следующим требованиям:

• Приложение должно доверять URI и владеть им.
• URI должен использовать схему https.
• Необходимо указать полный универсальный код ресурса (URI) веб-приложения. Подстановочные знаки не поддерживаются.
• Элемент JourneyFraming позволяет только URL-адресам сайта с двумя до семи символьных доменов верхнего уровня (TLD) выровняться с распространенными распознаваемыми TLD.

Кроме того, мы рекомендуем также заблокировать ваш собственный домен, чтобы его нельзя было внедрить в iframe, установив заголовки Content-Security-Policy и X-Frame-Options соответственно на страницах вашего приложения. Этот метод устраняет проблемы безопасности в старых браузерах, связанных с вложенным внедрением iframe.

Настройка пользовательского интерфейса политики

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

Следующий код CSS скрывает элементы HTML Azure AD B2C и настраивает размер панели для заполнения iframe.

div.social, div.divider {
    display: none;
}

div.api_container{
    padding-top:0;
}

.panel {
    width: 100%!important
}

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

Чтобы уведомить приложение о текущей странице Azure AD B2C, включите политику javaScript, а затем используйте HTML5 для публикации сообщений. Следующий код JavaScript отправляет сообщение о публикации в приложение с помощью signUp:

window.parent.postMessage("signUp", '*');

Настройка веб-приложения

Когда пользователь выбирает кнопку входа, веб-приложение создает запрос авторизации, который принимает пользователя в Интерфейс входа Azure AD B2C. После завершения входа Azure AD B2C возвращает токен идентификатора или код авторизации в настроенный в вашем приложении URI перенаправления.

Для поддержки внедренного входа атрибут iframe src указывает на контроллер входа, например /account/SignUpSignIn, который создает запрос авторизации и перенаправляет пользователя в политику Azure AD B2C.

<iframe id="loginframe" frameborder="0" src="/account/SignUpSignIn"></iframe>

После получения и проверки маркера идентификатора приложение завершает поток авторизации и распознает и доверяет пользователю. Так как поток авторизации происходит внутри iframe, необходимо перезагрузить главную страницу. После перезагрузки страницы кнопка входа изменится на "выйти" и имя пользователя отображается в пользовательском интерфейсе.

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

window.top.location.reload();

Добавить вход с помощью учетных записей социальных сетей в веб-приложение

Поставщики удостоверений социальных сетей блокируют страницы входа от отображения в встроенных кадрах. Вы можете использовать отдельную политику для социальных учетных записей или использовать одну политику для входа и регистрации с помощью локальных и социальных учетных записей. Затем можно использовать domain_hint параметр строки запроса. Параметр указания домена направляет пользователя прямо на страницу входа социального поставщика удостоверений личности.

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

URI перенаправления может совпадать с URI, используемым в iframe. Можно пропустить перезагрузку страницы.

Настройка одностраничного приложения

Для одностраничного приложения также требуется вторая HTML-страница входа, загружающаяся в iframe. На этой странице входа размещается код библиотеки проверки подлинности, который создает код авторизации и возвращает маркер.

Когда одностраничному приложению требуется токен доступа, используйте код JavaScript для получения токена доступа из iframe и из объекта, где он содержится.

Следующий код является примером, который выполняется на главной странице и вызывает код JavaScript iframe:

function getToken()
{
  var token = document.getElementById("loginframe").contentWindow.getToken("adB2CSignInSignUp");

  if (token === "LoginIsRequired")
    document.getElementById("tokenTextarea").value = "Please login!!!"
  else
    document.getElementById("tokenTextarea").value = token.access_token;
}

function logOut()
{
  document.getElementById("loginframe").contentWindow.policyLogout("adB2CSignInSignUp", "B2C_1A_SignUpOrSignIn");
}

Дальнейшие шаги

См. следующие статьи по этой теме:

• Настройка пользовательского интерфейса
• Справочник по элементу RelyingParty
• Включите вашу политику для JavaScript
• Примеры кода