Entrada de aplicativo de página única usando o fluxo implícito do OAuth 2.0 no Azure Active Directory B2C

Muitos aplicativos modernos têm um front-end SPA (aplicativo de página única) escrito principalmente em JavaScript. Geralmente, o aplicativo é escrito usando uma estrutura como React, Angular ou Vue.js. Os SPAs e outros aplicativos JavaScript executados principalmente em um navegador têm alguns desafios adicionais para autenticação:

• As características de segurança desses aplicativos são diferentes dos aplicativos Web tradicionais baseados em servidor.

• Muitos servidores de autorização e provedores de identidade não dão suporte a solicitações CORS (compartilhamento de recursos entre origens).

• Os redirecionamentos do navegador de página inteira para longe do aplicativo podem ser invasivos para a experiência do usuário.

Algumas estruturas, como MSAL.js 1.x, dão suporte apenas ao fluxo de concessão implícita. Nesses casos, o Azure AD B2C (Azure Active Directory B2C) dá suporte ao fluxo de concessão implícita de autorização do OAuth 2.0. O fluxo é descrito na seção 4.2 da especificação OAuth 2.0. No fluxo implícito, o aplicativo recebe tokens diretamente do ponto de extremidade de autorização do Azure AD B2C, sem nenhuma troca entre servidores. Toda a lógica de autenticação e o tratamento de sessão são feitos inteiramente no cliente JavaScript com um redirecionamento de página ou uma caixa pop-up.

O Azure AD B2C estende o fluxo implícito OAuth 2.0 padrão para mais do que autenticação e autorização simples. O Azure AD B2C apresenta o parâmetro de política. Com o parâmetro de política, você pode usar o OAuth 2.0 para adicionar políticas ao seu aplicativo, como fluxos de usuário de inscrição, entrada e gerenciamento de perfil. No exemplo de solicitações HTTP neste artigo, usamos {tenant}.onmicrosoft.com para ilustração. Substitua {tenant}pelo nome do seu locatário se você tiver um. Além disso, você precisa ter criado um fluxo de usuário.

Usamos a figura a seguir para ilustrar o fluxo de login implícito. Cada etapa é descrita em detalhes mais adiante no artigo.

Enviar solicitações de autenticação

Quando seu aplicativo Web precisa autenticar o usuário e executar um fluxo de usuário, ele direciona o usuário para o ponto de extremidade do /authorize Azure AD B2C. O usuário toma medidas dependendo do fluxo do usuário.

Nesta solicitação, o cliente indica as permissões que precisa adquirir do usuário no scope parâmetro e o fluxo do usuário a ser executado. Para ter uma ideia de como a solicitação funciona, tente colar a solicitação em um navegador e executá-la. Substituir:

• {tenant} pelo nome do locatário do Azure AD B2C.

• 00001111-aaaa-2222-bbbb-3333cccc4444 pela ID do aplicativo que você já havia registrado no seu locatário.

• {policy} pelo nome de uma política que você criou no seu locatário, por exemplo b2c_1_sign_in.

GET https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/{policy}/oauth2/v2.0/authorize?
client_id=00001111-aaaa-2222-bbbb-3333cccc4444
&response_type=id_token+token
&redirect_uri=https%3A%2F%2Faadb2cplayground.azurewebsites.net%2F
&response_mode=fragment
&scope=openid%20offline_access
&state=arbitrary_data_you_can_receive_in_the_response
&nonce=12345

Os parâmetros na solicitação HTTP GET são explicados na tabela abaixo.

Essa é a parte interativa do fluxo. O usuário é solicitado a concluir o fluxo de trabalho da política. O usuário pode ter que inserir seu nome de usuário e senha, entrar com uma identidade social, inscrever-se em uma conta local ou qualquer outro número de etapas. As ações do usuário dependem de como o fluxo de usuário é definido.

Depois que o usuário concluir o fluxo de usuário, o Azure AD B2C retornará uma resposta ao seu aplicativo por meio do redirect_uri. Ele usa o método especificado no response_mode parâmetro. A resposta é exatamente a mesma para cada um dos cenários de ação do usuário, independentemente do fluxo de usuário que foi executado.

Resposta bem-sucedida

Uma resposta bem-sucedida que utiliza response_mode=fragment e response_type=id_token+token se parece com a seguinte, com quebras de linha para legibilidade:

