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

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

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 em seu domínio durante o processo de autenticação, em vez de serem redirecionados para o Azure AD B2C b2clogin.com nome de domínio.

Para remover todas as referências a “b2c” no URL, você também pode substituir o nome do locatário b2c, contoso.onmicrosoft.com, no URL de solicitação de autenticação pelo GUID da ID do locatário. 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 diretrizes em Habilitar domínios personalizados. Localize o objeto de configuração da MSAL (Biblioteca de Autenticação da Microsoft) e altere as autoridades e as autoridades conhecidasAuthorities para usar o nome de domínio personalizado e a ID do 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 previamente o nome de usuário

Durante uma jornada de sign-in do usuário, seu aplicativo pode focar em um usuário específico. Quando um aplicativo tem como destino 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 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 do aplicativo para incluir contas sociais, como Facebook, LinkedIn ou Google, poderá 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 especificar 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 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 idiomas no Azure AD B2C permite que seu fluxo de usuário acomode uma variedade de idiomas para atender às necessidades dos clientes. Para obter mais informações, consulte Personalização de idioma.

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

1. Configurar 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 personalizada, 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);
   

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 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 logoff

Após o logoff, 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 Token de ID Obrigatório em solicitações de logoff estiver ativado, o Azure AD B2C verificará se o valor corresponde post_logout_redirect_uri 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 logoff protegido, 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_tokenauthenticationResult objeto na 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 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 logoff de canal frontal do OpenId Connect para fazer solicitações de logoff a todos os aplicativos nos quais o usuário entrou 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 de canal frontal registrados para os aplicativos que o Azure AD B2C registrou como sendo conectados.

O ponto de extremidade de logoff de cada aplicativo deve chamar o método msal logout( ). Você também deve configurar explicitamente a MSAL para ser executada em 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óximas etapas

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