Google API: Not a valid origin for the client: url has not been whitelisted for client ID “ID”

Question

I need help. I don\'t found an answer to my question. I tried googling and I tried asking on other sides but I never found an answer.

I\'m working with the google API

Answer 1

I just made the same mistake: Tried the official quickstart example and received the same error message as you.

It is rather confusing, because that example is a lot more complex than what I personally needed: It uses OAuth for user login, and NOT just the API key. If you are like me, and you don't want to use OAuth, and you only want to retrieve some Youtube data, without any privileged actions (e.g. if you only want to search or list videos, channels or playlists), this example is for you.

The solution is simple, just provide apiKey instead of clientId to gapi.client.init (link: API docs), like 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....
      });
  }
});

Answer 2

I was having this exact same issue - the solution for me was to go into the API Manager and enable the Analytics API. Not sure what the issue was, but this seems to have fixed it!

Answer 3

One of the reasons why it could not work is exceeded number (100) of logins on certain client ID.

You can visit google API console page and create new Oauth2 client credentials (remember to add your applications URL under Authorized Javascript Origins) and then use it.

Answer 4

I also followed the instructions in the quickstart example, Had the same problem, tried all the solutions suggested here to no avail, tried everything I could imagine but it didn't help.

Finally saw that I copied the CLIENT_ID with a space at the end.

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

Once I fixed this (removed the extra space) it worked.

I guess the error message is not very precise in this case. Hope this helps.

Answer 5

Create authorization credentials

Any application that uses OAuth 2.0 to access Google APIs must have authorization credentials that identify the application to Google's OAuth 2.0 server. The following steps explain how to create credentials for your project. Your applications can then use the credentials to access APIs that you have enabled for that project.

1. Go to the Credentials page.
2. Click Create credentials > OAuth client ID.
3. Select the Web application application type.
4. Complete the form. Applications that use JavaScript to make authorized Google API requests must specify authorized JavaScript origins. The origins identify the domains from which your application can send requests to the OAuth 2.0 server.