Google API: Kein gültiger Ursprung für den Client: Die URL wurde für die Client-ID "ID" nicht in die Whitelist aufgenommen.

90

Ich brauche Hilfe. Ich habe keine Antwort auf meine Frage gefunden. Ich habe versucht zu googeln und ich habe versucht, auf anderen Seiten zu fragen, aber ich habe nie eine Antwort gefunden.

Ich arbeite mit der Google-API (Youtube-Daten-API) und verwende den Beispielcode von der Google-Seite. Der Code, der funktioniert, ist mir ziemlich sicher. Beim Versuch, das Skript zu starten, ist ein Fehler aufgetreten:

Details: "Kein gültiger Ursprung für den Client:" MyURL "wurde für die Client-ID" MyID "nicht in die Whitelist aufgenommen. Gehen Sie zu https://console.developers.google.com/ und führen Sie diesen Ursprung für die Client-ID Ihres Projekts auf die Whitelist. ""

Fehler: "idpiframe_initialization_failed"

Das Problem, dass ich meine Website auf die Whitelist gesetzt habe und sie akzeptiert wird. Ich weiß nicht, was los ist. Was soll ich tun, um meine Domain auf die Whitelist zu setzen?

Und eine andere Frage. Ich habe vorher nicht nach einer Antwort auf diese Frage gesucht.

Ich denke, es ist möglich, dass ich den Code auf Localhost verwenden kann. Ich denke, ich muss meine localhost-Adresse oder so etwas auf die Whitelist setzen. Aber Whitelisting funktioniert nicht.

  • DreamGamer
DreamGamer
quelle
1
Immer noch vor dem gleichen Problem. Hat jemand eine andere Lösung, um das Problem zu lösen?
Yashu Mittal
In meinem Fall httpverursacht die Verwendung das Problem. Wechseln zu httpslöst das Problem.
Xiao
1
Für diejenigen, die bereits eine Domain in autorisierten Domains hinzugefügt haben, leeren Sie einfach den Cache Ihrer Site. Es wird definitiv funktionieren, wenn alle Daten wirklich festgelegt sind.
Haritsinh Gohil

Antworten:

70

Hatte das gleiche Problem und hier ist, wie ich es gelöst habe:

  1. Aktivieren Sie sowohl Analytics- als auch Google Plus-APIs für Ihr Projekt
  2. Erstellen Sie neue OAUTH 2.0-Client-Anmeldeinformationen
    • Fügen Sie die autorisierten Javascript-Ursprünge im Abschnitt Einschränkungen hinzu
  3. Verwenden Sie die neue Client-ID.

Genießen.

Ezra Obiwale
quelle
OMG Vielen Dank! Es funktioniert für mich. Eines meiner Probleme war, dass ich den Client-Schlüssel und nicht die Client-ID verwendet habe.
DreamGamer
4
Ich sollte das klarstellen, WENN Sie bereits eine oAuth für einen anderen Port erstellt haben. Aus irgendeinem Grund können Sie den Port nicht erneut bearbeiten, um einen anderen zu verwenden. Ich habe im Grunde "einen anderen Berechtigungsnachweis erstellt" für den neuen Port. Offensichtlich wird dadurch ein weiteres Token erstellt. Also schnapp es dir und benutze es stattdessen. Sie können beide Token in der Konsole behalten.
Sam3k
Vielen Dank! Es ist nicht intuitiv, aber es ist die richtige Antwort. Ziemlich verrückt, dass Sie Ihrem vorhandenen Schlüssel nicht einfach die API hinzufügen können, die Sie benötigen (was auch nicht offensichtlich ist). Das Wiederherstellen der gesamten Konfiguration für den Schlüssel ist mühsam.
BeachCode
Sie möchten die Googe Plus-APIs aktivieren. Aber wie ist die Beziehung zwischen Youtube-APIs und Google Plus-APIs?
Yashu Mittal
Ich verstehe den Zusammenhang hier nicht wirklich, aber es ist das einzige, was für mich (und anscheinend für andere) funktioniert hat.
Ezra Obiwale
191

Ich habe den Cache geleert. Begann dann zu arbeiten.

In Chrome: Einstellungen -> Erweitert -> Browserdaten löschen -> Zwischengespeicherte Bilder und Dateien

