Compartilhar via

Configurar opções de autenticação em um aplicativo Angular usando o Azure Active Directory B2C

Importante

A partir de 1º de maio de 2025, o Azure AD B2C não estará mais disponível para compra para novos clientes. Saiba mais em nossas perguntas frequentes.

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

Pré-requisitos

Familiarize-se com o artigo Configurar a autenticação em um SPA Angular ou habilitar a autenticação em seu próprio SPA Angular.

Comportamento de entrada e saída

Você pode configurar seu aplicativo de página única para conectar usuários com MSAL.js de duas maneiras:

  • Janela pop-up: a autenticação ocorre em uma janela pop-up e o estado do aplicativo é preservado. Use essa abordagem se você não quiser que os usuários se afastem da página do aplicativo durante a autenticação. No entanto, há problemas conhecidos com janelas pop-up no Internet Explorer.
    • Para fazer login usando janelas pop-up, use o método na classe src/app/app.component.tsloginPopup.
    • Na src/app/app.module.ts classe, defina o atributo interactionType para InteractionType.Popup.
    • Para sair do serviço com janelas pop-up, na classe src/app/app.component.ts, use o método logoutPopup. Você também pode configurar logoutPopup para redirecionar a janela principal para uma página diferente, como a home page ou a página de entrada, depois que a saída for concluída passando mainWindowRedirectUri como parte da solicitação.
  • Redirecionamento: o usuário é redirecionado para o Azure AD B2C para concluir o fluxo de autenticação. Use essa abordagem se os usuários tiverem restrições ou políticas de navegador em que as janelas pop-up estão desabilitadas.
    • Para entrar com redirecionamento, na classe src/app/app.component.ts, use o método loginRedirect.
    • Na src/app/app.module.ts classe, defina o atributo interactionType para InteractionType.Redirect.
    • Para sair do serviço por meio de redirecionamento, na classe src/app/app.component.ts, use o método logoutRedirect. Configure o URI para o qual ele deve redirecionar após o logout definindo postLogoutRedirectUri. Você deve adicionar esse URI como um URI de redirecionamento no registro do aplicativo.

O exemplo a seguir demonstra como entrar e sair:

//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 MSAL Angular tem três fluxos de autenticação: login interativo (em que um usuário seleciona o botão de login), MSAL Guard e MSAL Interceptor. As configurações do MSAL Guard e do Interceptador MSAL entrarão em vigor quando um usuário tenta acessar um recurso protegido sem um token de acesso válido. Nesses casos, a biblioteca MSAL força o usuário a entrar.

Os exemplos a seguir demonstram como configurar o MSAL Guard e o MSAL Interceptor para entrar com uma janela 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]
    ])
  })

Preencher previamente o nome de usuário

Durante um processo de login do usuário, seu aplicativo pode direcionar para um usuário específico. Quando um aplicativo tem como destino um usuário, ele pode especificar na solicitação de autorização o login_hint parâmetro de consulta com o nome de entrada do usuário. O Azure AD B2C preenche automaticamente o nome de entrada e o usuário precisa fornecer apenas a senha.

Para preencher o nome de logon, faça o seguinte:

  1. Caso esteja usando uma política personalizada, adicione a declaração de entrada necessária, conforme descrito em Configurar conexão direta.
  2. Criar ou usar um objeto de configuração existente PopupRequest ou RedirectRequest MSAL.
  3. Defina o atributo loginHint com a dica de login correspondente.

Os trechos de código a seguir demonstram como passar o parâmetro de sugestão de login. Eles usam bob@contoso.com como o valor do 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 provedor de identidade

Se você configurou o percurso de entrada do aplicativo para incluir contas sociais, como Facebook, LinkedIn ou Google, poderá especificar o domain_hint parâmetro. Esse parâmetro de consulta fornece uma dica para o Azure AD B2C sobre o provedor de identidade social que deve ser usado para entrar. Por exemplo, se o aplicativo especificar domain_hint=facebook.com, o fluxo de entrada vai diretamente para a página de entrada do Facebook.