GET https://aadb2cplayground.azurewebsites.net/#
access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Ik5HVEZ2ZEstZnl0aEV1Q...
&token_type=Bearer
&expires_in=3599
&scope="00001111-aaaa-2222-bbbb-3333cccc4444 offline_access",
&id_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Ik5HVEZ2ZEstZnl0aEV1Q...
&state=arbitrary_data_you_sent_earlier

Resposta de erro

As respostas de erro também podem ser enviadas para o URI de redirecionamento para que o aplicativo possa tratá-las adequadamente:

GET https://aadb2cplayground.azurewebsites.net/#
error=access_denied
&error_description=the+user+canceled+the+authentication
&state=arbitrary_data_you_can_receive_in_the_response

Validar o token de ID

O recebimento de um token de ID não é suficiente para autenticar o usuário. Valide a assinatura do token de ID e verifique as declarações no token de acordo com os requisitos do aplicativo. O Azure AD B2C usa JWTs (Tokens Web JSON) e criptografia de chave pública para assinar tokens e verificar se eles são válidos.

Muitas bibliotecas de software livre estão disponíveis para validar JWTs, dependendo do idioma que você prefere usar. Considere explorar bibliotecas de software livre disponíveis em vez de implementar sua própria lógica de validação. Você pode usar as informações neste artigo para ajudá-lo a aprender a usar essas bibliotecas corretamente.

Azure AD B2C tem um endpoint de metadados do OpenID Connect. O aplicativo pode usar o endpoint para buscar informações sobre o Azure AD B2C em tempo de execução. Essas informações incluem pontos de extremidade, conteúdos de token e chaves de assinatura de token. Há um documento de metadados JSON para cada fluxo de usuário em seu locatário do Azure AD B2C. Por exemplo, o documento de metadados de um fluxo do usuário chamado b2c_1_sign_in em um locatário do fabrikamb2c.onmicrosoft.com está localizado em:

https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_sign_in/v2.0/.well-known/openid-configuration

Uma das propriedades deste documento de configuração é a jwks_uri. O valor para o mesmo fluxo de usuário seria:

https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_sign_in/discovery/v2.0/keys

Para determinar de qual fluxo de usuário foi usado para assinar um token de ID (e de onde buscar os metadados), você pode usar qualquer uma das seguintes opções:

• O nome de fluxo do usuário está incluído na declaração acr em id_token. Para obter informações sobre como analisar as declarações de um token de ID, consulte a referência de token do Azure AD B2C.

• Codificar o fluxo do usuário no valor do parâmetro state ao fazer a solicitação. Em seguida, decodificar o state parâmetro para determinar qual fluxo de usuário foi usado.

Depois de adquirir o documento de metadados do ponto de extremidade de metadados do OpenID Connect, você pode usar as chaves públicas RSA-256 (localizadas neste ponto de extremidade) para validar a assinatura do token de ID. Poderá haver várias chaves listadas nesse ponto de extremidade em qualquer momento, cada uma identificada por um kid. O id_token cabeçalho também contém uma kid declaração. Indica quais dessas chaves foram usadas para assinar o token de ID. Para obter mais informações, incluindo o aprendizado sobre a validação de tokens, consulte a referência de token do Azure AD B2C.

Depois de validar a assinatura do token de ID, várias declarações exigem verificação. Por exemplo:

• Valide a declaração nonce para evitar ataques de reprodução de token. O valor deve ser aquele que você especificou no pedido de login.

• Valide a declaração aud para garantir que o token de ID foi emitido para seu aplicativo. Seu valor deve ser a ID do aplicativo do seu aplicativo.

• Valide as reivindicações iat e exp para garantir que o token de ID não expirou.

Várias outras validações que você deve executar são descritas em detalhes na Especificação do OpenID Connect Core. Talvez você também queira validar declarações adicionais, dependendo do seu cenário. Algumas validações comuns incluem:

• Garantindo que o usuário ou a organização tenha se inscrito no aplicativo.

• Garantindo que o usuário tenha autorização e privilégios adequados.

• Garantir que um determinado nível de autenticação tenha ocorrido, por exemplo, utilizando a autenticação multifator do Microsoft Entra.

Para obter mais informações sobre as reivindicações em um token de ID, consulte a referência de token do Azure AD B2C.

