Настройка параметров проверки подлинности в одностраничном приложении с помощью Azure AD B2C

Это важно

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

В этой статье описывается настройка и улучшение возможностей проверки подлинности Azure Active Directory B2C (Azure AD B2C) для одностраничного приложения (SPA).

Прежде чем начать, ознакомьтесь со следующей статьей: настройте проверку подлинности в примере веб-приложения.

Использование личного домена

Используя пользовательский домен, вы можете полностью оформить URL-адрес проверки подлинности в соответствии с вашим брендом. С точки зрения пользователя пользователи остаются в домене во время процесса проверки подлинности, а не перенаправляются в домен azure AD B2C b2clogin.com.

Чтобы удалить все ссылки на "b2c" в URL-адресе, вы также можете заменить имя клиента B2C, contoso.onmicrosoft.com, в URL-адресе запроса проверки подлинности идентификатором GUID вашего контрагента. Например, можно изменить https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ на https://account.contosobank.co.uk/<tenant ID GUID>/.

Чтобы использовать личный домен и идентификатор клиента в URL-адресе проверки подлинности, следуйте инструкциям в разделе "Включить пользовательские домены". Найдите объект конфигурации библиотеки проверки подлинности Майкрософт (MSAL) и измените центры и известныеauthorities , чтобы использовать имя личного домена и идентификатор клиента.

В следующем коде JavaScript показан объект конфигурации MSAL перед изменением:

const msalConfig = {
    auth: {
      ...
      authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/B2C_1_susi",
      knownAuthorities: ["fabrikamb2c.b2clogin.com"],
      ...
    },
  ...
}

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

const msalConfig = {
    auth: {
      ...
      authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/B2C_1_susi",
      knownAuthorities: ["custom.domain.com"],
      ...
    },
  ...
}

Предварительное заполнение имени входа

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

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

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

  2. Создайте объект для хранения login_hint и передайте этот объект в метод MSAL loginPopup().

    let loginRequest = {
    loginHint: "bob@contoso.com"
}

myMSALObj.loginPopup(loginRequest);

Предварительно выберите поставщика удостоверений

Если вы настроили процесс входа приложения, чтобы включить социальные учетные записи, такие как Facebook, LinkedIn или Google, вы можете указать domain_hint параметр. Этот параметр запроса содержит указание Azure AD B2C о социальном поставщике удостоверений, который следует использовать для входа в систему. Например, если приложение указывает domain_hint=facebook.com, поток входа переходит непосредственно на страницу входа в Facebook.

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

  1. Проверьте доменное имя внешнего поставщика удостоверений. Для получения дополнительных сведений см. Перенаправление входа к социальному провайдеру.

  2. Создайте объект для хранения экстраQueryParameters и передайте этот объект в метод MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {domain_hint: 'facebook.com'}
}

myMSALObj.loginPopup(loginRequest);

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

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

Чтобы задать предпочтительный язык, сделайте следующее:

  1. Настройте настройку языка.

  2. Создайте объект для хранения экстраQueryParameters и передайте этот объект в метод MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {ui_locales: 'en-us'}
}

myMSALObj.loginPopup(loginRequest);

Передача настраиваемого параметра строки запроса

С помощью настраиваемых политик можно передать настраиваемый параметр строки запроса. Хорошим примером использования является динамическое изменение содержимого страницы.

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

  1. Настройте элемент ContentDefinitionParameters .

  2. Создайте объект для хранения экстраQueryParameters и передайте этот объект в метод MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {campaignId: 'germany-promotion'}
}

myMSALObj.loginPopup(loginRequest);

Передайте подсказку по токену идентификатора

Приложение проверяющей стороны может отправить входящий веб-токен JSON (JWT) в рамках запроса авторизации OAuth2. Входящий маркер — это указание о пользователе или запросе авторизации. Azure AD B2C проверяет токен, а затем извлекает утверждение.

Чтобы включить идентификационный токен в запрос аутентификации, сделайте следующее:

  1. В пользовательской политике определите технический профиль указания маркера идентификатора.

  2. Создайте объект для хранения экстраQueryParameters и передайте этот объект в метод MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {id_token_hint: 'id-token-hint-value'}
}

myMSALObj.loginPopup(loginRequest);

Обезопасьте перенаправление после выхода

После выхода пользователь перенаправляется в URI, указанный в параметре post_logout_redirect_uri , независимо от URL-адресов ответа, указанных для приложения. Однако если действительный id_token_hint передается, а маркер запрашиваемого идентификатора в запросах выхода включен, Azure AD B2C проверяет, соответствует ли значение post_logout_redirect_uri одного из настроенных URI перенаправления приложения перед выполнением перенаправления. Если для приложения не настроен соответствующий URL-адрес ответа, отображается сообщение об ошибке и пользователь не перенаправляется.

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

  1. Создайте глобальную доступную переменную для хранения id_token.

    let id_token = "";

  2. В функции MSAL handleResponse синтаксический анализ id_token объекта authenticationResult в id_token переменную.

    function handleResponse(response) {
    if (response !== null) {
        setAccount(response.account);
        id_token = response.idToken;
    } else {
        selectAccount();
    }
}

  3. signOut В функции добавьте id_token_hint параметр в объект logoutRequest.

    function signOut() {
    const logoutRequest = {
        postLogoutRedirectUri: msalConfig.auth.redirectUri,
        //set id_token_hint to the id_token value
        idTokenHint : id_token,
        mainWindowRedirectUri: msalConfig.auth.redirectUri
    };
    myMSALObj.logoutPopup(logoutRequest);
}

В приведенном выше примере post_logout_redirect_uri, переданные в запрос выхода, будут иметь следующий формат: https://your-app.com/ Этот URL-адрес необходимо добавить в URL-адрес ответа регистрации приложений.

Включение единого выхода

Единый выход в Azure AD B2C использует выход с интерфейсным каналом OpenId Connect для отправки запросов на выход для всех приложений, в которые пользователь вошел через Azure AD B2C.

Эти запросы на выход из Azure AD B2C выполняются на скрытом Iframe. Iframes делают HTTP-запросы ко всем конечным точкам выхода внешнего канала, зарегистрированным для приложений, которые Azure AD B2C записал как вход.

Конечная точка выхода для каждого приложения должна вызывать метод msAL logout(). Кроме того, необходимо явно настроить MSAL для запуска в Iframe в этом сценарии, задав для этого параметра allowRedirectInIframetrueзначение .

В следующем примере кода задано allowRedirectInIframetrueзначение :

const msalConfig = {
    auth: {
        clientId: "enter_client_id_here",
        .....
    },
    cache: {
        cacheLocation: "..",
        ....
    },
    system: {
        allowRedirectInIframe: true
    };
}

async function logoutSilent(MSAL) {
   return MSAL.logout({
      onRedirectNavigate: (url) => {
         return false;
       }

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

Дополнительные сведения о параметрах конфигурацииMSAL.js.

  • Last updated on