Compartilhar via

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

  • Artigo

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

Pré-requisitos

Familiarize-se com os seguintes artigos: Configurar a autenticação em um aplicativo SPA Angular ou Habilitar autenticação em seu próprio aplicativo SPA Angular.

Comportamento de entrada e saída

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

  • Janela pop-up: a autenticação ocorre em uma janela pop-up, e o estado do aplicativo principal é preservado. Use essa abordagem se você não quiser que os usuários deixem a página do aplicativo durante a autenticação. No entanto, há problemas conhecidos com janelas pop-up no Internet Explorer.
    • Para conectar com janelas pop-up, na classe src/app/app.component.ts, use o método loginPopup.
    • Na classe src/app/app.module.ts, 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. Depois que o logout for concluído, você também pode configurar logoutPopup para redirecionar a janela principal para uma página diferente, como a página inicial ou de entrada, 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 esse método se os usuários tiverem restrições de navegador ou políticas de janelas pop-up desabilitadas.
    • Para conectar por meio de redirecionamento, na classe src/app/app.component.ts, use o método loginRedirect.
    • Na classe src/app/app.module.ts, 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 uma saída 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 de Angular da MSAL tem três fluxos de entrada: entrada interativa (em que um usuário seleciona o botão de entrada), MSAL Guard e Interceptador MSAL. As configurações do MSAL Guard e do Interceptador MSAL terão efeito quando um usuário tentar acessar um recurso protegido sem um token de acesso válido. Nesses casos, a biblioteca da MSAL força o usuário a entrar.

Os exemplos a seguir demonstram como configurar o MSAL Guard e o Interceptador MSAL para entrar com uma janela pop-up ou por meio de 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 percurso de entrada do usuário, um aplicativo pode ser direcionado a um usuário específico. Ao direcionar a um usuário, um aplicativo pode especificar, na solicitação de autorização, o parâmetro de consulta login_hint com o nome de entrada do usuário. O Azure AD B2C preenche automaticamente o nome de entrada, e o usuário só precisa fornecer a senha.

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

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

Os snippets de código a seguir demonstram como passar o parâmetro de dica de entrada. Eles usam bob@contoso.com como o 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 provedor de identidade

Se você configurou o percurso de entrada para seu aplicativo para incluir contas sociais, como Facebook, LinkedIn ou do Google, você pode 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 especifica 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 seu provedor de identidade externo. Para obter mais informações, consulte redirecionar entrada para um provedor social.
  2. Crie um objeto de configuração PopupRequest ou RedirectRequest da MSAL, ou use um existente.
  3. Defina o atributo domainHint com a dica de domínio correspondente.

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

A personalização da linguagem de programação no Azure Active Directory B2C permite que o fluxo do usuário acomode uma variedade de linguagens de programação para atender às necessidades dos clientes. Para obter mais informações, consulte Personalização de linguagem de programação.

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

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

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

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

Com as políticas personalizadas, é possível 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, siga estas etapas:

  1. Configure o elemento ContentDefinitionParameters.
  2. Crie um objeto de configuração PopupRequest ou RedirectRequest da MSAL ou use um existente com atributos extraQueryParameters.
  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 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"}
    }
  },

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 um objeto de configuração PopupRequest ou RedirectRequest da MSAL ou use um existente com atributos extraQueryParameters.
  3. Adicione o parâmetro id_token_hint com a variável correspondente que armazena a ID do token.

Os snippets de código a seguir demonstram como definir uma dica 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}
    }
  },

Usar um domínio personalizado

Ao usar um domínio personalizado, você pode recriar por completo a URL de autenticação. Da perspectiva do usuário, os usuários permanecem nos domínios 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, você também pode substituir o nome do locatário b2c, contoso.onmicrosoft.com, na URL de solicitação de autenticação pelo GUID da ID do locatário. Por exemplo, você pode mudar de https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ para https://account.contosobank.co.uk/<tenant ID GUID>/.

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

O seguinte código JavaScript mostra o objeto de configuração da 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 código JavaScript mostra o objeto de configuração da 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 dar a você 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: indica que algo deu errado e um erro foi gerado. Esse nível é usado para depuração e identificação de problemas.
  • Aviso: as informações são destinadas a diagnosticar e identificar problemas, mesmo que não tenha havido necessariamente um erro ou falha.
  • Informações: a MSAL registra os eventos que são destinados para fins informativos e não necessariamente para depuração.
  • Verbose: esse é o nível padrão. A MSAL registra em log os detalhes completos do comportamento da biblioteca.

Por padrão, o agente da MSAL não captura dados pessoais ou organizacionais. A biblioteca oferecerá a opção para habilitar o registro em log de dados pessoais e organizacionais se você optar por fazer isso.

Pra configurar o registro no 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 em log. Valores possíveis: Error, Warning, Info e Verbose.
  • piiLoggingEnabled habilita 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 na MSAL:

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

Próximas etapas