Autorização do Google OAuth 2 - Erro: redirect_uri_mismatch

386

No site https://code.google.com/apis/console , registrei meu aplicativo, configurei o Client ID gerado e o Client Secret no meu aplicativo e tentei fazer login no Google. Infelizmente, recebi a mensagem de erro:

Error: redirect_uri_mismatch
The redirect URI in the request: http://127.0.0.1:3000/auth/google_oauth2/callback did not match a registered redirect URI

scope=https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email
response_type=code
redirect_uri=http://127.0.0.1:3000/auth/google_oauth2/callback
access_type=offline
approval_prompt=force
client_id=generated_id

O que significa essa mensagem e como posso corrigi-la? Eu uso a gema omniauth-google-oauth2 .

user984621
fonte
Para qualquer outra pessoa com esse problema, observe que você pode depurar esse problema acessando uma URL como https://accounts.google.com/o/oauth2/auth?client_id={client_id}&response_type=token&redirect_uri={redirect_uri}&scope={scope}em um navegador, em vez de executar todo o aplicativo para teste.
Jack M
Eu notei que o Google vincula automaticamente redirect_uri entre aspas duplas em (redirect_uri = "Whatever") acima da URL e resulta nesse erro. Se eu remover essas aspas duplas, posso passar para a próxima tela. Agora, como podemos evitar essas aspas duplas, pois elas são automaticamente redirecionadas pelo próprio google.
Abhishek Soni 26/03

Respostas:

389

O URI de redirecionamento (para o qual a resposta é retornada) deve ser registrado no console das APIs e o erro indica que você não fez isso ou não fez corretamente.

Vá para o console do seu projeto e procure em Acesso à API. Você deve ver seu client ID& client secretali, junto com uma lista de URIs de redirecionamento. Se o URI que você deseja não estiver listado, clique em editar configurações e adicione o URI à lista.

EDIT: (a partir de um comentário altamente classificado abaixo) Observe que a atualização do console da API do Google e a alteração presente podem levar algum tempo. Geralmente apenas alguns minutos, mas às vezes parece mais longo.

