2

On this page there is an example of how to include the Google Drive Picker in a plain JavaScript web page. I've copied and pasted the sample code into a file on my machine, and followed the instructions for replacing the example strings with my own API key, Client ID, and App ID.

If I serve the page from localhost using python -m SimpleHTTPServer 8000, and visit the page, it fails in two ways. First, the Drive dialog that pops up says "There was an error! The API developer key is invalid." Second, on the console, I see the errors below. Searching the web tells me that this is probably because I'm using a non-HTTPS connection, from which the Google API tries to make an HTTPS connection to Drive. (Contrary to what they errors seem to say.)

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('http://localhost:8000').
(anonymous) @ cb=gapi.loaded_0:46

Uncaught ReferenceError: init is not defined
    at onload (https://docs.google.com/picker?protocol=gadgets&origin=http%3A%2F%2Flocalho…22%7D))&rpctoken=6pstmf1ss7m2&rpcService=v8gvn97850jj&thirdParty=true:3:54)

If I serve the page from localhost using this handy python script for an SSL web server, and visit the page, it fails in a different way. The Drive dialog that pops up says the following.

400. That’s an error.

Error: origin_mismatch
Request Details
        proxy=oauth2relay379676703
        immediate=false
        scope=https://www.googleapis.com/auth/drive
        origin=https://localhost:8000
        response_type=token
        redirect_uri=postmessage
        state=912029351|0.3907265328
        client_id=[REDACTED]
        include_granted_scopes=true
        jsh=m;/_/scs/apps-static/_/js/k=oz.gapi.en.eBn7I_cE2GI.O/m=__features__/am=AQ/rt=j/d=1/rs=AGLTcCNXKKlDNVVUdz0bvaxNh7fYe-hpSQ
        gsiwebsdk=1
That’s all we know.

Although this seems to suggest that the Drive API doesn't want to hear from localhost, I have the credentials for the app (in my Google Developer Dashboard) set to accept requests from https://localhost:8000/* and http://localhost:8000/*.

What am I doing wrong?

Nathan
  • 1,451
  • 1
  • 15
  • 28

1 Answers1

1

You can't use localhost as the 'origin' address - that's a limitation of Google APIs. To deal with this issue, you might want to go for one of the options suggested in this question - either use a URL-shortener or configure your hosts file to have a custom URL resolved to 127.0.0.1.

Community
  • 1
  • 1
Eduard Malakhov
  • 1,095
  • 4
  • 13
  • 25
  • I cannot use the URL shortener method, since my URL contains a port, which goo.gl does not support. I edited my /etc/hosts file as suggested in the question you linked to, and that fake URL now loads from localhost as it should, but the behavior is identical to what happens if I simply use localhost instead. In other words, all the errors in my original question remain; I experienced no improvement by removing "localhost" from the URL. – Nathan Nov 15 '16 at 15:23
  • @Nathan can you please provide the error you see after editing hosts file? – Eduard Malakhov Nov 15 '16 at 15:28
  • The second of the two errors in my original post happens when I attempt to access localhost through the URL mydevserver.example.com, which /etc/hosts reroutes to localhost. I've tried with both http and https, having added mydevserver.example.com to my Google API credentials shortly after your last comment, then waiting 30 minutes to be sure it had taken effect. – Nathan Nov 15 '16 at 16:11
  • @Nathan if the error message is exactly the same and says **origin=https://localhost:8000**, then your're probably not loading the api via your custom url, but via localhost. – Eduard Malakhov Nov 15 '16 at 16:20
  • My apologies; I should have been more specific. Several things changed about the error, but all were superficial (e.g., the state) except for the origin, which now reads origin=mydevserver.example.com. – Nathan Nov 15 '16 at 16:22
  • @Nathan have you enable access via mydevserver.example.com in your app configuration as you did for localhost before? – Eduard Malakhov Nov 15 '16 at 16:24
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/128185/discussion-between-nathan-and-eduard-malakhov). – Nathan Nov 15 '16 at 16:25