API de Google: no es un origen válido para el cliente: la URL no se ha incluido en la lista blanca para el ID de cliente "ID"

95

Necesito ayuda. No encontré respuesta a mi pregunta. Intenté buscar en Google e intenté preguntar en otros lados, pero nunca encontré una respuesta.

Estoy trabajando con la API de Google (API de datos de Youtube) y uso el código de ejemplo del lado de Google, el código funciona, estoy bastante seguro de eso. Recibí un error cuando intento iniciar el script:

detalles: "No es un origen válido para el cliente:" MyURL "no se ha incluido en la lista blanca para el ID de cliente" MyID ". Vaya a https://console.developers.google.com/ e incluya este origen en la lista blanca para el ID de cliente de su proyecto. "

error: "idpiframe_initialization_failed"

El problema incluí mi sitio web en la lista blanca y es aceptado. no se que esta mal ¿Qué debo hacer para "incluir en la lista blanca" mi dominio (está en la lista blanca)?

Y otra pregunta. No busqué antes una respuesta a esta pregunta.

Creo que es posible que pueda usar el código en Localhost, creo que debo incluir en la lista blanca mi dirección de localhost o algo como esto. Pero la lista blanca no funciona.

  • DreamGamer
DreamGamer
fuente
2
Aún enfrenta el mismo problema. ¿Alguien tiene alguna otra solución para resolver el problema?
Yashu Mittal
en mi caso, el uso httpcausa el problema. cambiar a httpsresuelve el problema.
Xiao
1
Para aquellos que ya han agregado dominios en dominios autorizados, simplemente borren el caché de su sitio, funcionará definitivamente si todos los datos están configurados de verdad.
Haritsinh Gohil

Respuestas:

76

Tuve el mismo problema y así es como lo resolví:

  1. Active las API de Analytics y Google Plus en su proyecto
  2. Crear nuevas credenciales de cliente de OAUTH 2.0
    • Agregue los orígenes autorizados de JavaScript en la sección Restricciones
  3. Utilice la nueva identificación de cliente.

Disfrutar.

Ezra Obiwale
fuente
¡Dios mío, muchas gracias! Funciona para mí. Uno de mis problemas fue que usé la clave del cliente, no la identificación del cliente.
DreamGamer
4
Debo aclarar que SI ya creó un oAuth para un puerto diferente; por alguna razón, no puede volver a editar el puerto para usar uno diferente. Básicamente, "creé otra credencial" para el nuevo puerto. Obviamente, esto creará otro token; así que cógelo y úsalo en su lugar. Puede mantener ambos tokens en Console.
Sam3k
¡Gracias! Es contrario a la intuición, pero es la respuesta correcta. Es una locura que no pueda simplemente agregar la API que necesita (que tampoco es obvia) a su clave existente. Recrear toda la configuración de la clave es un fastidio.
beachCode
Está diciendo que active las API de Googe Plus. Pero, ¿cuál es la relación entre las API de Youtube y las API de Google Plus?
Yashu Mittal
Realmente no entiendo la correlación aquí, pero es lo único que funcionó para mí (y para otros, aparentemente).
Ezra Obiwale
201

Limpié el caché. Entonces empezó a trabajar.

En Chrome: Configuración -> Avanzado -> Borrar datos de navegación -> Imágenes y archivos en caché

Manu Chadha
fuente
1
Gracias, hice todo bien y estaba en problemas.
cura
2
Esto funcionó para mí mientras usaba el inicio de sesión de Google para mi aplicación web. ¡Gracias!
Sahil Lakhwani
1
Ya te voté una vez cuando me pasó esto hace unos meses, pero te mereces otro ... +1
howMuchCheeseIsTooMuchCheese
1
Esta respuesta no me ayudó.
tishma
2
Hay muchas solicitudes en curso. Creo que uno de ellos está siendo almacenado en caché por el navegador, por lo que no conoce los cambios que realiza en la consola API. Pero creo que es más fácil deshabilitar la caché por completo mientras las herramientas de desarrollo del navegador están abiertas. La mayoría de las veces hay una opción (una casilla de verificación) en la pestaña "red". Después de habilitar eso, una actualización de la página es suficiente para que funcione.
Andreas Linnert
16