Steve Bazyl
fonte
9
Existe algum tipo de mágica, porque quando tentei o mesmo retorno de chamada há uma hora, não funcionou, mas agora está funcionando. De qualquer forma, obrigado!
user984621
337
Ocorreu um problema semelhante e queria observar que a atualização do console da API do Google e a alteração presente podem demorar algum tempo. Geralmente apenas alguns minutos, mas às vezes parece mais longo.
Sdolphin
31
Deixe-me completar a resposta de @ Bazyl: na mensagem que recebi, eles mencionaram o URI " localhost: 8080 " (o que, obviamente, parece uma configuração interna do Google). Alterei o URI autorizado para esse, " localhost: 8080 ", e a mensagem não apareceu mais ... E o vídeo foi carregado ... A documentação do APIS é MUITO ruim ... Toda vez que tenho algo trabalhando com APIs do Google, eu simplesmente sente "sorte", mas há uma falta de boa documentação sobre isso .... :(
David L
7
Abra uma janela privada / anônima no seu navegador e tente novamente. Às vezes, isso corrige o problema de armazenamento em cache.
Dunc
17
o google não tem opções para uma interface de usuário de redirecionamento no console do google em "API e autenticação> credenciais" não importa se eu criar uma nova ID de cliente ou gerar uma nova chave, simplesmente não há como especificar a interface de interface de usuário de redirecionamento a partir do console do google.
user3338098
114

No meu caso, era wwwe non-wwwURL. O site real tinha wwwURL e os URIs de redirecionamento autorizado no Google Developer Console tinham non-wwwURL. Portanto, houve incompatibilidade no URI de redirecionamento. Eu o resolvi atualizando Authorized Redirect URIsno Google Developer Console parawww URL.

Outras incompatibilidades comuns de URI são:

  • Usando http://em URIs de redirecionamento autorizado ehttps:// como URL real ou vice-versa
  • Usando barra final ( http://example.com/) em URIs de redirecionamento autorizado e não usando barra final ( http://example.com) como URL real ou vice-versa

Aqui estão as capturas de tela passo a passo do Google Developer Console, para que seja útil para aqueles que estão com dificuldade em localizar a página do console do desenvolvedor para atualizar os URIs de redirecionamento.

  1. Acesse https://console.developers.google.com

  2. Selecione seu projeto

Selecione seu projeto

  1. Clique no ícone do menu

Clique no ícone do menu

  1. Clique no API Managermenu

Selecione o menu Gerenciador de API

  1. Clique no Credentialsmenu E abaixo OAuth 2.0 Client IDs, você encontrará o nome do seu cliente. No meu caso, é Web Client 1. Clique nele e um pop-up aparecerá onde você poderá editar a Origem do Javascript Autorizado e os URIs de redirecionamento autorizado .

Selecione o menu Credenciais

Aqui está um artigo do Google sobre a criação de projeto e ID do cliente .

Mukesh Chapagain
fonte
9
Essa resposta realmente precisa ser aumentada, pois fornece a resposta real. Tivemos exatamente o mesmo problema e isso ajudou a resolvê-lo - obrigado!
Winna
4
Meu problema era que eu sabia o que fazer, mas não onde encontrá-lo na interface do usuário. As capturas de tela aqui ajudaram. Obrigado.
Allen
3
Mantive as origens do JavaScript autorizado vazias e os URIs de redirecionamento autorizado como 127.0.0.1/google_account/authentication, e funcionou comigo.
Krishh
11
Você pode me ajudar com minha pergunta? stackoverflow.com/questions/37307612/…
LatentDenis
Ajude-me, por favor. stackoverflow.com/questions/41270512/…
Unbreakable
91

Se você estiver usando o botão javascript do Google+ , precisará usar em postmessagevez do URI real. Levei quase o dia inteiro para descobrir isso, pois os documentos do Google não afirmam claramente por algum motivo.

Mike Keskinov
fonte
8
Como essa pergunta é a principal ocorrência ao pesquisar a mensagem de erro, aqui estão alguns indicadores adicionais. Como Mike diz, use "postmessage" para o seu URI de redirecionamento. Você precisa especificar isso em 2 locais (se estiver usando o fluxo de aplicativos da web do servidor). Um deles está no botão de login g no javascript. O outro está no cliente de autorização de sinete no código do servidor.
Rob Whiteside
Ótima resposta. Eu estava postando com javascript e precisava definir 'oauth2_redirect_uri' => 'postmessage' no arquivo config.php da API do Google.
user2998553
4
PostMessage soa agradável, mas resulta na inútilError: invalid_request origin parameter is required!
user3338098
10
Depois de passar algumas horas tentando resolver esse problema, sua resposta me ajuda muito! A documentação do Google não é muito clara. No lado do servidor, se você usa a biblioteca cliente da API do Google, deve usar este código: em $client->setRedirectUri('postmessage');vez de$client->setRedirectUri('http://your.url...');
Guicara 9/16
3
Uau .... @Guicara solução funcionou para mim depois de horas batendo minha cabeça contra uma parede.
djthoms
52

Em qualquer fluxo em que você recuperou um código de autorização no lado do cliente, como a GoogleAuth.grantOfflineAccess()API , e agora deseja passar o código para o servidor, resgatá-lo e armazenar os tokens de acesso e atualização, é necessário usar a cadeia literal postmessageem vez do redirect_uri.

Por exemplo, desenvolvendo o snippet no documento Ruby :

client_secrets = Google::APIClient::ClientSecrets.load('client_secrets.json')
auth_client = client_secrets.to_authorization
auth_client.update!(
  :scope => 'profile https://www.googleapis.com/auth/drive.metadata.readonly',
  :redirect_uri => 'postmessage' # <---- HERE
)

# Inject user's auth_code here:
auth_client.code = "4/lRCuOXzLMIzqrG4XU9RmWw8k1n3jvUgsI790Hk1s3FI"
tokens = auth_client.fetch_access_token!
# { "access_token"=>..., "expires_in"=>3587, "id_token"=>..., "refresh_token"=>..., "token_type"=>"Bearer"}

A única documentação do Google a mencionar postmessageé esse antigo documento de login do Google+ . Aqui está um link de captura de tela e arquivo, uma vez que o G + está sendo fechado e esse link provavelmente desaparecerá:

DOC da API do Google+ herdado

É absolutamente imperdoável que a página de documento do Acesso offline não mencione isso. #FacePalm

Jeff Ward
fonte
11
Porra, seu post parecia totalmente ilógico, mas era a única coisa que funcionava como um encanto. Muito obrigado, cara !!!
Mariobgr
@ mariobgr Sim, outras respostas aqui mencionam postmessage, mas eu queria dar as circunstâncias específicas (por exemplo grantOfflineAccess) de quando esse hack louco e sem documentos era necessário para mim. : PI também não queria que isso fosse verdade. :) Me custou horas de dor de cabeça.
Jeff Ward
Obrigado! Isso é exatamente o que eu precisava.
Ernbrn
Isso precisa chamar a atenção do Google. Isso é absolutamente horrendo.
Glade
Incrível, mas verdadeiro ... o__O
mlb
41

Para meu aplicativo da Web, corrigi meu erro escrevendo

instead of : http://localhost:11472/authorize/
type :      http://localhost/authorize/
Guven Sezgin Kurt
fonte
Obrigado por compartilhar, isso ajuda. Fiquei preso nisso porque a API do GitHub OAuth2 não exige que você remova o número da porta.
Florisla 15/03/16
Isso funcionou para mim também. Eu estava seguindo este curso: asp.net/mvc/overview/security/… e recebendo 'redirecionar erro de uri'. Depois de alterar o localhost: 44334 / signin-google para localhost / signin-google, ele funcionou. Muito obrigado pela dica útil.
FrenkyB
11
Muito obrigado. Eu estava testando com este github.com/google/google-api-dotnet-client-samples e "O URI de redirecionamento na solicitação" parecia ser de uma porta diferente toda vez que eu o rodava. Isso me ajudou muito. Levaria horas para descobrir o que estava acontecendo!
Alejandro Lozdziejski
Obrigado, isso funcionou para mim também. Basta largar o porto! :)
vidstige
30