Manu Chadha
quelle
1
Danke, ich habe alles richtig gemacht und war in Schwierigkeiten.
Cura
2
Dies funktionierte bei der Verwendung der Google-Anmeldung für meine Webanwendung. Vielen Dank!
Sahil Lakhwani
1
Ich habe dich schon einmal gestimmt, als mir das vor ein paar Monaten passiert ist, aber du verdienst noch einen ... +1
howMuchCheeseIsTooMuchCheese
1
Diese Antwort hat mir nicht geholfen.
Tishma
2
Es gibt viele Anfragen. Ich denke, einer von ihnen wird vom Browser zwischengespeichert und weiß daher nichts über die Änderungen, die Sie in der API-Konsole vornehmen. Ich denke jedoch, dass es einfacher ist, den Cache vollständig zu deaktivieren, während die Browser DevTools geöffnet sind. Meistens gibt es eine Option (ein Kontrollkästchen) auf der Registerkarte "Netzwerk". Nachdem Sie dies aktiviert haben, reicht eine Aktualisierung der Seite aus, damit sie funktioniert.
Andreas Linnert
15

Das Leeren des Caches hat den Trick für mich getan

Gayan Rodrigo
quelle
2
Wenn Sie dies getan haben, vergessen Sie nicht, sich erneut anzumelden, um den Stapelüberlauf zu verbessern
Anand Rockzz
8

Versuchen Sie, den Cache zu löschen. Möglicherweise liegt ein Problem mit dem Cache / dem lokalen Speicher vor.

Saurabh Agrawal
quelle
7

Bei mir hat es funktioniert, ohne dass zusätzliche APIs wie Google Analytics hinzugefügt wurden. Stellen Sie einfach sicher, dass Sie die vollständige Client-ID hinzufügen und die App im Inkognito-Fenster öffnen, um das Speichern des Caches zu vermeiden. Wenn Sie die App bereits im regulären Fenster geöffnet haben, 1- Schließen Sie alle Registerkarten, auf denen die App geöffnet ist. 2- Leeren Sie den Cache und die Cookies. In Chrome finden Sie unter Einstellungen -> Kennwörter und Formulare -> Browserdaten löschen -> Erweitert (Registerkarte) -> a) Cookies und andere Site-Daten auswählen und b) zwischengespeicherte Bilder und Dateien. 3- Öffnen Sie ein neues Inkognito-Fenster und testen Sie Ihre App.

user3806770
quelle
2
Sie müssen nicht alle Tags schließen, nur ein Inkognito-Fenster zu öffnen ist ausreichend.
Bert Verhees
2

Ich folgte auch den Anweisungen im Schnellstart-Beispiel: Hatte das gleiche Problem, versuchte alle hier vorgeschlagenen Lösungen ohne Erfolg, versuchte alles, was ich mir vorstellen konnte, aber es half nicht.

Endlich sah ich, dass ich das CLIENT_IDmit einem Leerzeichen am Ende kopierte .

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

Nachdem ich das behoben hatte (den zusätzlichen Platz entfernt), funktionierte es.

Ich denke, die Fehlermeldung ist in diesem Fall nicht sehr genau. Hoffe das hilft.

Yossi Vainshtein
quelle
2

Ich habe gerade den gleichen Fehler gemacht: Ich habe das offizielle Schnellstart-Beispiel ausprobiert und die gleiche Fehlermeldung wie Sie erhalten.

Es ist ziemlich verwirrend, weil dieses Beispiel viel komplexer ist als das, was ich persönlich brauchte: Es verwendet OAuth für die Benutzeranmeldung und NICHT nur das API key. Wenn Sie wie ich sind und OAuth nicht verwenden möchten und nur einige Youtube-Daten ohne privilegierte Aktionen abrufen möchten (z. B. wenn Sie nur Videos, Kanäle oder Wiedergabelisten suchen oder auflisten möchten), ist dies ein Beispiel für dich.

Die Lösung ist einfach, bietet nur apiKeystatt clientIdzu gapi.client.init(Link: API - Dokumentation ), etwa so:

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
quelle
2
Ich schlage vor, das Code-Snippet zu vereinfachen, um diese Antwort zu verbessern. Der Init-Aufruf besteht nur aus 4 Zeilen und das ist wirklich das einzige, was sich ändert. Das andere Zeug ist nicht so hilfreich.
Charlie
Aufgeräumt ein bisschen :)
Domi
2

Ich habe auch versucht, das Beispiel zum Laufen zu bringen (von) https://developers.google.com/drive/api/v3/quickstart/js

Es ist immer wieder fehlgeschlagen, obwohl die IP-Adresse zur WebAPI hinzugefügt wurde.

Sie müssen Ihrem OAUTH jedoch localhost: 8000 (nicht nur 127.0.0.1:8000) hinzufügen, wie hier gezeigt:

OAUTH-Client

