Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

idpiframe_initialization_failed in Google Sign In from Localhost

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." 
  • I've set Javascript Origins http://localhost & http://192.168.0.100:3000
  • I've set Redirect URI http://localhost:8080/Callback & http://localhost:8080

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?

like image 939
Shihan Khan Avatar asked Sep 28 '17 15:09

Shihan Khan


People also ask

Is react Google login deprecated?

We are discontinuing the Google Sign-In JavaScript Platform Library for web. The library will be unavailable for download after the March 31, 2023 deprecation date.

How do you register the origin for your project client ID?

Please go to https://console.developers.google.com/apis/credentials, click on the 'edit' button of your Client ID, and add your site to the origin whitelist.


1 Answers

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

like image 167
Nathan Wailes Avatar answered Sep 21 '22 20:09

Nathan Wailes