Verifique o protocolo "http: //" ou "https: //", pois o Google também verifica o protocolo. Melhor adicionar os dois URLs na lista.

Chintan
fonte
10
Eu gostaria de ter rolado para a sua resposta duas horas mais cedo
BiAiB
2
Não, é melhor apenas garantir que você esteja usando https.
Brad Koch
7

Parece estranho e irritante que nenhuma solução "única" esteja lá. para mim http: // localhost: 8000 não deu certo, mas http: // localhost: 8000 / deu certo.

arshpreet
fonte
2
isso ocorre porque redirect_urideve ser uma correspondência exata no console do desenvolvedor e no seu aplicativo.
gil tony
6

Ao registrar seu aplicativo em https://code.google.com/apis/console e criar um ID de cliente, você pode especificar um ou mais URIs de redirecionamento. O valor do redirect_uriparâmetro no seu URI de autenticação deve corresponder exatamente a um deles.

Kathir
fonte
E é com muito campo que tem problemas para ligações baseadas angular profundas como google não concorda [ landed1.github.io/videos.html#/oauth2callback]is uma URL válida
aterrou
2
Parece que a url https://code.google.com/apis/consolenão é válido mais
Anthony Kong
Obrigado @AnthonyKong pela atualização. Eu mudei o URL para viver um. Por favor, verifique agora.
Kathir
6

Essa resposta é a mesma que a resposta de Mike e Jeff , ambas configuradas redirect_uriparapostmessage no lado do cliente. Quero acrescentar mais sobre o lado do servidor e também as circunstâncias especiais aplicáveis ​​a essa configuração.

Pilha de tecnologia

Processo interno

A parte dianteira

O fluxo "Código" (especificamente para o Google OAuth2)

Resumo: Reaja -> solicite o código de autenticação social -> solicite o token jwt para adquirir o status de "login" em termos de seu próprio servidor / banco de dados back-end.

  1. O Frontend (React) usa um "botão de login do Google" responseType="code"para obter um código de autorização. (não é token, não é token de acesso!)
    • O botão de login do google é react-google-loginmencionado acima.
    • Clique no botão para abrir uma janela pop-up para o usuário selecionar a conta. Depois que o usuário selecionar um e a janela fechar, você receberá o código da função de retorno de chamada do botão.
  2. O front-end envia para o ponto de extremidade JWT do servidor back-end.
    • Solicitação POST, com { "provider": "google-oauth2", "code": "your retrieved code here", "redirect_uri": "postmessage" }
  3. Para o meu servidor Django, eu uso o Django REST Framework JWT + o Django REST Social Auth. O Django recebe o código do front-end, verifique-o com o serviço do Google (feito para você). Uma vez verificado, ele enviará o JWT (o token) de volta ao front-end. O front-end agora pode coletar o token e armazená-lo em algum lugar.
    • Todos REST_SOCIAL_OAUTH_ABSOLUTE_REDIRECT_URI, REST_SOCIAL_DOMAIN_FROM_ORIGINe REST_SOCIAL_OAUTH_REDIRECT_URIno do Django settings.pysão desnecessárias . (São constantes usadas pelo Auth Social do Django REST) ​​Em resumo, você não precisa configurar nada relacionado ao redirecionamento de URL no Django . O "redirect_uri": "postmessage"front-end do React é suficiente. Isso faz sentido, porque o trabalho de autenticação social que você deve executar é todo pedido POST no estilo Ajax no frontend, sem enviar nenhum formulário, portanto, na verdade, nenhum redirecionamento ocorre por padrão. É por isso que o URL de redirecionamento se torna inútil se você estiver usando o código + fluxo JWT, e a configuração do URL de redirecionamento do lado do servidor não está afetando.
  4. A autenticação social REST do Django trata da criação de contas. Isso significa que ele verificará o e-mail da conta do Google / sobrenome e verificará se ele corresponde a alguma conta no banco de dados. Caso contrário, ele criará um para você, usando o e-mail exato e o sobrenome. Mas, o nome de usuário será semelhante ao youremailprefix717e248c5b924d60seu email [email protected]. Anexa alguma sequência aleatória para criar um nome de usuário exclusivo. Esse é o comportamento padrão, acredito que você pode personalizá-lo e sinta-se à vontade para pesquisar na documentação deles.
  5. O frontend armazena esse token e quando ele precisa executar CRUD no servidor back-end, especialmente criar / excluir / atualizar, se você anexar o token no seu Authorizationcabeçalho e enviar uma solicitação ao back-end, o Django back-end agora reconhecerá isso como um login, ou seja, autenticado do utilizador. Obviamente, se seu token expirar, você deverá atualizá-lo fazendo outra solicitação.

Oh meu Deus, eu passei mais de 6 horas e finalmente entendi direito! Eu acredito que esta é a primeira vez que vi essa postmessagecoisa. Qualquer pessoa que trabalhe em uma Django + DRF + JWT + Social Auth + Reactcombinação definitivamente irá se deparar com isso. Não acredito que nenhum dos artigos mencionados mencione isso, exceto as respostas aqui. Mas eu realmente espero que este post possa economizar muito tempo se você estiver usando a pilha do Django + React.

Shaung Cheng
fonte
5

2015July15 - o login que estava funcionando na semana passada com este script no login

<script src="https://apis.google.com/js/platform.js" async defer></script>

parou de funcionar e começou a causar o Erro 400 com Error: redirect_uri_mismatch

e na seção DETALHES: redirect_uri=storagerelay://...

eu o resolvi mudando para:

<script src="https://apis.google.com/js/client:platform.js?onload=startApp"></script>
Tony Gil
fonte
Encontrar o mesmo erro 400, mas alterar o script não funcionou dentro do meu Cordova WebView.
Nick Spacek
@NickSpacek, verifique se as aspas duplas ausentes foram responsáveis.
gil Tony
você pode me ajudar com minha pergunta? stackoverflow.com/questions/37307612/…
LatentDenis
5

Lista de controle:

  • httpou https?
  • &ou &amp;?
  • barra final ( /) ou aberta ?
  • (CMD/CTRL)+F, pesquise a correspondência exata na página de credenciais. Se não for encontrado, procure o que está faltando.
  • Aguarde até o google atualizá-lo. Pode acontecer a cada meia hora se você estiver mudando com frequência ou se ficar na piscina. Para o meu caso, foram quase meia hora para entrar em vigor.
itsazzad
fonte
4

No meu caso, meu tipo de aplicativo de credencial é "Outro". Portanto, não consigo encontrar Authorized redirect URIsna página de credenciais. Parece aparecer em Tipo de aplicativo: "Aplicativo da Web". Mas você pode clicar no Download JSONbotão para obter o client_secret.jsonarquivo. insira a descrição da imagem aqui

Abra o arquivo json, e você pode encontrar o parâmetro como este: "redirect_uris":["urn:ietf:wg:oauth:2.0:oob","http://localhost"]. Eu escolho usar http: // localhost e funciona bem para mim.

codezjx
fonte
ajuda-me, por favor stackoverflow.com/questions/41270512/…
Inquebrável
4

Nenhuma das soluções acima funcionou para mim. abaixo fez

alterar URLs de redirecionamento autorizados para - https: // localhost: 44377 / signin-google

Espero que isso ajude alguém.

Dheeraj Palagiri
fonte
se usarmos o host local, também funcionará no site publicado. Quero dizer, se no console da API adicionar o URI da solicitação localhost. Como funcionará quando o site for publicado? Ou para sites ao vivo, precisamos colocar outro conjunto de URIs reais no API Console?
Inquebrável
4

cuidado com o extra /no final do URL http://localhost:8000é diferente dehttp://localhost:8000/

wolfgang
fonte
Isto é o que me ajudou :)
Jacek Goraj
3

