Autorización de Google OAuth 2 - Error: redirect_uri_mismatch


386

En el sitio web https://code.google.com/apis/console , registré mi aplicación, configuré el ID de cliente generado y el secreto de cliente en mi aplicación e intenté iniciar sesión con Google. Desafortunadamente, recibí el mensaje de error:

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

¿Qué significa este mensaje y cómo puedo solucionarlo? Yo uso la gema omniauth-google-oauth2 .


Para cualquier otra persona que tenga este problema, tenga en cuenta que puede depurar este problema accediendo a una URL como https://accounts.google.com/o/oauth2/auth?client_id={client_id}&response_type=token&redirect_uri={redirect_uri}&scope={scope}en un navegador, en lugar de ejecutar toda su aplicación para probar.
Jack M

Me he dado cuenta de que Google enlaza automáticamente redirect_uri entre comillas dobles (redirect_uri = "whatever") encima de la URL y da como resultado este error. Si elimino estas comillas dobles, puedo pasar a la siguiente pantalla. Ahora, ¿cómo podemos evadir estas comillas dobles, ya que Google lo redirige automáticamente?
Abhishek Soni

Respuestas:


389

El URI de redireccionamiento (donde se devuelve la respuesta) debe registrarse en la consola de las API, y el error indica que no lo ha hecho o no lo ha hecho correctamente.

Vaya a la consola para su proyecto y busque en API Access. Debería ver su client ID& client secretallí, junto con una lista de URI de redireccionamiento. Si el URI que desea no aparece en la lista, haga clic en editar configuración y agregue el URI a la lista.

EDITAR: (De un comentario altamente calificado a continuación) Tenga en cuenta que actualizar la consola de la API de Google y que el cambio esté presente puede llevar algún tiempo. Generalmente solo unos minutos, pero a veces parece más largo.


99
Hay algún tipo de magia, porque cuando intenté la misma devolución de llamada hace una hora, no funcionó, pero ahora está funcionando. ¡Gracias de todos modos!
user984621

337
Se topó con un problema similar y quería señalar que actualizar la consola de la API de Google y que el cambio esté presente puede llevar algún tiempo. Generalmente solo unos minutos, pero a veces parece más largo.
sdolphin

