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

  • Artigo

Este artigo descreve como personalizar e aprimorar a experiência de autenticação do Azure AD B2C (Azure Active Directory B2C) para o seu aplicativo de SPA (aplicativo de página única) do React. Antes de começar, familiarize-se com os seguintes artigos: Configurar a autenticação em um SPA do React ou Habilitar autenticação no próprio SPA do React.

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. Observe que há problemas conhecidos com janelas pop-up no Internet Explorer.
    • Para entrar com janelas pop-up, use o método loginPopup.
    • Para sair com janelas pop-up, use o método logoutPopup.
  • 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 entrar com redirecionamento, use o método loginRedirect.
    • Para sair com redirecionamento, use o método logoutRedirect.

O exemplo a seguir demonstra como entrar e sair:

// src/components/NavigationBar.jsx
instance.loginPopup(loginRequest)
            .catch((error) => console.log(error))

instance.logoutPopup({ postLogoutRedirectUri: "/", mainWindowRedirectUri: "/" })

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/authConfig.js 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:

export const b2cPolicies = {
    names: {
        signUpSignIn: "b2c_1_susi",
        forgotPassword: "b2c_1_reset",
        editProfile: "b2c_1_edit_profile"
    },
    authorities: {
        signUpSignIn: {
            authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/b2c_1_susi",
        },
        forgotPassword: {
            authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/b2c_1_reset",
        },
        editProfile: {
            authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/b2c_1_edit_profile"
        }
    },
    authorityDomain: "custom.domain.com"
}

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/components/NavigationBar.jsx
loginRequest.loginHint = "bob@contoso.com";
instance.loginPopup(loginRequest);

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/components/NavigationBar.jsx
loginRequest.domainHint = "facebook.com";
instance.loginPopup(loginRequest);

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/components/NavigationBar.jsx
loginRequest.extraQueryParameters = {"ui_locales" : "es-es"};
instance.loginPopup(loginRequest);

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/components/NavigationBar.jsx
loginRequest.extraQueryParameters = {"campaignId": 'germany-promotion'};
instance.loginPopup(loginRequest);

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/components/NavigationBar.jsx
loginRequest.extraQueryParameters = {"id_token_hint": idToken};
instance.loginPopup(loginRequest);

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.

Para configurar o registro em log da MSAL, em src/authConfig.js, 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 = {
  ...
  system: {
    loggerOptions: {
        loggerCallback: (logLevel, message, containsPii) => {  
            console.log(message);
          },
          logLevel: LogLevel.Verbose,
          piiLoggingEnabled: false
      }
  }
  ...
}

Próximas etapas