Usuários do Rails (dos documentos omniauth-google-oauth2 ):

Corrigindo incompatibilidade de protocolo para redirect_uri no Rails

Basta definir o full_host no OmniAuth com base no Rails.env.

# config / inicializadores / omniauth.rb

OmniAuth.config.full_host = Rails.env.production? ? ' https://domain.com ': ' http: // localhost: 3000 '

LEMBRE-SE: Não inclua o "/" à direita

brntsllvn
fonte
2

para mim, foi porque na lista 'URIs de redirecionamento autorizado' que coloquei incorretamente em https://developers.google.com/oauthplayground/vez de https://developers.google.com/oauthplayground(sem /no final).

Jacek Góraj
fonte
1

Deixe-me completar a resposta de @ Bazyl: na mensagem que recebi, eles mencionaram o URI "http://localhost:8080/" (que, naturalmente, parece uma configuração interna do Google). Alterei o URI autorizado para esse "http://localhost:8080/"e a mensagem não apareceu mais ... E o vídeo foi enviado ... A documentação do APIS é MUITO ruim ... Toda vez que tenho algo trabalhando com API do Google, simplesmente sinto-me "sortudo", mas há uma falta de boa documentação sobre isso .... :( Sim, consegui que funcionasse, mas ainda não entendo por que ele falhou nem por que funcionou ... Havia apenas UM local para confirmar o URI na Web e ele foi copiado no client_secrets.json ... Eu não entendo se existe um TERCEIRO lugar onde se deve escrever o mesmo URI ... Não encontro nem apenas a documentação, mas também a documentação. GUI design do Google '

David L
fonte
1

Qualquer pessoa que esteja tentando encontrar onde definir URLs de redirecionamento no novo console: APIs e autenticação -> Credenciais -> IDs de cliente do OAuth 2.0 -> Clique no link para encontrar todos os URLs de redirecionamento

Steji
fonte
1

Eu precisava criar um novo ID de cliente em APIs e serviços -> Credenciais -> Criar credenciais -> OAuth -> Outro

Depois baixei e usei o client_secret.json com o meu programa de linha de comando que está sendo carregado na minha conta do youtube. Eu estava tentando usar um ID de cliente OAuth do aplicativo Web que estava me fornecendo o erro de URI de redirecionamento no navegador.

James T.
fonte
0

Tente fazer essas verificações:

  1. ID do pacote no console e no seu aplicativo. Prefiro definir o ID do pacote do aplicativo como este "org.peredovik. $ {PRODUCT_NAME: rfc1034identifier}"
  2. Verifique se você adicionou tipos de URL na guia Informações, apenas digite seu ID do pacote nos esquemas Identificador e URL, função definida como Editor
  3. No console do cloud.google.com, "APIs e autenticação" -> "Tela de consentimento" preenchem o formulário sobre seu aplicativo. "Nome do produto" é um campo obrigatório.

Desfrutar :)