31
Permítanme completar la respuesta de @ Bazyl: en el mensaje que recibí, mencionaron el URI " localhost: 8080 " (que, por supuesto, parece una configuración interna de Google). Cambié el URI autorizado para ese, " localhost: 8080 ", y el mensaje ya no apareció ... Y el video se subió ... La documentación de APIS es MUY patética ... Cada vez que tengo algo con lo que trabajar google apis, simplemente me siento "afortunado", pero falta una buena documentación al respecto ... :(
David L

77
Abra una ventana privada / de incógnito en su navegador e intente nuevamente. A veces esto soluciona el problema de almacenamiento en caché.
Dunc

17
google no tiene opciones para una uri de redireccionamiento en la consola de google en "Api & Auth> Credentials" no importa si creo un nuevo ID de cliente o genero una nueva clave, simplemente no hay forma de especificar la uri de redireccionamiento desde consola de google.
user3338098

114

En mi caso fue wwwy non-wwwURL. El sitio real tenía wwwURL y los URI de redireccionamiento autorizado en la Consola del desarrollador de Google tenían non-wwwURL. Por lo tanto, hubo una falta de coincidencia en el URI de redireccionamiento. Lo resolví actualizando Authorized Redirect URIsen Google Developer Console a wwwURL.

Otros desajustes comunes de URI son:

  • Uso http://en URI de redireccionamiento autorizado y https://como URL real, o viceversa
  • Usar barra diagonal ( http://example.com/) en URI de redireccionamiento autorizado y no utilizar barra diagonal ( http://example.com) como URL real, o viceversa

Aquí están las capturas de pantalla paso a paso de Google Developer Console para que sea útil para aquellos que tienen dificultades para localizar la página de la consola del desarrollador para actualizar los URI de redireccionamiento.

  1. Vaya a https://console.developers.google.com

  2. Selecciona tu proyecto

Selecciona tu proyecto

  1. Haga clic en el ícono de menú

Haga clic en el ícono de menú

  1. Haga clic en el API Managermenú

Seleccione el menú del Administrador de API

  1. Haz clic en el Credentialsmenú. Y debajo OAuth 2.0 Client IDs, encontrará el nombre de su cliente. En mi caso, lo es Web Client 1. Haga clic en él y aparecerá una ventana emergente donde puede editar el origen de Javascript autorizado y los URI de redireccionamiento autorizado .

Seleccione el menú Credenciales

Aquí hay un artículo de Google sobre la creación de proyectos e ID de clientes .


99
Esta respuesta realmente necesita ser impulsada más alto, ya que proporciona la respuesta real. Tuvimos exactamente el mismo problema y esto ayudó a resolverlo, ¡gracias!
winna

44
Mi problema era que sabía qué hacer, pero no dónde encontrarlo dentro de la interfaz de usuario. Las capturas de pantalla aquí ayudaron. Gracias.
Allen

3
Mantuve los orígenes de JavaScript autorizados vacíos y los URI de redireccionamiento autorizados como 127.0.0.1/google_account/authentication y funcionó por mí.
Krishh

1
¿Me pueden ayudar con mi pregunta? stackoverflow.com/questions/37307612/…
LatentDenis


91

Si está utilizando el botón JavaScript de Google+ , debe usarlo en postmessagelugar del URI real. Me tomó casi todo el día resolver esto, ya que los documentos de Google no lo indican claramente por alguna razón.


8
Dado que esta pregunta es el éxito principal al buscar en Google el mensaje de error, aquí hay algunos indicadores adicionales. Como dice Mike, use "postmensaje" para su URI de redireccionamiento. Debe especificar esto en 2 lugares (si está utilizando el flujo de servidor de aplicaciones web). Uno está en el botón g-signin en el javascript. El otro está en el cliente de autorización de sello en el código de su servidor.
Rob Whiteside

gran respuesta. Estaba publicando con javascript y necesitaba configurar 'oauth2_redirect_uri' => 'postmessage' en el archivo config.php de la API de google.
user2998553

44
postmensaje suena bien, pero resulta inútilError: invalid_request origin parameter is required!
user3338098

10
¡Después de pasar algunas horas tratando de resolver este problema, su respuesta me ayudó mucho! La documentación de Google no es muy clara. En el lado del servidor, si usa la biblioteca del Cliente API de Google, debe usar este código: en $client->setRedirectUri('postmessage');lugar de$client->setRedirectUri('http://your.url...');
Guicara

3
Wow ... La solución @Guicara funcionó para mí después de horas de golpearme la cabeza contra la pared.
djthoms

52

En cualquier flujo en el que recuperó un código de autorización en el lado del cliente, como la GoogleAuth.grantOfflineAccess()API , y ahora desea pasar el código a su servidor, canjearlo y almacenar los tokens de acceso y actualización, debe usar la cadena literal postmessageen lugar de redirect_uri.

Por ejemplo, basándose en el fragmento en el documento de 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"}

La única documentación de Google que menciona postmessagees este antiguo documento de inicio de sesión de Google+ . Aquí hay una captura de pantalla y un enlace de archivo ya que G + se está cerrando y este enlace probablemente desaparecerá:

DOC heredado de la API de Google+

Es absolutamente imperdonable que la página de documentos para el acceso sin conexión no mencione esto. #FacePalm


1
Maldita sea, tu publicación parecía totalmente ilógica, pero era lo único que funcionaba de maravilla. Muchas gracias amigo !!!
mariobgr

@mariobgr Sí, otras respuestas aquí mencionan postmessage, pero quería dar las circunstancias específicas (p grantOfflineAccess. ej. ) de cuándo este truco loco indocumentado era necesario para mí. : PI tampoco quería que fuera verdad. :) Me costó horas de dolor de cabeza.
Jeff Ward,

¡Gracias! Esto es exactamente lo que necesitaba.
ernbrn

Esto necesita llamar la atención de Google. Esto es absolutamente horrible.
claro el

Increíble pero cierto ... O__o
mlb

41

Para mi aplicación web, corregí mi error escribiendo

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

Gracias por compartir, ayuda. Estaba atrapado en esto porque la API de GitHub OAuth2 no requiere que elimine el número de puerto.
florisla

También funcionó para mí. Estaba siguiendo este curso: asp.net/mvc/overview/security/… y obtenía 'error de redireccionamiento uri'. Después de cambiar localhost: 44334 / signin-google a localhost / signin-google funcionó. Muchas gracias por consejos útiles.
FrenkyB

1
Muchas gracias. Estaba probando con este github.com/google/google-api-dotnet-client-samples y "El URI de redireccionamiento en la solicitud" parecía provenir de un puerto diferente cada vez que lo ejecutaba. Esto me ayudó mucho. ¡Habría tomado horas descubrir lo que estaba sucediendo!
Alejandro Lozdziejski

Gracias, esto también funcionó para mí. ¡Solo suelta el puerto! :)
vidstige

