1

Hi I am trying to access google drive from my react application, When I am signing in an iframe appears and and shows 'The developer key is invalid'. I am using a google drive library react-google-picker.

I am getting a message like this Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('http://localhost:3000') in the browser console .

I cannot understand why does it says The target origin provided ('https://docs.google.com'), I entered http://localhost:3000 in the google developers console as Javascript origin url. Is it an issue of the iframe ?

suvodipMondal
  • 656
  • 10
  • 27

2 Answers2

2

I came across this question while having the same issue, all be it I was using the example straight out of the docs!

I found that I had missed enabling the Picker API https://console.cloud.google.com/apis/library/picker.googleapis.com

OllyTheNinja
  • 566
  • 3
  • 16
0

This has to do with Google Drive itself, been dealing with the issue for 5 days straight and found out that accessing the Google Picker API for the first time will create something like a session inside the Google Drive, therefore every consecutive attempt will have the same result unless you remove the session following those steps:

1. Go to Google Drive > Settings > Manage Apps > Scroll Down and find your (App Name) on the right side of the container you will see "Options" click on it and press "Disconnect from Drive"

Now the next attempt to open the Picker will give you chance to grant the Scopes again, make sure you have them enabled inside your Google Console. This time should work fine, if not, repeat the steps and review your enabled Scopes.

NOTE: For published apps, you need to be reviewed by Google before asking for Sensitive or Restricted Scopes, if so, go with drive.file

Even more, I'd encountered the same bug just after resolving it, here's why. During the initial attempts to resolve it, I've added those scripts inside the index.html (At the bottom of the body tag):

  <script async defer src="https://apis.google.com/js/api.js"></script>
  <script async defer src="https://accounts.google.com/gsi/client"></script>

Shortly after I saw it working, I removed all the additions compared to an empty project that implements the same logic, just without the Context Providers and OAuth2 in place. Some other lines, that were there before it resolved were (those are in the head tag):

  <meta Content-Security-Policy-Report-Only: script-src="https://accounts.google.com/gsi/client"
    frame-src="https://accounts.google.com/gsi/" connect-src="https://accounts.google.com/gsi/" />
  <meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin-allow-popups">
  <meta http-equiv="Access-Control-Allow-Origin" content="https://docs.google.com">

Narrowing it down, I managed to comment/delete all of the scripts mentioned above except for the:

  <script async defer src="https://apis.google.com/js/api.js"></script>

As the error is being thrown all the time without it. Seems like it's the authentication process. Also, I managed to provide a static access token acquired from Google Console but it resulted in the same error, even though it works fine without a token. Providing the session's token is a different thing, though, it actually skips the authenticating process and differs, even though it has a similar shape.

Ilia Dimchev
  • 11
  • 3