Vlad
fonte
0

No meu caso, tive que verificar o tipo de ID do cliente para aplicativos da web / aplicativos instalados.

aplicativos instalados: http: // localhost [Redirecionar URIs] Nesse caso, localhost simplesmente funciona

aplicativos da web: você precisa de um nome de domínio válido [URIs de redirecionamento:]

Bhuwan Gautam
fonte
0

O que você precisa fazer é voltar para o console do desenvolvedor e acessar APIs e autenticação> Tela de consentimento e preenchê-lo. Especificamente, o nome do produto.

Codetard
fonte
Além disso, não use um nome de produto que também seja usado em outro projeto. Verifique se é único.
florisla
0

Eu tive o mesmo problema com o login do google, estava prestes a puxar meus cabelos !!! Eu inseri corretamente meus retornos de chamada no painel Credenciais do Google no console do desenvolvedor do Google. Aqui estavam meus URLs de redirecionamento:

https://www.example.com/signin-google

https://www.example.com/signin-google/

https://www.example.com/oauth2callback

https://www.example.com/oauth2callback/

tudo parece bem né? mas ainda não funcionou até eu adicionar mais um URL mágico . Adicionei signin-google url (que é o retorno de chamada padrão do google) sem www e com o problema resolvido.

leve em consideração (dependendo do seu domínio), você pode ou não precisar adicionar ambos com e sem URLs www

