One of the easiest ways to use an API is by not having a server at all. Some applications are perfect for client-side-only code. The
GAPI library offers a simple, flexible way to call Google APIs from your browser.
In this blogpost, you’ll learn a bit about the
Promises and Google OAuth.
Google offers a set of client libraries for calling Google APIs in a variety of languages like Python, Java, and Node.
First launched at Google I/O in 2012 to provide easy Google identity and API access, the client library is now used for thousands of domains and currently handles billions of Google API queries every day.
Getting Started with GAPI
The beautiful part about GAPI is that you do not need to download any library to use the API client. In an HTML file, simply include this
At this URL, you get a minified version of GAPI (minified via the Closure Compiler).
index.html may look like this:
We can serve this HTML file locally using
python -m SimpleHTTPServer.
…or use Node:
npm install http-server -g && http-server -p 8000.
If we open
We’ve got our “Hello, World” webpage up! Now let’s use this
Making your First GAPI Request
To make a request in GAPI, let’s create a JS file.
HTML, add this line in the
Then create a new file
script.js with the following contents:
In this piece of code, we’re:
- Loading the
- Initializing the client with our Google API Discovery Document
- Make an API request
- Handle the API response results
We’re essentially looking for all Google APIs related to
Android. Our webpage will have this response:
For many APIs, you’ll need to properly authenticate with the Google API before making a request. For example, making an API request using the Google Sheets API. If you don’t authenticate, you’ll see this error in your API response:
Google APIs that connect to user data use OAuth 2 for authentication.
Google Docs API + GAPI
Let’s get into something more advanced by using the Google Docs API. The Google Docs API allows you to read and write Docs programmatically. I think it’s a great API for GAPI for quickly building applications backed by Docs.
It’s free to use, and by default you’re allowed 300 read and 60 write queries every minute per user.
Let’s walk through how to enable the API:
- Go to https://console.cloud.google.com/apis/api/docs.googleapis.com
- Enable the API
index.html file, copy the following script:
Enable the Google Docs API
Then, create both a
Client ID and
API Key for your API client by clicking on the two blue buttons on this Google Cloud Console page:
For this application, we’ll create an API Key for the Google Docs API, and an OAuth client ID for OAuth identification.
We’ll use these two values and paste them in our application here:
var CLIENT_ID = '<YOUR_CLIENT_ID>';
var API_KEY = '<YOUR_API_KEY>';
First, go to https://console.cloud.google.com/apis/credentials and Create credentials:
- First, create an API key. Don’t select the Restrict Key option (although, you would want to in production.
http://localhost. Again, this is a way to increase security for your API requests. Copy the
client IDand ignore the
Once you’ve pasted them, try loading the webpage again and press the
Authorize button. You should go through a Google OAuth prompt and see a request being made to the Google Docs API!
Wicked! We successfully called a Google API with the GAPI client!
Thanks so much for reading! If you’re interested in learning more advanced samples with G Suite, click here:
Browser samples for G Suite API docs. Clone this repository. Follow the README instructions in the API folder to run…
If you’re interested in reading the documentation for
gapi, click here: