Use Google Drive API from Javascript

Question

I want to extend a project in a way that it can save files to Google Drive. To learn how this works I tried the Quick Start Example from the docs: https://developers.google.com/drive/v3/web/quickstart/js

Following the example I noticed that the example is creating an API key in the developer console. Following the same steps only returns a Client secret. I suspected this to be a naming problem and hoped that the two are the same.

Unfortunately, the example code does not work but loggs the following error:

{"error":{"errors":[{"domain":"usageLimits","reason":"keyInvalid","message":"Bad Request"}],"code":400,"message":"Bad Request"}}

In the request to:

https://content.googleapis.com/discovery/v1/apis/drive/v3/rest?pp=0&fields=kind%2Cname%2Cversion%2CrootUrl%2CservicePath%2Cresources%2Cparameters%2Cmethods%2CbatchPath%2Cid&key=[[my key]]

I checked that the right secret appears in the request url. Setting var API_KEY = '<YOUR_API_KEY>'; to an empty string is a workaround.

How can I debug this further? where do i get the right api key?

Answer 1

I run into this error recently. It is certain that Google Documentation is usually quite good, but in this case, the Google Drive API (https://developers.google.com/drive/api/v3/quickstart/js) it wasn't that clear. For this API in particular, you will require two credentials.

Under your project credentials section, you must create an OAuth 2.0 client for a web application and a API Key.

(Sorry for the Spanish in the screenshots)

Regarding the OAuth 2.0 client, not that I have restricted it to http://localhost

Concerning the API Key, note that I have restricted it to my Google Drive API

Then, in the index.html provided by the documentation, you can set your CLIENT_ID to the one obtained in the OAuth 2.0 client generation, and the API_KEY to the the one generated in the API Key process.