Limpiar el caché me sirvió

Bastiyan
fuente
3
una vez que haga esto, no olvide iniciar sesión nuevamente para stackoverflow para
votar a favor
8

Intente borrar la caché, podría ser un problema con la caché / almacenamiento local.

Saurabh Agrawal
fuente
7

Para mí, funcionó sin agregar ninguna de las API adicionales como Google Analytics. Solo asegúrese de agregar el ID de cliente completo y abra la aplicación en una ventana de incógnito para evitar guardar el caché. Si ya ha abierto la aplicación en una ventana normal, 1- Cierre todas las pestañas en las que está abierta la aplicación. 2- Limpiar la caché y las cookies. En Chrome, está en Configuración -> Contraseñas y formularios -> Borrar datos de navegación -> Avanzado (pestaña) -> seleccione a) Cookies y otros datos del sitio yb) Imágenes y archivos almacenados en caché 3- Abra una nueva ventana de incógnito y pruebe su aplicación.

user3806770
fuente
2
No es necesario cerrar todas las etiquetas, basta con abrir una ventana de incógnito.
Bert Verhees
3

La documentación dice que no debe pasar por alto dos pasos fundamentales ("A medida que sigue las instrucciones, es importante que no pase por alto estos dos pasos fundamentales: Habilite la API de Analytics Esto es lo que funcionó para mí:

  1. Habilite la API de Analytics
  2. volver a sus credenciales, eliminar OAuth 2.0 anterior
  3. ahora cree un nuevo OAuth con orígenes correctos
aravind siruvuru
fuente
2

También seguí las instrucciones del ejemplo de inicio rápido. Tuve el mismo problema, probé todas las soluciones sugeridas aquí sin éxito, probé todo lo que pude imaginar pero no sirvió de nada.

Finalmente vi que copié el CLIENT_IDcon un espacio al final.

  var CLIENT_ID = '44********-*****************.apps.googleusercontent.com ';

Una vez que arreglé esto (eliminé el espacio extra) funcionó.

Supongo que el mensaje de error no es muy preciso en este caso. Espero que esto ayude.

Yossi Vainshtein
fuente
2

Acabo de cometer el mismo error: probé el ejemplo de inicio rápido oficial y recibí el mismo mensaje de error que tú.

Es bastante confuso, porque ese ejemplo es mucho más complejo de lo que yo personalmente necesitaba: usa OAuth para el inicio de sesión del usuario, y NO solo el API key. Si es como yo, y no desea utilizar OAuth, y solo desea recuperar algunos datos de Youtube, sin ninguna acción privilegiada (por ejemplo, si solo desea buscar o enumerar videos, canales o listas de reproducción), este ejemplo es para ti.

La solución es simple, solo proporcione en apiKeylugar de clientIda gapi.client.init(enlace: documentos API ), así:

const apiKey = '<my API key>';

function gooApiInitClient() {
  // Array of API discovery doc URLs for APIs used by the quickstart
  const discoveryDocs = [
    "https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest"
  ];

  return gapi.client.init({
    apiKey,
    discoveryDocs
  });
}

// see: https://developers.google.com/api-client-library/javascript/reference/referencedocs
gapi.load('client', {
  callback: function() {
    // we now have gapi.client! initialize it.
    gooApiInitClient().
      then(() => {
        // we can start using the API here!
        // e.g. gapi.client.youtube.videos.list(...);
      }).then(results => { 
        // use results here....
      });
  }
});
Domi
fuente
2
Sugiero simplificar el fragmento de código para mejorar esta respuesta. La llamada de inicio tiene solo 4 líneas y eso es realmente lo único que está cambiando. Las otras cosas no son tan útiles.
Charlie
Lo limpié un poco :)
Domi
2

