Chrome上的Google Auth API Javascript idpiframe初始化错误

Question

I use GSuite and I'm coding a very simple web app to use Google Auth API, and I get an exception "idpiframe_initialization_failed".

Now I have the exact HTML as shown in the google Sample: https://developers.google.com/api-client-library/javascript/samples/samples

1) I've created a project on the Google Developer Console

2) I setup the OAUTH authorization screen

3) I've created the client ID, creating restrictions and redirection URL

4) I've also created the API KEY

5) Finally I've enabled the People API, because discovery services was failing when setting the discoveryDocs parameter

With all of these steps, When I call the gapi.client.init, it raises an exception ONLY in chrome , I cannot understand why.

The code for initializing the API is:

    gapi.client.init({
        apiKey: 'MY_API_KEY',
        discoveryDocs: ["https://people.googleapis.com/$discovery/rest?version=v1"],
        clientId: 'MY_CLIENT_ID.apps.googleusercontent.com',
        scope: 'profile'
    }).then(function (response) {
      // Listen for sign-in state changes.
      gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

      // Handle the initial sign-in state.
      updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
    },function(reason){
        console.log('onerror');
        console.log(reason);
      // Listen for sign-in state changes.
      gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

      // Handle the initial sign-in state.
      updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());

The code is running the error block, and the message is:

details: "Failed to read the 'localStorage' property from 'Window': Access is denied for this document."
error:"idpiframe_initialization_failed"

Any ideas why I'm coming into this error?

Thanks!

Answer 1

I encountered the same issue. After investing some time, found the reason. This error is because in chrome settings, you have the Block third-party cookies and site data option enabled.

It can be resolved by disabling this option: "To find the setting, open Chrome settings, type "Content settings" in the search box, click the Content Settings button, and view the fourth item under Cookies." Uncheck the box "Block third-party cookies and site data".

Hopefully this helps you in resolving your issue.

Answer 2

In my case, I just had to wait a bit for Google to take the origin into account. I cannot tell exactly how long it took. I waited ~30min. I then went to sleep and it was working the following morning.

Edit: Ooops I just realized I was using http:// and not https:// . That was the actual problem.

Answer 3

The problem is with Google's API console and how it handles creating credentials. It only seems to work when I access it through the following url https://developers.google.com/identity/sign-in/web/sign-in#before_you_begin There is a link that lets you create your app and the OAuth credentials. When I go to the console and create it through that screen it doesn't seem to work. After trying and re-create again and test with a fresh app I found out that the URL you add to the Authorized Javascript Origins doesn't always get added.

If everything is good then the url should be available in the credentials page

Answer 4

I had the same problem and I searched for 3 days: Resolve " popup_closed_by_user" Go to your console.google go to your API MANAGE : Credentials:modify your credentials:

Authorized Javascript origin ( http://localhost:port ); authorized redirect URI( http://localhost:port/auth/google/callback );

Example:|| Authorized Javascript origin ( http://localhost:4200 ); authorized redirect URI ( http://localhost:4200/auth/google/callback )