3

I am trying to load Google Picker.

I am using this npm package https://www.npmjs.com/package/google-picker

When loading the picker, the auth windows show up, and I can select my Google account.

After auth is done, it tries to open the Google Picker iframe.

It is at this point the iframe fails to load and I get the error

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin

I have searched this issue and many solutions say make sure to add your domain to the authorized JS origins in google console

I have done this! The domain is definitely in the authorized domains for the client. Google sign in works with my app.. but I just can't seem to get the Picker to work.

I have tried both running from localhost and uploading to the server. But I get the same error.

The server I am using is HTTPS. And the iframe URL for picker is HTTPS too. So this should not be a problem.

What else can I try? I am out of options. I am following the API exactly. I have put in all the right keys.

Nearpoint
  • 7,202
  • 13
  • 46
  • 74
  • Could you add a snippet of code that show how you use the Google picker library? Especially the options given. – TMSCH Sep 26 '17 at 07:58

2 Answers2

0

From this SO post answer, it is cited that the issue is with the target origin which is https.

I believe this is an issue with the target origin being https. I suspect it is because your iFrame url is using http instead of https. Try changing the url of the file you are trying to embed to be https.

For instance:

var id = getId(url);
  return '//www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';
}

to be:

var id = getId(url);
  return 'https://www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';
}
MαπμQμαπkγVπ.0
  • 5,887
  • 1
  • 27
  • 65
0

The reason Google Picker was not showing was actually unrelated to the console error.

Even though the console error appeared, the picker still works.

But I thought it was not working because I was using the pickadate library which had css that conflicts with Google Picker.

More info about that issue here: https://github.com/amsul/pickadate.js/issues/619

Nearpoint
  • 7,202
  • 13
  • 46
  • 74