Partilhar via

Configurar opções de autenticação em um aplicativo de página única usando o Azure AD 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 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).

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

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 um domínio personalizado e sua ID de locatário na URL de autenticação, siga as orientações em Habilitar domínios personalizados. Localize seu objeto de configuração Microsoft Authentication Library (MSAL) e altere as autoridades e knownAuthorities para usar seu nome de domínio personalizado e ID de locatário.

O código 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 código 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"],
      ...
    },
  ...
}

Preencher automaticamente o nome de início de sessão

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 utilizador, 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 entrada direta.

  2. Crie um objeto para armazenar o login_hint e passe esse objeto para o método login Popup() do MSAL .

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

myMSALObj.loginPopup(loginRequest);

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

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

myMSALObj.loginPopup(loginRequest);

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 do idioma.

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

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

myMSALObj.loginPopup(loginRequest);

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. Em sua política personalizada, defina um perfil técnico de dica de token de ID.

  2. Crie um objeto para armazenar extraQueryParameters e passe esse objeto para o método MSAL loginPopup().

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

myMSALObj.loginPopup(loginRequest);

Proteja o 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 especificadas para o aplicativo. No entanto, se um válido id_token_hint for passado e o Exigir Token de ID 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 foi configurada para o aplicativo, uma mensagem de erro é exibida e o usuário não é redirecionado.

Para suportar um URI de redirecionamento de logout seguro, siga as etapas abaixo:

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

    let id_token = "";

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

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

  3. signOut Na função, adicione o id_token_hint parâmetro 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 logout estará no formato: https://your-app.com/. Este URL tem de ser adicionado ao URL de resposta do Registo de Aplicação.

Ativar logout único

O logout único no Azure AD B2C usa o logout do canal frontal do OpenId Connect para fazer solicitações de logout para todos os aplicativos nos quais o usuário entrou por meio do Azure AD B2C.

Essas solicitações de logout são feitas a partir da página de logout do Azure AD B2C, em um Iframe oculto. Os Iframes fazem solicitações HTTP para todos os pontos de extremidade de logout de canal frontal registrados para os aplicativos que o Azure AD B2C registrou como conectados.

Seu ponto de extremidade de logout para cada aplicativo deve chamar o método logout() do MSAL . Você também deve configurar explicitamente o MSAL para ser executado dentro de um Iframe neste cenário, definindo allowRedirectInIframe como true.

O exemplo de código a seguir 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óximos passos

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

  • Last updated on