30

Asegúrese de verificar el protocolo "http: //" o "https: //" como protocolo de Google Check también. Es mejor agregar ambas URL en la lista.


10
Ojalá me hubiera desplazado a tu respuesta dos horas antes
BiAiB

2
No, es mejor asegurarse de que esté usando https.
Brad Koch


6

Cuando registra su aplicación en https://code.google.com/apis/console y crea una ID de cliente, tiene la oportunidad de especificar uno o más URI de redireccionamiento. El valor del redirect_uriparámetro en su URI de autenticación debe coincidir exactamente con uno de ellos.


Y es con muy campo que tiene problemas para los enlaces angulares profundos ya que Google no está de acuerdo [ landed1.github.io/videos.html#/oauth2callbackfont> es una URL válida
aterrizó el

2
Parece que la url https://code.google.com/apis/consoleya no es válida
Anthony Kong, el

Gracias @AnthonyKong por tu actualización. He cambiado la url para vivir una. Por favor revise ahora.
Kathir

6

Esta respuesta es la misma que la respuesta de este Mike , y la respuesta de Jeff , ambos conjuntos redirect_uria postmessageel lado del cliente. Quiero agregar más sobre el lado del servidor, y también las circunstancias especiales que se aplican a esta configuración.

Pila de tecnología

Backend

Interfaz

El flujo de "Código" (Específicamente para Google OAuth2)

Resumen: Reaccionar -> solicitar "código" de autenticación social -> solicitar token jwt para adquirir el estado de "inicio de sesión" en términos de su propio servidor / base de datos de back-end.

  1. Frontend (React) utiliza un "botón de inicio de sesión de Google" responseType="code"para obtener un código de autorización. (¡no es token, no token de acceso!)
    • El botón de inicio de sesión de Google es el react-google-loginmencionado anteriormente.
    • Al hacer clic en el botón, aparecerá una ventana emergente para que el usuario seleccione una cuenta. Después de que el usuario seleccione uno y la ventana se cierre, obtendrá el código de la función de devolución de llamada del botón.
  2. Frontend envía esto al punto final JWT del servidor de fondo.
    • Solicitud POST, con { "provider": "google-oauth2", "code": "your retrieved code here", "redirect_uri": "postmessage" }
  3. Para mi servidor Django, uso Django REST Framework JWT + Django REST Social Auth. Django recibe el código de la interfaz, verifíquelo con el servicio de Google (hecho por usted). Una vez verificado, enviará el JWT (el token) de nuevo a la interfaz. Frontend ahora puede cosechar la ficha y almacenarla en algún lugar.
    • Todo REST_SOCIAL_OAUTH_ABSOLUTE_REDIRECT_URI, REST_SOCIAL_DOMAIN_FROM_ORIGINy REST_SOCIAL_OAUTH_REDIRECT_URIen Django's settings.pyson innecesarios . (Son constantes utilizadas por Django REST Social Auth) En resumen, no tiene que configurar nada relacionado con la URL de redireccionamiento en Django . El "redirect_uri": "postmessage"frontend de In React es suficiente. Esto tiene sentido porque el trabajo de autenticación social que tiene que hacer de su lado es una solicitud POST de estilo Ajax en la interfaz, no envía ningún formulario, por lo que en realidad no se produce una redirección por defecto. Es por eso que la URL de redireccionamiento se vuelve inútil si está utilizando el código + flujo JWT, y la configuración de la URL de redireccionamiento del lado del servidor no está teniendo ningún efecto.
  4. Django REST Social Auth maneja la creación de cuentas. Esto significa que verificará el correo electrónico / apellido de la cuenta de Google y verá si coincide con alguna cuenta en la base de datos. Si no, creará uno para usted, utilizando el correo electrónico y el apellido exactos. Pero, el nombre de usuario será algo así como youremailprefix717e248c5b924d60si su correo electrónico es youremailprefix@example.com. Agrega una cadena aleatoria para hacer un nombre de usuario único. Este es el comportamiento predeterminado, creo que puede personalizarlo y no dude en profundizar en su documentación.
  5. La interfaz almacena ese token y cuando tiene que realizar CRUD en el servidor de fondo, especialmente crear / eliminar / actualizar, si adjunta el token en su Authorizationencabezado y envía la solicitud al backend, el backend de Django ahora lo reconocerá como un inicio de sesión, es decir, autenticado usuario. Por supuesto, si su token caduca, debe actualizarlo haciendo otra solicitud.

¡Oh Dios mío, he pasado más de 6 horas y finalmente lo hice bien! Creo que es la primera vez que veo esto postmessage. Cualquiera que trabaje en una Django + DRF + JWT + Social Auth + Reactcombinación definitivamente chocará con esto. No puedo creer que nada del artículo mencione esto, excepto las respuestas aquí. Pero realmente espero que esta publicación pueda ahorrarle mucho tiempo si está usando la pila Django + React.


5

201515 de julio: el inicio de sesión que funcionaba la semana pasada con este script al iniciar sesión

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

dejó de funcionar y comenzó a causar el error 400 con Error: redirect_uri_mismatch

y en la sección DETALLES: redirect_uri=storagerelay://...

Lo resolví cambiando a:

<script src="https://apis.google.com/js/client:platform.js?onload=startApp"></script>

Encontrando el mismo Error 400, pero cambiar el script no funcionó dentro de mi WebView de Cordova.
Nick Spacek

@NickSpacek, compruebe si las comillas dobles faltantes fueron responsables.
tony gil

me pueden ayudar con mi pregunta? stackoverflow.com/questions/37307612/…
LatentDenis

5

Lista de Verificación:

  • httpo https?
  • &o &amp;?
  • barra inclinada ( /) o abierta ?
  • (CMD/CTRL)+F, busque la coincidencia exacta en la página de credenciales. Si no se encuentra, busque el que falta.
  • Espere hasta que google lo actualice. Puede ocurrir en cada media hora si cambia con frecuencia o puede permanecer en la piscina. Para mi caso, tardó casi media hora en surtir efecto.

4

En mi caso, mi tipo de solicitud de credencial es "Otro". Entonces no puedo encontrar Authorized redirect URIsen la página de credenciales. Parece que aparece en Tipo de aplicación: "Aplicación web". Pero puede hacer clic en el Download JSONbotón para obtener el client_secret.jsonarchivo. ingrese la descripción de la imagen aquí

Abra el archivo JSON, y se puede encontrar el parámetro de la siguiente manera: "redirect_uris":["urn:ietf:wg:oauth:2.0:oob","http://localhost"]. Elijo usar http: // localhost y funciona bien para mí.




4

Ninguna de las soluciones anteriores funcionó para mí. abajo hizo

cambie las URL de redireccionamiento autorizadas a - https: // localhost: 44377 / signin-google

Espero que esto ayude a alguien.


si usamos localhost también funcionará para el sitio web publicado. Quiero decir que si en la consola API agrego el URI de solicitud localhost. ¿Cómo funcionará cuando el sitio web se active? ¿O para los sitios en vivo necesitamos poner otro conjunto de URI real en la consola API?
Irrompible

4

cuidado con el extra /al final de la url http://localhost:8000es diferente dehttp://localhost:8000/


Esto es lo que me ayudó :)
Jacek Góraj



