idpiframe_initialization_failed in Google Sign In from Localhost

user_2611329 0
Viewed 68791

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?

google-plus-signin google-signin google-oauth google-api javascript
10 Answers

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

user_119115790

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

user_112220730

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,

user_95053480

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

user_23215940

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
user_139122320

My solution wass to add http://localhost:yourPort and https://localhost:yourPort. Then just delete cache and browser data

user_105405690

What worked for me is that I've accidentally been typing out the address in field called "Authorized redirect URIs" instead of "Authorized JavaScript origins". Replace those two fields and try again.

user_118815420

This is the problem i faced, after trying many things this is what worked for me:
Step 1: use gapi-script in the react project for that
npm i gapi-script
Step 2: import it in the project
import { gapi } from "gapi-script";
Step 3: write a useEffect function
useEffect(() => { const clientId = "enter your client id here"; function start() { gapi.client.init({ clientId: clientId, scope: "", }); } gapi.load("client:auth2", start); });
Step 4: this is it.

user_196196120

If you are using '@abacritt/angularx-social-login' for social media login using Angular, the below fix worked for me. This issue happens for all the newly created Client IDs. This can be overcome by adding 'plugin_name' in the provider for Angular.

In app.module.ts, create an object which holds the 'plugin_name'.

const googleLoginOptions = {
  scope: 'profile email',
  plugin_name:'sample_login' //can be any name
};

And in providers, pass the 'googleLoginOptions' object along with the google client ID.

@NgModule({
 declarations: [
    AppComponent
    ],
  imports: [
    BrowserModule,
    NgbModule,
    AppRoutingModule,
    CommonModule,
    HttpClientModule,
    SocialLoginModule
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  providers: [
        {
          provide: 'SocialAuthServiceConfig',
          useValue: {
            autoLogin: false,
            providers: [
              {
                id: GoogleLoginProvider.PROVIDER_ID,
                provider: new GoogleLoginProvider(
                  'YOUR GOOGLE CLIENT_ID', 
                   googleLoginOptions
                )
              }
            ],
            onError: (err) => {
              console.error(err);
            }
          } as SocialAuthServiceConfig,
        }
  ],
  bootstrap: [AppComponent]
})

Now, clear the browser cache and it should be working. For the changes in app.component.ts you may refer to @abacritt/angularx-social-login- documentation

Please note, this solution only works for Angular applications which use the @abacritt/angularx-social-login NPM package.

user_81189650
Related