Configurar opções de autenticação numa aplicação Angular com o Azure Active Directory B2C

  • Artigo

Este artigo descreve como pode personalizar e melhorar a experiência de autenticação do Azure Active Directory B2C (Azure AD B2C) para a sua Angular aplicação de página única (SPA).

Pré-requisitos

Familiarize-se com o artigo Configurar a autenticação num Angular SPA ou Ativar a autenticação no seu próprio Angular SPA.

Comportamento de início de sessão e de início de sessão

Pode configurar a sua aplicação de página única para iniciar sessão de utilizadores com MSAL.js de duas formas:

  • Janela de pop-up: a autenticação ocorre numa janela de pop-up e o estado da aplicação é preservado. Utilize esta abordagem se não quiser que os utilizadores se afastem da página da aplicação durante a autenticação. No entanto, existem problemas conhecidos com janelas de pop-up no Internet Explorer.
    • Para iniciar sessão com janelas de pop-up, na src/app/app.component.ts classe , utilize o loginPopup método .
    • src/app/app.module.ts Na classe , defina o interactionType atributo como InteractionType.Popup.
    • Para terminar sessão com janelas de pop-up, na src/app/app.component.ts classe , utilize o logoutPopup método . Também pode configurar logoutPopup para redirecionar a janela principal para uma página diferente, como a home page ou a página de início de sessão, depois de terminar sessão ser concluída ao passar mainWindowRedirectUri como parte do pedido.
  • Redirecionamento: o utilizador é redirecionado para Azure AD B2C para concluir o fluxo de autenticação. Utilize esta abordagem se os utilizadores tiverem restrições ou políticas de browser em que as janelas de pop-up estão desativadas.
    • Para iniciar sessão com o redirecionamento, na src/app/app.component.ts classe , utilize o loginRedirect método .
    • src/app/app.module.ts Na classe , defina o interactionType atributo como InteractionType.Redirect.
    • Para terminar sessão com o redirecionamento, na src/app/app.component.ts classe , utilize o logoutRedirect método . Configure o URI para o qual deve redirecionar após o fim de sessão, definindo postLogoutRedirectUri. Deve adicionar este URI como um URI de redirecionamento no registo da aplicação.

O exemplo seguinte demonstra como iniciar sessão e terminar sessão:

//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: '/',
  });
}

A biblioteca de Angular MSAL tem três fluxos de início de sessão: início de sessão interativo (onde um utilizador seleciona o botão de início de sessão), MSAL Guard e Intercetor MSAL. As configurações do MSAL Guard e do Intercetor MSAL têm efeito quando um utilizador tenta aceder a um recurso protegido sem um token de acesso válido. Nestes casos, a biblioteca MSAL força o utilizador a iniciar sessão.

Os exemplos seguintes demonstram como configurar o MSAL Guard e o Intercetor MSAL para iniciar sessão com uma janela de pop-up ou redirecionamento:

// 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]
    ])
  })

Pré-preencher o nome de início de sessão

Durante um percurso de início de sessão do utilizador, a sua aplicação poderá visar um utilizador específico. Quando uma aplicação destina um utilizador, pode especificar no pedido de autorização o login_hint parâmetro de consulta com o nome de início de sessão do utilizador. Azure AD B2C preenche automaticamente o nome de início de sessão e o utilizador tem de fornecer apenas a palavra-passe.

Para pré-preencher o nome de início de sessão, faça o seguinte:

  1. Se utilizar uma política personalizada, adicione a afirmação de entrada necessária, conforme descrito em Configurar o início de sessão direto.
  2. Criar ou utilizar um objeto de configuração MSAL ou RedirectRequest existentePopupRequest.
  3. Defina o loginHint atributo com a sugestão de início de sessão correspondente.

Os fragmentos de código seguintes demonstram como transmitir o parâmetro de sugestão de início de sessão. Utilizam bob@contoso.com como valor de atributo.

// 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"
    }
  },

Pré-selecionar um fornecedor de identidade

Se tiver configurado o percurso de início de sessão para que a sua aplicação inclua contas sociais, como o Facebook, LinkedIn ou Google, pode especificar o domain_hint parâmetro . Este parâmetro de consulta fornece uma sugestão para Azure AD B2C sobre o fornecedor de identidade social que deve ser utilizado para iniciar sessão. Por exemplo, se a aplicação especificar domain_hint=facebook.com, o fluxo de início de sessão vai diretamente para a página de início de sessão do Facebook.

Para redirecionar os utilizadores para um fornecedor de identidade externo, faça o seguinte:

  1. Verifique o nome de domínio do seu fornecedor de identidade externa. Para obter mais informações, veja Redirecionar o início de sessão para um fornecedor de redes sociais.
  2. Criar ou utilizar um objeto de configuração MSAL ou RedirectRequest existentePopupRequest.
  3. Defina o domainHint atributo com a sugestão de domínio correspondente.

Os fragmentos de código seguintes demonstram como transmitir o parâmetro de sugestão de domínio. Utilizam facebook.com como valor de atributo.

// 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"
    }
  },

Especificar o idioma da IU

