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

Статья
01/11/2024

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

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

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

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

Чтобы удалить все ссылки на 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, а также параметр knownAuthorities, чтобы использовалось ваши имя личного домена и идентификатор клиента.

Следующий код 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 автоматически заполняет имя для входа в систему — пользователю нужно ввести только пароль.

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

Если вы используете настраиваемую политику, добавьте обязательное входящее утверждение, как описано в статье Настройка прямого входа в систему.
Создайте объект для сохранения 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.

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

Проверьте доменное имя внешнего поставщика удостоверений. Дополнительные сведения см. в статье Перенаправление входа в поставщика социальных сетей.
Создайте объект для сохранения extraQueryParameters и передайте этот объект методу MSAL loginPopup() .
```
let loginRequest = {
     extraQueryParameters: {domain_hint: 'facebook.com'}
}

myMSALObj.loginPopup(loginRequest);
```

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

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

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

Настройте язык.
Создайте объект для сохранения extraQueryParameters и передайте этот объект методу MSAL loginPopup() .
```
let loginRequest = {
     extraQueryParameters: {ui_locales: 'en-us'}
}

myMSALObj.loginPopup(loginRequest);
```

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

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

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

Настройте элемент ContentDefinitionParameters.
Создайте объект для сохранения extraQueryParameters и передайте этот объект методу MSAL loginPopup() .
```
let loginRequest = {
     extraQueryParameters: {campaignId: 'germany-promotion'}
}

myMSALObj.loginPopup(loginRequest);
```

Передача указания к маркеру идентификатора

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

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

В пользовательской политике определите технический профиль указания для маркера идентификатора.
Создайте объект для сохранения extraQueryParameters и передайте этот объект методу 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 Active Directory B2C проверяет, соответствует ли значение post_logout_redirect_uri одному из настроенных URI перенаправления приложения перед выполнением перенаправления. Если соответствующий URL-адрес ответа не был настроен для приложения, выводится сообщение об ошибке, и пользователь не перенаправляется.

Для поддержки URI перенаправления для защищенного выхода выполните следующие действия.

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

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

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

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

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

В приведенном ниже примере кода параметру allowRedirectInIframe присваивается значение true.

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.

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

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

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

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

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

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

Передача указания к маркеру идентификатора

Защита перенаправления выхода

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

Следующие шаги

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

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

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

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

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

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

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

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

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

Передача указания к маркеру идентификатора

Защита перенаправления выхода

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

Следующие шаги

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

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