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.

Answer 2

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

Means that the request you have made has not been properly authenticated.

API key is for accessing public data. Oauth2 client id and secret will be used to access private user data which file.list is. So i dont think this is a naming problem. Your code should be popping up requesting access of the user.