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 .

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.

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

3. Clique no ícone do menu

4. Clique no API Managermenu

5. 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 .

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

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.

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á:

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

Para meu aplicativo da Web, corrigi meu erro escrevendo

instead of : http://localhost:11472/authorize/
type :      http://localhost/authorize/

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

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.

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.

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

• Python 3.6
• Django 1.11
• Django REST Framework 3.9 : servidor como API, não processando modelo, não fazendo muito em outros lugares.
• Framework REST do Django JWT 1.11
• Autenticação Social REST do Django <2.1

A parte dianteira

• React : 16.8.3, create-react-appversão 2.1.5
• react-google-login : 5.0.2

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 youremailprefix@example.com. 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.

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>

Lista de controle:

• httpou https?
• &ou &?
• 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.

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.

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.

O URL de redirecionamento diferencia maiúsculas de minúsculas.

No meu caso, adicionei os dois: http: // localhost: 5023 / AuthCallback / IndexAsync http: // localhost: 5023 / authcallback / indexasync

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.

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

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

Se você usar este tutorial: https://developers.google.com/identity/sign-in/web/server-side-flow , use "postmessage".

No GO, isso corrigiu o problema:

confg = &oauth2.Config{
        RedirectURL:  "postmessage",
        ClientID:   ...,
        ClientSecret: ...,
        Scopes:      ...,
        Endpoint:     google.Endpoint,
}

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).

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 '

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

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.

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 :)

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:]

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.

Não se esqueça de incluir o caminho após o seu domínio e ip. No meu caso, esqueci:

/ oauth2callback

Eu tinha dois URIs de solicitação no console, http: // xxxxx / client / api / spreadsheet / authredirect e http: // localhost .

Tentei todas as principais respostas a essa pergunta e confirmei que nenhuma delas era meu problema.

Eu removi o host local do console, atualizei meu client_secret.json no meu projeto e o erro de incompatibilidade desapareceu.

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

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.

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

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á.