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

Статья
01/11/2024

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

Предварительные требования

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

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

Всплывающее окно: проверка подлинности происходит во всплывающем окне, при этом состояние приложения сохраняется. Используйте этот подход, если вы не хотите, чтобы пользователи уходили со страницы вашего приложения во время проверки подлинности. Однако существуют известные проблемы с всплывыми окнами в Интернете Обозреватель.
- Чтобы войти в систему с помощью всплывающих окон, в классе 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 Interceptor вступают в силу, когда пользователь пытается получить доступ к защищенному ресурсу без действительного маркера доступа. В таких случаях библиотека 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 автоматически заполняет имя для входа в систему — пользователю нужно ввести только пароль.

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

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

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

Проверьте доменное имя внешнего поставщика удостоверений. Дополнительные сведения см. в статье Перенаправление входа в поставщика социальных сетей.
Создайте или используйте существующий объект конфигурации PopupRequest или RedirectRequest MSAL.
Установите атрибут 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 Web Token (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-адрес проверки подлинности. С точки зрения пользователя, пользователи остаются в вашем домене во время процесса аутентификации, а не перенаправляются на доменное имя 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-адресе проверки подлинности, следуйте инструкциям в разделе Включение пользовательских доменов. Откройте объект конфигурации src/app/auth-config.ts 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"],
      ...
    },
  ...
}

Настройка журнала

Библиотека 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

Предварительные требования

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

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

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

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

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

Настройка журнала

Дальнейшие действия

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

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

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

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

Предварительные требования

Алгоритм действий при входе и выходе

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

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

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

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

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

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

Настройка журнала

Дальнейшие действия

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

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