Habilitar as opções de autenticação em um aplicativo Web do Node.js usando o Azure Active Directory B2C

  • Artigo

Este artigo descreve como habilitar, personalizar e aprimorar a experiência de autenticação do Azure Active Directory B2C (Azure AD B2C) para o aplicativo Web do Node.js.

Antes de começar, é importante familiarizar-se com os seguintes artigos:

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 e sua ID de locatário na URL de autenticação, siga as diretrizes em Habilitar domínios personalizados. Na pasta raiz do projeto, abra o arquivo .env. Esse arquivo contém informações sobre seu provedor de identidade do Azure AD B2C.

No arquivo . env, faça o seguinte:

  • Substitua todas as instâncias de tenant-name.b2clogin.com com seu domínio personalizado. Por exemplo, substitua tenant-name.b2clogin.com por login.contoso.com.
  • Substitua todas as instâncias de tenant-name.onmicrosoft.com por sua ID do locatário. Para obter mais informações, confira Usar ID do locatário.

A configuração a seguir mostra as configurações de aplicativo antes da alteração:

#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_susi
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_passwordreset
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_edit
#B2C authority domain
AUTHORITY_DOMAIN=https://contoso.b2clogin.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
LOGOUT_ENDPOINT=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_susi/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

A configuração a seguir mostra as configurações de aplicativo após a alteração:

#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_susi
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_passwordreset
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_edit
#B2C authority domain
AUTHORITY_DOMAIN=https://login.contoso.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
LOGOUT_ENDPOINT=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_susi/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

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. Localize o objeto authCodeRequest e defina o atributo loginHint com a dica de login.

Os snippets de código a seguir demonstram como passar o parâmetro de dica de entrada. Ele usa bob@contoso.com como o valor do atributo.

authCodeRequest.loginHint = "bob@contoso.com"

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

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. Localize o objeto authCodeRequest e 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. Ele usa o facebook.com como o valor do atributo.

authCodeRequest.domainHint = "facebook.com"

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

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. Localize o objeto authCodeRequest e defina o atributo extraQueryParameters com o parâmetro adicional ui_locales correspondente.

Os snippets de código a seguir demonstram como passar o parâmetro ui_locales. Ele usa es-es como o valor do atributo.

authCodeRequest.extraQueryParameters = {"ui_locales" : "es-es"}

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

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. Localize o objeto authCodeRequest e defina o atributo extraQueryParameters com o parâmetro adicional correspondente.

Os snippets de código a seguir demonstram como passar o parâmetro de cadeia de caracteres consulta personalizadacampaignId. Ele usa germany-promotion como o valor do atributo.

authCodeRequest.extraQueryParameters = {"campaignId" : "germany-promotion"}

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

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. Localize o objeto authCodeRequest e defina o atributo extraQueryParameters com o parâmetro adicional id_token_hintcorrespondente.

Os snippets de código a seguir demonstram como definir uma dica de token de ID:

authCodeRequest.extraQueryParameters = {"id_token_hint": idToken}

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)

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 registrar em log, em index.js, configure as seguintes chaves:

  • 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:

 const confidentialClientConfig = {
    ...
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                console.log(message);
            },
            piiLoggingEnabled: false,
            logLevel: msal.LogLevel.Verbose,
        }
    }
};

Próximas etapas

Saiba mais sobre as opções de configuração do MSAL.js.