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

2025-05-05

Это важно

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

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

Предпосылки

Ознакомьтесь со статьей "Настройка проверки подлинности в spa Angular " или включение проверки подлинности в собственном SPA Angular.

Настройте ваше одностраничное приложение, чтобы пользователи могли войти в систему с помощью MSAL.js двумя способами:

Всплывающее окно: проверка подлинности происходит во всплывающем окне, а состояние приложения сохраняется. Используйте этот подход, если вы не хотите, чтобы пользователи отойти от страницы приложения во время проверки подлинности. Однако в Internet Explorer существуют известные проблемы со всплывающими окнами.
- Чтобы войти с помощью всплывающих окон, в src/app/app.component.ts классе используйте loginPopup метод.
- В классе src/app/app.module.ts задайте атрибут interactionType значением InteractionType.Popup.
- Чтобы выйти из всплывающих окон, в src/app/app.component.ts классе используйте logoutPopup метод. Вы также можете настроить logoutPopup перенаправление главного окна на другую страницу, например домашнюю страницу или страницу входа, после завершения выхода, передав mainWindowRedirectUri в рамках запроса.
Перенаправление. Пользователь перенаправляется в Azure AD B2C, чтобы завершить поток проверки подлинности. Используйте этот подход, если у пользователей есть ограничения браузера или политики, в которых всплывающие окна отключены.
- Чтобы войти с помощью перенаправления, в классе src/app/app.component.ts используйте метод loginRedirect.
- В классе src/app/app.module.ts задайте атрибут interactionType значением InteractionType.Redirect.
- Чтобы выйти с перенаправлением, в src/app/app.component.ts классе используйте logoutRedirect метод. Настройте URI-адрес для перенаправления после выхода, задав параметр postLogoutRedirectUri. Вы должны добавить этот URI как URI перенаправления при регистрации приложения.

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

Всплывающее окно
Перенаправление

//src/app/app.component.ts
login() {
  if (this.msalGuardConfig.authRequest){
    this.authService.loginPopup({...this.msalGuardConfig.authRequest} as PopupRequest);
  } else {
    this.authService.loginPopup();
  }
}

logout() { 
  this.authService.logoutPopup({
    mainWindowRedirectUri: '/',
  });
}

//src/app/app.component.ts
login() {
  if (this.msalGuardConfig.authRequest){
    this.authService.loginRedirect({...this.msalGuardConfig.authRequest} as RedirectRequest);
  } else {
    this.authService.loginRedirect();
  }
}

logout() { 
  this.authService.logoutRedirect({
    postLogoutRedirectUri: 'http://localhost:4200'
  });
}

Библиотека MSAL Angular имеет три потока входа: интерактивный вход (где пользователь выбирает кнопку входа), MSAL Guard и MSAL Interceptor. Конфигурации MSAL Guard и перехватчика MSAL вступают в силу, когда пользователь пытается получить доступ к защищенному ресурсу без действительного токена доступа. В таких случаях библиотека MSAL заставляет пользователя входить.

В следующих примерах показано, как настроить MSAL Guard и MSAL Interceptor для входа с использованием всплывающего окна или перенаправления:

Всплывающее окно
Перенаправление

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
    }
  },
  {
    interactionType: InteractionType.Popup,
    protectedResourceMap: new Map([
      [protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes]
    ])
  })

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
    }
  },
  {
    interactionType: InteractionType.Redirect,
    protectedResourceMap: new Map([
      [protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes]
    ])
  })

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

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

Если вы используете настраиваемую политику, добавьте требуемое входное утверждение, как описано в разделе «Настройка прямого входа».
Создайте или используйте существующий объект конфигурации MSAL PopupRequest или RedirectRequest.
Задайте атрибут loginHint с соответствующей подсказкой для входа.

В следующих фрагментах кода показано, как передать параметр подсказки для входа. Они используют bob@contoso.com в качестве значения атрибута.

Всплывающее окно
Перенаправление

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.loginHint = "bob@contoso.com"

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      loginHint: "bob@contoso.com"
    }
  },

// src/app/app.component.ts
let authRequestConfig: RedirectRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as RedirectRequest
}

authRequestConfig.loginHint = "bob@contoso.com"

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      loginHint: "bob@contoso.com"
    }
  },

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

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

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