A personalização de idiomas no Azure AD B2C permite ao seu fluxo de utilizador acomodar uma variedade de idiomas de acordo com as necessidades dos seus clientes. Para obter mais informações, veja Personalização de idiomas.

Para definir o idioma preferencial, faça o seguinte:

  1. Configurar a Personalização de idiomas.
  2. Criar ou utilizar um objeto de configuração MSAL ou RedirectRequest existente PopupRequest com extraQueryParameters atributos.
  3. Adicione o ui_locales parâmetro com o código de idioma correspondente aos extraQueryParameters atributos.

Os fragmentos de código seguintes demonstram como transmitir o parâmetro de sugestão de domínio. Utilizam es-es como valor de atributo.

// 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"}
    }
  },

Transmitir um parâmetro de cadeia de consulta personalizado

Com as políticas personalizadas, pode transmitir um parâmetro de cadeia de consulta personalizado. Um bom exemplo de caso de utilização é quando pretende alterar dinamicamente o conteúdo da página.

Para transmitir um parâmetro de cadeia de consulta personalizado, faça o seguinte:

  1. Configure o elemento ContentDefinitionParameters .
  2. Criar ou utilizar um objeto de configuração MSAL ou RedirectRequest existente PopupRequest com extraQueryParameters atributos.
  3. Adicione o parâmetro de cadeia de consulta personalizada, como campaignId. Defina o valor do parâmetro.

Os fragmentos de código seguintes demonstram como transmitir um parâmetro de cadeia de consulta personalizado. Utilizam germany-promotion como valor de atributo.

// 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"}
    }
  },

Transmitir uma sugestão de token de ID

Uma aplicação de entidade confiadora pode enviar um JSON Web Token (JWT) de entrada como parte do pedido de autorização OAuth2. O token de entrada é uma sugestão sobre o utilizador ou o pedido de autorização. Azure AD B2C valida o token e, em seguida, extrai a afirmação.

Para incluir uma sugestão de token de ID no pedido de autenticação, faça o seguinte:

  1. Na sua política personalizada, defina o perfil técnico de uma sugestão de token de ID.
  2. Criar ou utilizar um objeto de configuração MSAL ou RedirectRequest existente PopupRequest com extraQueryParameters atributos.
  3. Adicione o id_token_hint parâmetro com a variável correspondente que armazena o token de ID.

Os fragmentos de código seguintes demonstram como definir uma sugestão de token de ID:

// 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}
    }
  },

Utilizar um domínio personalizado

Ao utilizar um domínio personalizado, pode marcar totalmente o URL de autenticação. Do ponto de vista do utilizador, os utilizadores permanecem no seu domínio durante o processo de autenticação, em vez de serem redirecionados para o Azure AD B2C b2clogin.com nome de domínio.

Para remover todas as referências a "b2c" no URL, também pode substituir o nome do inquilino B2C, contoso.onmicrosoft.com, no URL do pedido de autenticação pelo GUID do ID do inquilino. Por exemplo, pode mudar https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ para https://account.contosobank.co.uk/<tenant ID GUID>/.

Para utilizar o seu domínio personalizado para o seu ID de inquilino no URL de autenticação, siga as orientações em Ativar domínios personalizados. Abra o src/app/auth-config.ts objeto de configuração MSAL e altere authorities e knownAuthorities utilize o seu nome de domínio personalizado e o ID de inquilino.

O Seguinte JavaScript mostra o objeto de configuração MSAL antes da alteração:

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

O seguinte JavaScript mostra o objeto de configuração MSAL após a alteração:

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

Configurar o registo

A biblioteca MSAL gera mensagens de registo que podem ajudar a diagnosticar problemas. A aplicação pode configurar o registo. A aplicação também pode dar-lhe controlo personalizado sobre o nível de detalhe e se os dados pessoais e organizacionais são registados.

Recomendamos que crie uma chamada de retorno de registo MSAL e forneça uma forma de os utilizadores submeterem registos quando tiverem problemas de autenticação. O MSAL fornece estes níveis de detalhes de registo:

  • Erro: ocorreu um erro e foi gerado um erro. Este nível é utilizado para depurar e identificar problemas.
  • Aviso: não houve necessariamente um erro ou falha, mas as informações destinam-se a diagnósticos e a identificar problemas.
  • Informações: o MSAL regista eventos que se destinam a fins informativos e não necessariamente para depuração.
  • Verboso: este é o nível predefinido. O MSAL regista todos os detalhes do comportamento da biblioteca.

Por predefinição, o logger MSAL não captura dados pessoais ou organizacionais. A biblioteca dá-lhe a opção de ativar o registo de dados pessoais e organizacionais se decidir fazê-lo.

Para configurar o registo Angular, em src/app/auth-config.ts, configure as seguintes chaves:

  • loggerCallback é a função de chamada de retorno do logger.
  • logLevel permite-lhe especificar o nível de registo. Valores possíveis: Error, , WarningInfoe Verbose.
  • piiLoggingEnabled ativa a entrada de dados pessoais. Valores possíveis: true ou false.

O fragmento de código seguinte demonstra como configurar o registo MSAL:

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

Passos seguintes