Bewegen Sie den Mauszeiger über den OAUTH-Clienttext und er wird zu einem Link. Klicken Sie auf diesen Link und Sie können einen URI einschließlich des Ports hinzufügen. Meins hatte bereits 127.0.0.1:8000, aber nicht das locahost: 8000.

locahost: 8000

Hier ist die interessante / seltsame Sache. Wenn ich localhost anpinge, sehe ich:

IPV6

Ich denke das ist IPV6 Sache.

Wenn ich 127.0.0.1 anpinge, sehe ich die erwartete Antwort (über IPV4).

IPV4

Vielleicht ist das ein roter Hering, aber ich war mir nicht sicher, ob der in OAUTH eingegebene Wert davon betroffen war oder nicht.

Der Grund, warum ich das überhaupt bemerkt habe, ist, dass ich beim Starten des Python-Webservers gemäß den Anweisungen im Tutorial Folgendes gesehen habe und es für seltsam hielt: Python-IP-Adresse

Erst nach dem Hinzufügen des lokalen Hosts: 8000 URI in der OAUTH hat es funktioniert, aber nach dem Hinzufügen hat es gut funktioniert.

Raddevus
quelle
2

In der Dokumentation heißt es, zwei wichtige Schritte nicht zu übersehen ("Wenn Sie die Anweisungen durchgehen, ist es wichtig, dass Sie diese beiden kritischen Schritte nicht übersehen: Aktivieren der Analytics-API Folgendes hat bei mir funktioniert:

  1. Aktivieren Sie die Analytics-API
  2. Zurück zu Ihren Anmeldeinformationen, löschen Sie die vorherige OAuth 2.0
  3. Erstellen Sie jetzt eine neue OAuth mit korrekter Herkunft
aravind siruvuru
quelle
1

Ich hatte ein ähnliches Problem beim Versuch, ein Login für meine Web-App zu erhalten. Ich habe nur die OAuth-Client-ID-Anmeldeinformationen von Cloud Platform neu erstellt. Als ich dies tat und die neue Client-ID verwendete, funktionierte alles einwandfrei. Ich bin mir nicht sicher, was das Problem vorher war, aber es geht jetzt vollkommen durch.

Wenn jemand dies von Google oder so findet, versuchen Sie es. Es könnte einfach funktionieren. Dies würde die Antwort von Ezra Obiwale erklären, da dadurch im Wesentlichen eine neue Client-ID erstellt wird, sobald einige APIs hinzugefügt wurden.

Wenn jemand eine Erklärung dafür kennt, warum dies geschieht, wäre er dankbar.

Scoutchorton
quelle
1

Wie viele hier angegeben haben, ist dies nur ein Problem beim Zwischenspeichern des Browsers. Sie müssen keinen neuen Schlüssel erstellen oder den Cache leeren. Versuchen Sie es einfach erneut in einem neuen inkognito (anonymen) Browserfenster und es sollte gut funktionieren.

Paulo
quelle
0

Ich hatte genau das gleiche Problem - die Lösung für mich bestand darin, in den API-Manager zu gehen und die Analytics-API zu aktivieren. Ich bin mir nicht sicher, was das Problem war, aber das scheint es behoben zu haben!

Mathew Reiss
quelle
1
Ich habe die Analytics-API aktiviert, aber nichts geändert. : C
DreamGamer
0

Ich glaube, das hat mit Caching zu tun. Versuchen Sie, zu Ihrem Browser zu gehen und den Cache zu löschen. Versuchen Sie: in Chrome> Einstellung> Erweitert> Browserdaten löschen:>: zwischengespeicherte Bilder und Dateien.

Yonatan Fessehaye
quelle
0

Einer der Gründe, warum es nicht funktionieren konnte, ist die Überschreitung der Anzahl (100) von Anmeldungen bei bestimmten client ID.

Sie können die Google API-Konsolenseite besuchen , neue Oauth2-Client-Anmeldeinformationen erstellen (denken Sie daran, die URL Ihrer Anwendung unter hinzuzufügen Authorized Javascript Origins) und diese dann verwenden.

trojek
quelle
0

Ich hatte auch die gleichen Probleme, bis mir klar wurde, dass beim Kopieren der client_ID ein Leerraum in meiner Datei vorhanden war. Daher habe ich den Leerraum aus der Zeichenfolge entfernt und jetzt funktioniert alles hervorragend.

Kenneth Duverge
quelle
0

Ich hatte das gleiche Problem, als ich mit Google Sign-In über React-Social-Login auf meinem lokalen Host arbeitete. In der Whitelist müssen wir http: // localhost: 3000 angeben , damit es funktioniert.

Sunil Yaduvanshi
quelle