Проверьте доменное имя внешнего поставщика удостоверений. Для получения дополнительных сведений см. Перенаправление входа к социальному провайдеру.
Создайте или используйте существующий объект конфигурации MSAL PopupRequest или RedirectRequest.
domainHint Задайте атрибут с соответствующим указанием домена.

В следующих фрагментах кода показано, как передать параметр указания домена. Они используют facebook.com в качестве значения атрибута.

Всплывающее окно
Перенаправление

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.domainHint = "facebook.com";

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      domainHint: "facebook.com"
    }
  },

// src/app/app.component.ts
let authRequestConfig: RedirectRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as RedirectRequest
}

authRequestConfig.domainHint = "facebook.com";

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      domainHint: "facebook.com"
    }
  },

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

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

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

Настройка языка.
Используйте существующий PopupRequest объект конфигурации RedirectRequest MSAL или создайте новый с атрибутами extraQueryParameters.
ui_locales Добавьте параметр с соответствующим кодом языка к атрибутамextraQueryParameters.

В следующих фрагментах кода показано, как передать параметр указания домена. Они используют es-es в качестве значения атрибута.

Всплывающее окно
Перенаправление

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"ui_locales" : "es-es"};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

// src/app/app.component.ts
let authRequestConfig: RedirectRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as RedirectRequest
}

authRequestConfig.extraQueryParameters = {"ui_locales" : "es-es"};

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

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

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

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

Настройте элемент ContentDefinitionParameters .
Используйте существующий PopupRequest объект конфигурации RedirectRequest MSAL или создайте новый с атрибутами extraQueryParameters.
Добавьте настраиваемый параметр строки запроса, например campaignId. Задайте значение параметра.

В следующих фрагментах кода показано, как передать настраиваемый параметр строки запроса. Они используют germany-promotion в качестве значения атрибута.

Всплывающее окно
Перенаправление

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"campaignId": 'germany-promotion'}

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

// src/app/app.component.ts
let authRequestConfig: RedirectRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as RedirectRequest
}

authRequestConfig.extraQueryParameters = {"campaignId": 'germany-promotion'}

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"campaignId" : "germany-promotion"}
    }
  },

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

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

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

В пользовательской политике определите технический профиль указания маркера идентификатора.
Используйте существующий PopupRequest объект конфигурации RedirectRequest MSAL или создайте новый с атрибутами extraQueryParameters.
id_token_hint Добавьте параметр с соответствующей переменной, в которой хранится маркер идентификатора.

В следующих фрагментах кода показано, как задать подсказку токена идентификатора.

Всплывающее окно
Перенаправление

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"id_token_hint": idToken};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"id_token_hint" : idToken}
    }
  },

// src/app/app.component.ts
let authRequestConfig: RedirectRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as RedirectRequest
}

authRequestConfig.extraQueryParameters = {"id_token_hint": idToken};

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"id_token_hint" : idToken}
    }
  },

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

Используя пользовательский домен, вы можете полностью оформить 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 и измените src/app/auth-config.ts и 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"],
      ...
    },
  ...
}

Настройка логирования

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

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

Ошибка: что-то пошло не так, и возникла ошибка. Этот уровень используется для отладки и выявления проблем.
Предупреждение: не обязательно произошла ошибка или сбой, но информация предназначена для диагностики и выявления проблем.
Сведения: MSAL ведет журнал событий, предназначенных исключительно для информационных целей и не обязательно для отладки.
Подробные сведения. Это уровень по умолчанию. MSAL регистрирует полные сведения о поведении библиотеки.

По умолчанию средство ведения журнала MSAL не записывает персональные или организационные данные. Библиотека предоставляет возможность включить ведение журнала персональных и организационных данных, если вы решите это сделать.

Чтобы настроить ведение журнала Angular, в src/app/auth-config.ts настройте следующие ключи:

loggerCallback — функция обратного вызова средства ведения журнала.
logLevel позволяет указать уровень ведения журнала. Возможные значения: Error, Warning, Infoи Verbose.
piiLoggingEnabled позволяет вводить персональные данные. Возможные значения: true или false.

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

export const msalConfig: Configuration = {
  ...
  system: {
    loggerOptions: {
        loggerCallback: (logLevel, message, containsPii) => {  
            console.log(message);
          },
          logLevel: LogLevel.Verbose,
          piiLoggingEnabled: false
      }
  }
  ...
}

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

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

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

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

Предпосылки

Поведение входа и выхода

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