2

para mí fue porque en la lista 'URI de redireccionamiento autorizado' he colocado incorrectamente en https://developers.google.com/oauthplayground/lugar de https://developers.google.com/oauthplayground(sin /al final).


1

Permítanme completar la respuesta de @ Bazyl: en el mensaje que recibí, mencionaron el URI "http://localhost:8080/" (que, por supuesto, parece una configuración interna de Google). Cambié el URI autorizado para ese "http://localhost:8080/", y el mensaje ya no apareció ... Y el video se subió ... La documentación de APIS es MUY lamentable ... Cada vez que tengo algo trabajando con google apis, simplemente me siento "afortunado", pero falta una buena documentación al respecto ... :( Sí, lo hice funcionar, pero aún no entiendo por qué falló ni por qué funcionó ... Solo había UNO lugar para confirmar el URI en la web, y se copió en client_secrets.json ... No entiendo si hay un TERCER lugar donde se debe escribir el mismo URI ... No encuentro solo la documentación sino también el Diseño GUI de Google '


1

Cualquiera que tenga dificultades para encontrar dónde configurar las URL de redireccionamiento en la nueva consola: API y autenticación -> Credenciales -> ID de cliente OAuth 2.0 -> Haga clic en el enlace para encontrar todas sus URL de redireccionamiento


1

Necesitaba crear una nueva ID de cliente en API y servicios -> Credenciales -> Crear credenciales -> OAuth -> Otro

Luego descargué y utilicé client_secret.json con mi programa de línea de comandos que se está cargando en mi cuenta de YouTube. Estaba tratando de usar un ID de cliente OAuth de aplicación web que me estaba dando el error de redireccionamiento URI en el navegador.


0

Intenta hacer estos controles:

  1. ID de paquete en la consola y en su aplicación. Prefiero establecer la ID del paquete de la aplicación como esta "org.peredovik. $ {PRODUCT_NAME: rfc1034identifier}"
  2. Verifique si agregó tipos de URL en la pestaña Información simplemente escriba su ID de paquete en Identificador y Esquemas de URL, conjunto de roles en Editor
  3. En la consola en cloud.google.com "APIs y autenticación" -> "Pantalla de consentimiento" rellene el formulario sobre su solicitud. El "nombre del producto" es un campo obligatorio.

Disfruta :)