También estaba intentando que la muestra funcionara (desde) https://developers.google.com/drive/api/v3/quickstart/js

Continuamente fallaba a pesar de que la dirección IP se agregó a la WebAPI.

Pero debe agregar localhost: 8000 (no solo 127.0.0.1:8000) a su OAUTH como se muestra aquí:

Cliente de OAUTH

Flota sobre el texto del cliente OAUTH y se convertirá en un enlace. Haga clic en ese enlace y podrá agregar un URI que incluya el puerto. El mío ya tenía 127.0.0.1:8000 pero no el locahost: 8000.

locahost: 8000

Aquí está lo interesante / extraño. Cuando hago ping a localhost, veo:

IPV6

Creo que eso es cosa de IPV6.

De todos modos, si hago ping a 127.0.0.1 veo la respuesta esperada (a través de IPV4)

IPV4

Tal vez eso sea una pista falsa, pero no estaba seguro de si el valor ingresado en el OAUTH se vio afectado o no.

La razón por la que incluso me di cuenta de eso es porque cuando inicié el servidor web Python como se indica en el tutorial, vi lo siguiente y pensé que era extraño: dirección ip de python

Solo después de agregar el localhost: 8000 URI en OAUTH funcionó, pero después de agregarlo funcionó bien.

raddevus
fuente
2

Como muchos han indicado aquí, esto es solo un problema de almacenamiento en caché del navegador. No es necesario crear una nueva clave o incluso borrar la caché. Vuelva a intentarlo en una nueva ventana de incógnito (anónimo) del navegador y debería funcionar bien.

Paulo
fuente
1

Estaba teniendo un problema similar al intentar obtener un inicio de sesión para mi aplicación web. Lo que hice fue recrear las credenciales de ID de cliente OAuth de Cloud Platform. Cuando hice esto y usé el nuevo ID de cliente, todo funcionó bien. No estoy seguro de cuál era el problema antes, pero ahora está perfectamente bien.

Si alguien encuentra esto en Google o algo así, inténtelo. Podría funcionar. Explicaría la respuesta de Ezra Obiwale porque eso es esencialmente crear una nueva ID de cliente justo después de agregar un par de API.

Si alguien sabe una explicación de por qué sucede esto, se lo agradecería.

scoutchorton
fuente
0

Estaba teniendo exactamente el mismo problema: la solución para mí era ingresar al Administrador de API y habilitar la API de Analytics. No estoy seguro de cuál era el problema, ¡pero parece haberlo solucionado!

Mathew Reiss
fuente
1
Activé la API de Analytics pero nada cambió. : C
DreamGamer
0

Creo que esto tiene que ver con el almacenamiento en caché, intente Ir a su navegador y borrar el caché, pruebe: en Chrome,> configuración> avanzado> borrar datos de navegación:>: imágenes y archivos en caché.

Yonatan Fessehaye
fuente
0

Una de las razones por las que no pudo funcionar es que se superó el número (100) de inicios de sesión en ciertos client ID.

Puede visitar la página de la consola API de Google y crear nuevas credenciales de cliente Oauth2 (recuerde agregar la URL de su aplicación debajo Authorized Javascript Origins) y luego usarla.

trojek
fuente
0

También estaba teniendo los mismos problemas hasta que me di cuenta de que cuando copié el ID de cliente, había espacios en blanco en mi archivo, así que eliminé el espacio en blanco de la cadena y ahora todo funciona muy bien.

Kenneth Duverge
fuente
0

Enfrenté el mismo problema mientras trabajaba con el inicio de sesión de Google usando react-social-login en mi localhost. En el origen de la lista blanca tendremos que proporcionar http: // localhost: 3000 para que funcione.

sunil yaduvanshi
fuente