Code_Worm
fonte
0

Eu tenho aplicativo de front-end e API de back-end.

No meu servidor back-end, eu estava testando ao acessar a API do Google e estava enfrentando esse erro. Durante todo o meu tempo, fiquei pensando sobre o porquê de precisar dar, redirect_uripois esse é apenas o back-end, pois o front-end faz sentido.

O que eu estava fazendo era dar diferente redirect_uri(embora válido) ao servidor (supondo que seja apenas um espaço reservado, ele só precisa ser registrado no google), mas meu URL de front-end que criou o código do token era diferente. Então, quando eu estava passando esse código no meu teste do lado do servidor (para o qual redirecionar-uri era diferente), estava enfrentando esse erro.

Portanto, não cometa esse erro. Verifique se o seu front redirect_uri- end é igual ao do servidor e o google o usa para validar a autenticidade.

omair azam
fonte
0

Abaixo estão os motivos do erro: ocorre o redirect_uri_mismatch:

  1. Redirecione o campo URL em branco no seu projeto do Google.
  2. O URL de redirecionamento não corresponde ao seu site
  3. Importante! Funcionará apenas com domínios de trabalho como exemplo.com, livro.com etc. (não funciona com host local ou URL da AWS LB)

Recomendado para usar o URL do domínio

Vernit Gupta
fonte
O que deve ser feito é que o Google gera parâmetros redirect_uri errados o tempo todo? É gerado como localhost: XXXXX com um número de porta aleatório, ignorando o redirecionamento da uri que eu configurei criando o cliente.
A. Makarevich 26/03
0

O truque é inserir o URL de redirecionamento correto no momento da criação do ID. Descobri que atualizar o URL de redirecionamento depois que o ID foi criado por meio de um 'Editar' simplesmente não faz o trabalho. O que também funcionou para mim é duplicar toda a pasta 'vendor' e copiá-la para o mesmo local em que o arquivo 'oauth' está (apenas até você gerar o token com sucesso e excluir a pasta 'vendor' duplicada). Isso ocorre porque tentar apontar para a pasta do fornecedor via '../vendor/autoload' não funcionou para mim.

Portanto, exclua seu ID problemático do OAuth do cliente e tente esta abordagem, ele funcionará.

Raymond Wachaga
fonte