Depois de validar o token de ID, você pode iniciar uma sessão com o usuário. Em seu aplicativo, use as declarações no token de ID para obter informações sobre o usuário. Essas informações podem ser usadas para exibição, registros, autorização e assim por diante.

Obter tokens de acesso

Se a única coisa que seus aplicativos Web precisam fazer é executar fluxos de usuário, você pode ignorar as próximas seções. As informações nas seções a seguir são aplicáveis somente a aplicativos Web que precisam fazer chamadas autenticadas para uma API Web protegida pelo próprio Azure AD B2C.

Agora que você registrou o usuário na sua SPA, você pode obter tokens de acesso para chamar APIs Web protegidas pelo Microsoft Entra ID. Mesmo que você já tenha recebido um token usando o token tipo de resposta, poderá usar esse método para adquirir tokens para recursos adicionais sem redirecionar o usuário para entrar novamente.

Em um fluxo típico de aplicativo web, você faria uma solicitação para o /token endpoint. No entanto, o endpoint não dá suporte a requisições CORS, portanto fazer requisições AJAX para obter um token de atualização não é uma opção. Em vez disso, você pode usar o fluxo implícito em um elemento iframe HTML oculto para obter novos tokens para outras APIs Web. Aqui está um exemplo, com quebras de linha para legibilidade:

https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/{policy}/oauth2/v2.0/authorize?
client_id=00001111-aaaa-2222-bbbb-3333cccc4444
&response_type=token
&redirect_uri=https%3A%2F%2Faadb2cplayground.azurewebsites.net%2F
&scope=https%3A%2F%2Fapi.contoso.com%2Ftasks.read
&response_mode=fragment
&state=arbitrary_data_you_can_receive_in_the_response
&nonce=12345
&prompt=none

Ao definir o prompt=none parâmetro, essa solicitação é bem-sucedida ou falha imediatamente e retorna ao seu aplicativo. Uma resposta bem-sucedida é enviada ao seu aplicativo por meio do URI de redirecionamento usando o método especificado no response_mode parâmetro.

Resposta bem-sucedida

Uma resposta bem-sucedida usando response_mode=fragment se parece com este exemplo:

GET https://aadb2cplayground.azurewebsites.net/#
access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Ik5HVEZ2ZEstZnl0aEV1Q...
&state=arbitrary_data_you_sent_earlier
&token_type=Bearer
&expires_in=3599
&scope=https%3A%2F%2Fapi.contoso.com%2Ftasks.read

Resposta de erro

As respostas de erro também podem ser enviadas para o URI de redirecionamento para que o aplicativo possa tratá-las adequadamente. Para prompt=none, um erro esperado se parece com este exemplo:

GET https://aadb2cplayground.azurewebsites.net/#
error=user_authentication_required
&error_description=the+request+could+not+be+completed+silently

Se você receber esse erro na solicitação do iframe, o usuário deverá entrar novamente de forma interativa para recuperar um novo token.

Tokens de atualização

Tokens de ID e tokens de acesso expiram após um curto período de tempo. Seu aplicativo deve estar preparado para atualizar esses tokens periodicamente. Os fluxos implícitos não permitem que você obtenha um token de atualização devido a motivos de segurança. Para atualizar qualquer tipo de token, use o fluxo implícito em um elemento iframe HTML oculto. Na solicitação de autorização, inclua o prompt=none parâmetro. Para receber um novo valor id_token, certifique-se de usar response_type=id_token e scope=openid, e um parâmetro nonce.

Enviar uma solicitação de saída

Quando você quiser desconectar o usuário do aplicativo, redirecione o usuário para o endereço de logout do Azure AD B2C. Em seguida, você pode limpar a sessão do usuário no aplicativo. Se você não redirecionar o usuário, ele poderá reautenticar seu aplicativo sem inserir suas credenciais novamente porque ele tem uma sessão de Sign-On única válida com o Azure AD B2C.

Você pode simplesmente redirecionar o usuário para o end_session_endpoint que está listado no mesmo documento de metadados do OpenID Connect descrito em Validar o token de ID. Por exemplo:

GET https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/{policy}/oauth2/v2.0/logout?post_logout_redirect_uri=https%3A%2F%2Faadb2cplayground.azurewebsites.net%2F

Próximas etapas

Confira o exemplo de código: Entre com o Azure AD B2C em um SPA JavaScript.