39
votes

I'm trying to create a Google Sign In button by following this link. So far the account choose dialogue box is coming but after that I don't see any result in the console. Instead I'm getting this error at page load,

"idpiframe_initialization_failed", details: "Not a valid origin for the client: http://localhos…itelist this origin for your project's client ID."
details: "Not a valid origin for the client: http://localhost has not been whitelisted for client ID 386404527657-q4ss06np5g27dllq5ds7aif42udkh7e5.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and whitelist this origin for your project's client ID."

Here are the codes,

<html lang="en">
  <head>
    <meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
    <script src="https://apis.google.com/js/platform.js" async defer></script>
  </head>
  <body>
    <div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"</div>
    <script>
      function onSignIn(googleUser) {
        // Useful data for your client-side scripts:
        var profile = googleUser.getBasicProfile();
        console.log("ID: " + profile.getId()); // Don't send this directly to your server!
        console.log('Full Name: ' + profile.getName());
        console.log('Given Name: ' + profile.getGivenName());
        console.log('Family Name: ' + profile.getFamilyName());
        console.log("Image URL: " + profile.getImageUrl());
        console.log("Email: " + profile.getEmail());

        // The ID token you need to pass to your backend:
        var id_token = googleUser.getAuthResponse().id_token;
        console.log("ID Token: " + id_token);
      };
    </script>
  </body>
</html>

How can I get the results in my console?

6
Did you use your client id??? <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com"> - ThdK
Yes. I just didn't put it here for security reason. - Shihan Khan
Try this solution. It requires www.localhost - Neo Pham

6 Answers

79
votes

I was having this exact issue and this solution worked for me.

In short: clear your browser cache.

In Chrome: Settings → Advanced → Clear browsing data → Cached images and files

9
votes

The solution which worked for me was to whitelist the origin in the google developer console api for that application.

9
votes

Just clear your cache or open your URL in incognito mode. that it :). your issue will get resolved.

5
votes

I experienced this error on several sites that offer Google Sign in. I had to "allow" accounts.google.com cookie in the "show cookies and other site data" for the site to make it work (after reloading the page). Probably blocking 3rd party cookies in the browser was the root cause for first place,

5
votes

For me it was Settings > Site Settings > Cookies > "Blocked thrid-party cookies" must have been unchecked.

2
votes

The documentation says not to overlook two critical steps ("As you go through the instructions, it's important that you not overlook these two critical steps: Enable the Analytics API Here's what worked for me:

  1. Enable the Analytics API
  2. back to you credentials , delete previous OAuth 2.0
  3. now create new OAuth with correct origins