Para redirecionar usuários para um provedor de identidade externo, faça o seguinte:

  1. Verifique o nome de domínio do provedor de identidade externo. Para obter mais informações, consulte Redirecionar o login para um provedor social.
  2. Criar ou usar um objeto de configuração existente PopupRequest ou RedirectRequest MSAL.
  3. Defina o domainHint atributo com a dica de domínio correspondente.

Os trechos de código a seguir demonstram como passar o parâmetro de dica de domínio. Eles usam facebook.com como o valor do 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 interface do usuário

A personalização de idiomas no Azure AD B2C permite que seu fluxo de usuário acomode uma variedade de idiomas para atender às necessidades dos clientes. Para obter mais informações, consulte Personalização de idioma.

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

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

Os trechos de código a seguir demonstram como passar o parâmetro de dica de domínio. Eles usam es-es como o valor do 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"}
    }
  },

Passar um parâmetro de cadeia de caracteres de consulta personalizado

Com políticas personalizadas, você pode passar um parâmetro de cadeia de caracteres de consulta personalizado. Um bom exemplo de caso de uso é quando você deseja alterar dinamicamente o conteúdo da página.

Para passar um parâmetro de cadeia de caracteres de consulta personalizada, faça o seguinte:

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

Os snippets de código a seguir demonstram como passar um parâmetro de cadeia de caracteres de consulta personalizado. Eles usam germany-promotion como o valor do 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"}
    }
  },

Passar uma dica de token de ID

Um aplicativo de terceira parte confiável pode enviar um JWT (Token Web JSON) de entrada como parte da solicitação de autorização OAuth2. O token de entrada é uma dica sobre o usuário ou a solicitação de autorização. O Azure AD B2C valida o token e, em seguida, extrai a declaração.

Para incluir uma dica de token de ID na solicitação de autenticação, faça o seguinte:

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

Os trechos de código a seguir demonstram como definir uma indicação de token de identificação:

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

Usar um domínio personalizado

Usando um domínio personalizado, você pode marcar totalmente a URL de autenticação. Do ponto de vista do usuário, os usuários permanecem em 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, você também pode substituir o nome do locatário B2C, contoso.onmicrosoft.com, no URL de solicitação de autenticação pelo GUID da ID do locatário. Por exemplo, você pode alterar https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ para https://account.contosobank.co.uk/<tenant ID GUID>/.

Para usar seu domínio personalizado para sua ID de locatário na URL de autenticação, siga as diretrizes em Habilitar domínios personalizados. Abra o src/app/auth-config.ts objeto de configuração MSAL e altere authorities e knownAuthorities para utilizar o nome de domínio personalizado e o ID do locatário.

O JavaScript a seguir 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 JavaScript a seguir 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 registro em log

A biblioteca MSAL gera mensagens de log que podem ajudar a diagnosticar problemas. O aplicativo pode configurar o registro em log. O aplicativo também pode fornecer controle personalizado sobre o nível de detalhes e se os dados pessoais e organizacionais são registrados.

Recomendamos que você crie um retorno de chamada de registro em log da MSAL e forneça uma maneira para os usuários enviarem logs quando estiverem com problemas de autenticação. A MSAL fornece os níveis de detalhes de log a seguir:

  • Erro: algo deu errado e um erro foi gerado. Esse nível é usado para depurar e identificar problemas.
  • Aviso: não houve necessariamente um erro ou falha, mas as informações se destinam a diagnósticos e problemas de identificação.
  • Informações: A MSAL registra eventos destinados a fins informativos e não necessariamente para depuração.
  • Verbose: esse é o nível padrão. A MSAL registra todos os detalhes do comportamento da biblioteca.

Por padrão, o registrador da MSAL não captura dados pessoais ou organizacionais. A biblioteca oferece a opção de habilitar o registro em log de dados pessoais e organizacionais se você decidir fazer isso.

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

  • loggerCallback é a função de retorno de chamada do agente de log.
  • logLevel permite especificar o nível de registro. Valores possíveis: Error, , Warninge InfoVerbose.
  • piiLoggingEnabled permite a entrada de dados pessoais. Valores possíveis: true ou false.

O trecho de código a seguir demonstra como configurar o registro em log do MSAL.

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

Próximas etapas