400 (Bad Request) ao requisitar access token para login via url https://login.microsoftonline.com/{tenant}/oauth2/token

Question

Olá pessoal,

Estou desenvolvendo uma aplicação utilizando Angular. Essa aplicação precisa consumir uma API na Microsoft através da url: https://login.microsoftonline.com/{tenant}/oauth2/token

Esta API retorna um token que será utilizado em outras requisições da aplicação. Eu já fiz as configurações e liberações que acreditei ser necessárias para este acesso como por exemplo a criação do client_id, client_secret.....

Diante disso, tenho as seguintes situações:

• Quando executo a requisição via Postman ou via node(executando somente um arquivo .js para teste) o retorno é 200, ou seja, retorna as informações com o token.
• Quando executo através da aplicação retirando a segurança do navegador em modo desenvolvimento para testes(chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security) retorna 200 também com as informações do token.

Agora, quando executo através da aplicação com o acesso normal do navegador me retorna o erro 400 (Bad Request)

Com isso, não tenho certeza se tenho um problema na aplicação Angular ou um problema de liberação ou configuração no client_id.

Alguém já precisou realizar esta autenticação? Ou, teria alguma ideia de como eu poderia resolver este problema?

Eu não achei nada especificamente desta url e segui várias dicas de configuração do client_id mas nada deu certo.

Desde já agradeço a atenção de todos e me coloco a disposição caso precisem de mais alguma informação.

Jonathan Ribeiro

Answer 1

Oi Jonathan Santos!

Bem-vindo ao Microsoft Q&A!

O erro 400 (Bad Request) ao requisitar um access token pode ser causado por vários fatores. Aqui estão algumas sugestões e links de referência autorizados pela Microsoft que podem ajudar a resolver o problema:

1. Verifique a URL e os Parâmetros:
   • Certifique-se de que a URL está correta e que todos os parâmetros necessários estão incluídos corretamente. Erros de digitação ou parâmetros faltantes podem causar o erro 400.
2. Configuração do Client ID e Client Secret:
   • Verifique se o client_id e o client_secret estão configurados corretamente e que não há erros de sintaxe. Além disso, certifique-se de que esses valores estão sendo enviados no corpo da requisição e não na URL.
3. Headers e Content-Type:
   • Assegure-se de que os headers estão configurados corretamente. O Content-Type deve ser application/x-www-form-urlencoded.
4. CORS e Segurança do Navegador:
   • O problema pode estar relacionado a CORS (Cross-Origin Resource Sharing). Verifique se o servidor está configurado para permitir requisições de sua aplicação Angular. Além disso, desativar a segurança do navegador pode funcionar em modo de desenvolvimento, mas não é uma solução viável para produção.

Espero que essas dicas ajudem a resolver o problema! Se precisar de mais assistência, estou à disposição.

Saudações

Jonathan.

-----------

Sua opinião é muito importante para nós! Se esta resposta resolveu sua consulta, por favor clique em ‘YES‘. Isso nos ajuda a melhorar continuamente a qualidade e relevância de nossas soluções. Obrigado pela sua colaboração!

Answer 2

Oi Jonathan Santos,

Obrigado pelo retorno detalhado. Aqui estão algumas sugestões adicionais baseadas nos seus comentários:

Dados Corretos:

• É ótimo saber que os dados estão corretos e que você consegue consumir outras APIs com o token gerado.

Configuração do Client ID:

• Para garantir que as solicitações funcionem corretamente a partir do navegador, verifique se o client_id está configurado para permitir solicitações de aplicativos web. Isso pode envolver ajustes nas configurações de autenticação e permissões no portal do Azure. Certifique-se de que a aplicação está registrada corretamente e que possui as permissões necessárias.

Headers e Content-Type:

• Além do Content-Type: application/x-www-form-urlencoded, certifique-se de incluir os seguintes headers se forem necessários:
• Authorization: Basic {base64(client_id:client_secret)}
• Accept: application/json
• Verifique também se não há headers adicionais que possam estar causando o problema.

CORS e Segurança do Navegador:

• O uso de mode: "no-cors" pode ocultar erros relacionados ao CORS, mas não é uma solução ideal. Configurar um proxy é uma boa prática para desenvolvimento, mas certifique-se de que o servidor da API permite solicitações do seu domínio em produção.
• Revise a configuração de CORS no servidor para garantir que permite solicitações da sua aplicação Angular.

Exemplo de Configuração do Client ID:

• Aqui está um exemplo básico de configuração no portal do Azure:
• Navegue para Azure Active Directory > App registrations > {sua aplicação} > Authentication.
• Certifique-se de que Redirect URIs está configurado corretamente para sua aplicação web.
• Em API permissions, verifique se você tem as permissões necessárias e que estão concedidas. Espero que essas sugestões ajudem a resolver o problema! Se precisar de mais assistência, estou à disposição.

Answer 3

Oi Jonathan Santos,

Obrigado pela sua resposta.

Entendemos que seguimos detalhadamente cada uma das etapas e recomendações fornecidas acima, mas ainda estamos enfrentando o problema. Minha melhor recomendação é abrir um ticket de suporte técnico com o departamento Azure. Este departamento possui as ferramentas necessárias para realizar uma solução de problemas mais aprofundada, incluindo sessão remota, análise de logs e outras ferramentas específicas para ajudá-lo a resolver esse problema.

Solicitação de suporte no Azure

Para criar uma solicitação de suporte no Azure , siga estes passos:

Acesse o Portal do Azure:

• Vá para portal.azure.com  e faça login com suas credenciais.

Navegue até Ajuda + Suporte:

• No cabeçalho global, clique no ícone de ponto de interrogação (?) e selecione Ajuda + suporte.
  1. Inicie uma Nova Solicitação de Suporte:
     • Clique em Nova solicitação de suporte.
  2. Descreva o Problema:
     • Digite um resumo do problema e selecione o tipo de problema. Dependendo do serviço, você pode precisar especificar o tipo e subtipo do problema.
  3. Forneça Detalhes Adicionais:
     • Preencha as informações adicionais sobre o problema, como quando começou e as etapas para reproduzi-lo. Você pode carregar arquivos, como logs, para ajudar na análise.
  4. Escolha o Método de Suporte:
     • Selecione a severidade do problema e forneça suas informações de contato, incluindo o método preferido de contato e a disponibilidade.
  5. Revise e Crie a Solicitação:
  • Revise todas as informações fornecidas e clique em Criar para enviar a solicitação de suporte. Após criar a solicitação, um engenheiro de suporte entrará em contato com você usando o método indicado

-------

Sua opinião é muito importante para nós! Se esta resposta resolveu sua consulta, por favor clique em ‘YES’. Isso nos ajuda a melhorar continuamente a qualidade e relevância de nossas soluções. Obrigado pela sua colaboração!Obrigado pela sua resposta.

Answer 4

Oi Jonathan Santos,,

O objetivo desta mensagem é verificar as informações fornecidas. Se tiver mais atualizações sobre este assunto, por favor, não hesite em responder neste mesmo tópico.

Cuidadosamente                 

Jonathan

-----------

Sua opinião é muito importante para nós! Se esta resposta resolveu sua consulta, por favor clique em ‘YES‘. Isso nos ajuda a melhorar continuamente a qualidade e relevância de nossas soluções. Obrigado pela sua colaboração!