0

En mi caso, tuve que verificar el tipo de ID de cliente para aplicaciones web / aplicaciones instaladas.

aplicaciones instaladas: http: // localhost [Redirigir URI] En este caso, localhost simplemente funciona

aplicaciones web: necesita un nombre de dominio válido [URI de redireccionamiento:]


0

Lo que debe hacer es volver a su Consola de desarrollador e ir a APIs y autenticación> Pantalla de consentimiento y completarlo. Específicamente, el nombre del producto.


Además, no use un nombre de producto que también se use en otro proyecto. Asegúrate de que sea único.
florisla



0

Tuve el mismo problema con el inicio de sesión de Google, estaba a punto de arrancarme el pelo. Ingresé correctamente mis devoluciones de llamada en el panel de credenciales de Google en la consola de desarrolladores de Google, aquí estaban mis URL de redireccionamiento:

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

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

https://www.example.com/oauth2callback

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

todo parece estar bien, ¿verdad? pero aún no funcionaba hasta que he añadido una más mágica Url añadí signin-google url (que es por defecto Google devolución de llamada) y sin www y problema resuelto.

téngalo en cuenta (dependiendo de su dominio) puede que necesite o no agregar ambos con y sin www urls


0

Tengo una aplicación frontend y una API de backend.

Desde mi servidor de back-end estaba probando presionando la API de Google y enfrentaba este error. Durante todo mi tiempo me preguntaba por qué debería tener que dar, redirect_uriya que esto es solo el back-end, ya que la interfaz tiene sentido.

Lo que estaba haciendo era dar un redirect_uriservidor diferente (aunque válido) (suponiendo que esto sea solo un marcador de posición, solo tiene que estar registrado en Google), pero mi URL de la interfaz que creó el código de token fue diferente. Entonces, cuando pasaba este código en las pruebas del lado del servidor (para las cuales redirect-uri era diferente), me enfrentaba a este error.

Así que no cometas este error. Asegúrese de que su interfaz redirect_urisea ​​la misma que la de su servidor, ya que Google la usa para validar la autenticidad.


0

A continuación se detallan los motivos del error: se produce el problema de redirect_uri_mismatch:

  1. Redireccione el campo URL en blanco en su proyecto de Google.
  2. La URL de redireccionamiento no coincide con su sitio
  3. ¡Importante! Funcionará solo con un dominio de trabajo como example.com, book.com, etc. (No funciona con el host local o la URL de AWS LB)

Recomendado para usar la URL del dominio


¿Qué se debe hacer si google genera incorrectamente redirect_uri param todo el tiempo? Se genera como localhost: XXXXX con un número de puerto aleatorio, ignorando el redireccionamiento uri que configuré creando cliente.
A. Makarevich

0

El truco consiste en ingresar la URL de redireccionamiento correcta al momento de crear la ID. Descubrí que actualizar la URL de redireccionamiento una vez que se ha creado la ID a través de una 'Edición' simplemente no hace el trabajo. Lo que también funcionó para mí es duplicar toda la carpeta 'proveedor' y copiarla en la misma ubicación donde está el archivo 'oauth' (solo hasta que genere con éxito el token y luego pueda eliminar la carpeta duplicada 'proveedor'). Esto se debe a que intentar señalar la carpeta del proveedor a través de '../vendor/autoload' no funcionó para mí.

Por lo tanto, elimine su problemática ID de cliente OAuth existente y pruebe este enfoque, funcionará.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.