Configurar opções de autenticação em um aplicativo de página única usando o Azure AD B2C

  • Artigo

Este artigo descreve como 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).

Antes de começar, familiarize-se com o seguinte artigo: Configurar a autenticação em um aplicativo Web de exemplo.

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. Encontre o objeto de configuração da MSAL (Biblioteca de Autenticação da Microsoft) e altere authorities e knownAuthorities para usar o nome de domínio personalizado e sua ID de 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"],
      ...
    },
  ...
}

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 para armazenar o login_hint e passe esse objeto para o método MSAL loginPopup() .

    let loginRequest = {
    loginHint: "bob@contoso.com"
}

myMSALObj.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 para armazenar o extraQueryParameters e passe esse objeto para o método MSAL loginPopup() .

    let loginRequest = {
     extraQueryParameters: {domain_hint: 'facebook.com'}
}

myMSALObj.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 para armazenar o extraQueryParameters e passe esse objeto para o método MSAL loginPopup() .

    let loginRequest = {
     extraQueryParameters: {ui_locales: 'en-us'}
}

myMSALObj.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 para armazenar o extraQueryParameters e passe esse objeto para o método MSAL loginPopup() .

    let loginRequest = {
     extraQueryParameters: {campaignId: 'germany-promotion'}
}

myMSALObj.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 para armazenar o extraQueryParameters e passe esse objeto para o método MSAL loginPopup() .

    let loginRequest = {
     extraQueryParameters: {id_token_hint: 'id-token-hint-value'}
}

myMSALObj.loginPopup(loginRequest);

Proteger seu redirecionamento de logout

Após o logout, o usuário é redirecionado para o URI especificado no post_logout_redirect_uri parâmetro, independentemente das URLs de resposta que foram especificadas para o aplicativo. No entanto, se um valor válido id_token_hint for passado e o token de ID necessário em solicitações de logout estiver ativado, o Azure AD B2C verificará se o valor de post_logout_redirect_uri corresponde a um dos URIs de redirecionamento configurados do aplicativo antes de executar o redirecionamento. Se nenhuma URL de resposta correspondente tiver sido configurada para o aplicativo, uma mensagem de erro será exibida e o usuário não será redirecionado.

Para dar suporte a um URI de redirecionamento de logout seguro, siga as etapas abaixo:

  1. Crie uma variável acessível globalmente para armazenar o id_token.

    let id_token = "";

  2. Na função MSAL handleResponse, analise o id_token do objeto authenticationResult na variável id_token.

    function handleResponse(response) {
    if (response !== null) {
        setAccount(response.account);
        id_token = response.idToken;
    } else {
        selectAccount();
    }
}

  3. Na função signOut, adicione o parâmetro id_token_hint ao objeto logoutRequest.

    function signOut() {
    const logoutRequest = {
        postLogoutRedirectUri: msalConfig.auth.redirectUri,
        //set id_token_hint to the id_token value
        idTokenHint : id_token,
        mainWindowRedirectUri: msalConfig.auth.redirectUri
    };
    myMSALObj.logoutPopup(logoutRequest);
}

No exemplo acima, o post_logout_redirect_uri passado para a solicitação de logoff estará no formato: https://your-app.com/. Essa URL deve ser adicionada às URLs de resposta do Registro de Aplicativo.

Habilitar logoff único

O logoff único no Azure AD B2C usa o front-channel de logoff do OpenID Connect para fazer solicitações de logoff para todos os aplicativos aos quais o usuário se conectou por meio do Azure AD B2C.

Essas solicitações de logoff são feitas na página de logoff do Azure AD B2C, em um Iframe oculto. Os Iframes fazem solicitações HTTP para todos os pontos de extremidade de logoff do front-channel registrados para os aplicativos que o Azure AD B2C registrou como sendo conectados.

O ponto de extremidade de logoff para cada aplicativo deve chamar o método MSAL logout() . Você também deve configurar explicitamente o MSAL para ser executado em um Iframe nesse cenário definindo allowRedirectInIframe como true.

O seguinte exemplo de código define allowRedirectInIframe como true:

const msalConfig = {
    auth: {
        clientId: "enter_client_id_here",
        .....
    },
    cache: {
        cacheLocation: "..",
        ....
    },
    system: {
        allowRedirectInIframe: true
    };
}

async function logoutSilent(MSAL) {
   return MSAL.logout({
      onRedirectNavigate: (url) => {
         return false;
       }

Próximas etapas

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