Partilhar via

Configurar opções de autenticação em um aplicativo Angular usando o Azure Ative 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 nas nossas Perguntas Frequentes.

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

Pré-requisitos

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

Comportamento de entrada e saída

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

  • Janela pop-up: A autenticação acontece em uma janela pop-up e o estado do aplicativo é preservado. Use essa abordagem se não quiser que os usuários se afastem da página do aplicativo durante a autenticação. No entanto, existem problemas conhecidos com janelas pop-up no Internet Explorer.
    • Para entrar com janelas pop-up, use o método src/app/app.component.ts na classe loginPopup.
    • Na src/app/app.module.ts classe, defina o atributo interactionType para InteractionType.Popup.
    • Para sair utilizando janelas pop-up, use o método src/app/app.component.ts na classe 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.
  • Redirecionar: o utilizador é redirecionado para o Azure AD B2C para concluir o fluxo de autenticação. Use essa abordagem se os usuários tiverem restrições de navegador ou políticas em que as janelas pop-up estejam desativadas.
    • Para entrar com redirecionamento, utilize o método src/app/app.component.ts na classe loginRedirect.
    • Na src/app/app.module.ts classe, defina o atributo interactionType para InteractionType.Redirect.
    • Para sair com redirecionamento, use o método src/app/app.component.ts na classe logoutRedirect. Configure o URI para redirecionar após o término de uma sessão, 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 entrada: entrada interativa (onde um usuário seleciona o botão de entrada), MSAL Guard, e MSAL Intercetor. As configurações do MSAL Guard e do MSAL Intercetor entram 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 Intercetor 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]
    ])
  })

Pré-popular o nome de utilizador

Durante um processo de login, o seu aplicativo pode destinar-se a um utilizador específico. Quando um aplicativo tem como alvo 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 previamente o nome de entrada, faça o seguinte:

  1. Se você usar uma política personalizada, adicione a declaração de entrada necessária conforme descrito em Configurar entrada direta.
  2. Crie ou use um objeto de configuração existente PopupRequest ou RedirectRequest MSAL.
  3. Defina o atributo loginHint com a indicação de entrada correspondente.

Os exemplos de código a seguir demonstram como utilizar 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 a jornada de entrada para seu aplicativo para incluir contas sociais, como Facebook, LinkedIn ou Google, você pode especificar o domain_hint parâmetro. Este 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 os usuários para um provedor de identidade externo, faça o seguinte:

  1. Verifique o nome de domínio do seu provedor de identidade externo. Para obter mais informações, consulte Redirecionar o login para um provedor social.
  2. Crie ou use 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 idioma no Azure AD B2C permite que seu fluxo de usuário acomode uma variedade de idiomas para atender às necessidades de seus clientes. Para obter mais informações, consulte Personalização de idioma.

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

  1. Configure 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 personalizado, 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 personalizado, como campaignId. Defina o valor do parâmetro.

Os trechos 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"}
    }
  },

Fornecer uma sugestão de token de ID

Um aplicativo de terceira parte confiável pode enviar um JSON Web Token (JWT) 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. Na sua política personalizada, defina o perfil técnico de uma sugestão 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 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

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 no seu domínio durante o processo de autenticação, em vez de serem redirecionados para o nome de domínio b2clogin.com do Azure AD B2C.

Para remover todas as referências a "b2c" na URL, pode-se também substituir o nome do inquilino B2C, contoso.onmicrosoft.com, na URL do pedido de autenticação pelo GUID do ID do inquilino. 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 orientações em Habilitar domínios personalizados. Abra o src/app/auth-config.ts objeto de configuração MSAL e altere authorities e knownAuthorities para usar seu nome de domínio personalizado e ID de 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 registo de logs

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

Recomendamos que crie um callback de registo MSAL e forneça uma forma para os utilizadores enviarem registos quando tiverem problemas de autenticação. O MSAL fornece estes níveis de detalhes de registro:

  • Erro: Algo correu mal e foi gerado um erro. Este nível é usado para depurar e identificar problemas.
  • Aviso: Não houve necessariamente um erro ou falha, mas as informações destinam-se a diagnósticos e identificação de problemas.
  • Info: O MSAL registra eventos destinados a fins informativos e não necessariamente para depuração.
  • Verbose: Este é o nível padrão. O MSAL registra todos os detalhes do comportamento da biblioteca.

Por padrão, o registrador MSAL não captura dados pessoais ou organizacionais. A biblioteca oferece a opção de habilitar o registro de dados pessoais e organizacionais se você decidir fazê-lo.

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

  • loggerCallback é a função de retorno de chamada do registrador.
  • logLevel permite especificar o nível de registro. Valores possíveis: Error, Warning, Info, e Verbose.
  • piiLoggingEnabled Permite a introdução de dados pessoais. Valores possíveis: true ou false.

O trecho de código a seguir demonstra como configurar o log MSAL:

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

Próximos passos

  • Last updated on