GAPI — The Google APIs Client Library for Browser JavaScript

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 GAPI library, how to get started, and how to use features like JavaScript Promises and Google OAuth.

What is GAPI?

Google offers a set of client libraries for calling Google APIs in a variety of languages like Python, Java, and Node.

GAPI is Google’s client library for browser-side JavaScript. It’s used in Google Sign-in, Google Drive, and thousands of internal and external web pages for easily connecting with Google APIs.

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 script tag:

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

At this URL, you get a minified version of GAPI (minified via the Closure Compiler).

A full 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 localhost:8000, we’ll see a blank page that silently loads the API client with no javascript errors:

We’ve got our “Hello, World” webpage up! Now let’s use this gapi client.

Making your First GAPI Request

To make a request in GAPI, let’s create a JS file.

In our HTML, add this line in the body:

<script src="script.js"></script>

Then create a new file script.js with the following contents:

In this piece of code, we’re:

1. Loading the gapi client
2. Initializing the client with our Google API Discovery Document
3. Make an API request
4. Handle the API response results

We’re essentially looking for all Google APIs related to Android. Our webpage will have this response:

There are 4 discoverable APIs related to Android.

OAuth

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:

The error code you’ll see when making an unauthenticated request.

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

GAPI Code

In your 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:

Turn on the Google Docs API

Create Credentials

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:

1. First, create an API key. Don’t select the Restrict Key option (although, you would want to in production.
2. Second, create an OAuth client ID. We want a Web Application. Under Authorized JavaScript origins, enter http://localhost. Again, this is a way to increase security for your API requests. Copy the client ID and ignore the client secret.

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:

gsuitedevs/browser-samples

If you’re interested in reading the documentation for gapi, click here:

google/google-api-javascript-client