Configurar opções de autenticação numa aplicação de página única com Azure AD B2C

Este artigo descreve como personalizar e melhorar a experiência de autenticação do Azure Active Directory B2C (Azure AD B2C) para a sua aplicação de página única (SPA).

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

Utilizar um domínio personalizado

Ao utilizar um domínio personalizado, pode marcar totalmente o URL de autenticação. Do ponto de vista do utilizador, os utilizadores permanecem no 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, também pode substituir o nome do inquilino B2C, contoso.onmicrosoft.com, no URL do pedido de autenticação pelo GUID do ID do inquilino. Por exemplo, pode mudar https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ para https://account.contosobank.co.uk/<tenant ID GUID>/.

Para utilizar um domínio personalizado e o seu ID de inquilino no URL de autenticação, siga a documentação de orientação em Ativar domínios personalizados. Localize o objeto de configuração da Biblioteca de Autenticação da Microsoft (MSAL) e altere as autoridades e as autoridades conhecidasAuteridades para utilizar o nome de domínio personalizado e o ID do inquilino.

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

Pré-preencher o nome do início de sessão

Durante um percurso de início de sessão do utilizador, a sua aplicação poderá visar um utilizador específico. Quando uma aplicação se destina a um utilizador, pode especificar no pedido de autorização o login_hint parâmetro de consulta com o nome de início de sessão do utilizador. Azure AD B2C preenche automaticamente o nome de início de sessão e o utilizador tem de fornecer apenas a palavra-passe.

Para pré-preencher o nome do início de sessão, faça o seguinte:

1. Se estiver a utilizar uma política personalizada, adicione a afirmação de entrada necessária, conforme descrito em Configurar o início de sessão direto.

2. Crie um objeto para armazenar o login_hint e transmita este objeto para o método MSAL loginPopup( ).

   let loginRequest = {
       loginHint: "bob@contoso.com"
   }
   
   myMSALObj.loginPopup(loginRequest);
   

Pré-selecionar um fornecedor de identidade

Se tiver configurado o percurso de início de sessão para a sua aplicação incluir contas sociais, como o Facebook, LinkedIn ou Google, pode especificar o domain_hint parâmetro. Este parâmetro de consulta fornece uma sugestão para Azure AD B2C sobre o fornecedor de identidade social que deve ser utilizado para o início de sessão. Por exemplo, se a aplicação especificar domain_hint=facebook.com, o fluxo de início de sessão vai diretamente para a página de início de sessão do Facebook.

Para redirecionar os utilizadores para um fornecedor de identidade externo, faça o seguinte:

1. Verifique o nome de domínio do seu fornecedor de identidade externa. Para obter mais informações, veja Redirecionar o início de sessão para um fornecedor de redes sociais.

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

   let loginRequest = {
        extraQueryParameters: {domain_hint: 'facebook.com'}
   }
   
   myMSALObj.loginPopup(loginRequest);
   

Especificar o idioma da IU

A personalização de idiomas no Azure AD B2C permite ao seu fluxo de utilizador acomodar uma variedade de idiomas de acordo com as necessidades dos seus clientes. Para obter mais informações, veja Personalização de idiomas.

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

1. Configurar a personalização de idiomas.

2. Create an object to store extraQueryParameters, and pass this object into the MSAL loginPopup() method.

   let loginRequest = {
        extraQueryParameters: {ui_locales: 'en-us'}
   }
   
   myMSALObj.loginPopup(loginRequest);
   

Transmitir um parâmetro de cadeia de consulta personalizado

Com as políticas personalizadas, pode transmitir um parâmetro de cadeia de consulta personalizado. Um bom exemplo de caso de utilização é quando pretende alterar dinamicamente o conteúdo da página.

Para transmitir um parâmetro de cadeia de consulta personalizado, faça o seguinte:

1. Configure o elemento ContentDefinitionParameters .

2. Create an object to store extraQueryParameters, and pass this object into the MSAL loginPopup() method.

   let loginRequest = {
        extraQueryParameters: {campaignId: 'germany-promotion'}
   }
   
   myMSALObj.loginPopup(loginRequest);
   

Transmitir uma sugestão de token de ID

Uma aplicação confiadora pode enviar um JSON Web Token (JWT) de entrada como parte do pedido de autorização do OAuth2. O token de entrada é uma sugestão sobre o utilizador ou o pedido de autorização. Azure AD B2C valida o token e, em seguida, extrai a afirmação.

Para incluir uma sugestão de token de ID no pedido de autenticação, faça o seguinte:

1. Na sua política personalizada, defina um perfil técnico de sugestão de token de ID.

2. Create an object to store extraQueryParameters, and pass this object into the MSAL loginPopup() method.

   let loginRequest = {
        extraQueryParameters: {id_token_hint: 'id-token-hint-value'}
   }
   
   myMSALObj.loginPopup(loginRequest);
   

Proteger o redirecionamento de início de sessão

Após o fim de sessão, o utilizador é redirecionado para o URI especificado no post_logout_redirect_uri parâmetro, independentemente dos URLs de resposta especificados para a aplicação. No entanto, se for transmitido um valor válido id_token_hint e o Token exigir ID nos pedidos de início de sessão estiver ativado, Azure AD B2C verifica se o valor de post_logout_redirect_uri corresponde a um dos URIs de redirecionamento configurados da aplicação antes de executar o redirecionamento. Se não tiver sido configurado um URL de resposta correspondente para a aplicação, será apresentada uma mensagem de erro e o utilizador não será redirecionado.

Para suportar um URI de redirecionamento de início de sessão seguro, siga os passos 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 transmitido para o pedido de fim de sessão estará no formato: https://your-app.com/. Este URL tem de ser adicionado aos URLs de resposta do Registo de Aplicação.

Ativar a sessão única

O início de sessão único no Azure AD B2C utiliza o início de sessão do canal frontal do OpenId Connect para fazer pedidos de fim de sessão a todas as aplicações nas quais o utilizador iniciou sessão através do Azure AD B2C.

Estes pedidos de fim de sessão são feitos a partir da página de início de sessão do Azure AD B2C, num Iframe oculto. Os Iframes fazem pedidos HTTP para todos os pontos finais de início de sessão do canal frontal registados para as aplicações que Azure AD B2C registaram como tendo sessão iniciada.

O ponto final de fim de sessão para cada aplicação tem de chamar o método msAL logout( ). Também tem de configurar explicitamente o MSAL para ser executado num Iframe neste cenário ao definir 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;
       }

Passos seguintes

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