Notice that the JavaScript line above includes an onload property
specifying the function to be used as a callback after the library loads.
Replace init with the name of your page initialization function if you did
not name it init.

This example loads helloworld v1 in the JavaScript client library and
calls callback once the API is loaded.

Replace apiRoot in the above code with the root URL of your API (for
example, https://example-project-12345.appspot.com/_ah/api) to load your own
APIs. Replace helloworld and v1 with the name and version of your API
backend.

Calling an Endpoints API

Once the JavaScript client is enabled for an API, you can make calls to the API
using the Google JavaScript client object
gapi.client.
The following two calls show an insert and a list request made to the Greetings API:

During development you may want to use the Chrome developer tools JavaScript
console, which automatically suggests available method names when you are
manipulating gapi.client. With the above example API, typing
gapi.client.tictactoe. into that console results in the Chrome developer tools
suggesting scores as a possible completion.

Adding authentication support with OAuth 2.0

Built-in support for OAuth is provided by the JavaScript client library for use
with Google APIs and Cloud Endpoints APIs.

Authorization is provided by the built-in authorize method. When you want to
require a user sign-in, you call the following:

SCOPES are the list of OAuth 2.0 scopes that must be granted to tokens sent to your backend. At minimum, you should request access to the userinfo.email scope: https://www.googleapis.com/auth/userinfo.email which grants access to the user’s email address.

mode is either false or true, depending on whether or not you’d like to present the explicit authorization window to the user. If the user has never authorized your application before, calling authorize with mode: true (no authorization window) will fail. The correct
situation to use each modes is described below.

callback is the callback function to call once authorize completes.

Sample auth flow for a JavaScript client

Here’s an example flow for authorizing a user in a page using the JS client:

Note that the code sample assumes init() to be the callback function you provided when loading the JS client library. Inside init(), your API and the OAuth 2.0 API are loaded. After the OAuth 2.0 API is loaded, the sample attempts to authorize the user using immediate mode (no authorization prompt). If immediate mode succeeds, the sample sets the token for future requests to the ID token required by your Endpoint's backend.

If your user has previously authorized your application, the user is signed in, and your application can proceed normally. Authorization headers are automatically supplied with any requests.

If the user has not authorized your application previously (or there is no signed in user in the browser session), you’ll need to call authorize again, without using immediate mode. Because this method triggers a popup, it must be called as a result of a user action in the browser, such as clicking a link or button:

Signing out

There is no concept of signing out using the JS client library, but you can
emulate the behavior if you wish by any of these methods:

Resetting the UI to the pre signed-in state.

Setting any signed-in variables in your application logic to false

Calling gapi.auth.setToken(null);

Testing a JavaScript client against a local development server

You can test your client against a backend API running in production App Engine
at any time without making any changes. However, to test your client
against a backend API running on the local development server, you must change
the JavaScript origin in the backend API's web client ID.

To make these required changes:

Change the JavaScript origins in the credentials page for your project.Create client ID.

Click Web application.

Use the default name or supply a new one.

Change the Authorized JavaScript origins field to http://localhost:8080.

Make sure you don't change the default port, which is 8080, because this
is what you used to set the authorized JavaScript origins previously. (You can
change the port if you wish, so long as the authorized JavaScript origins and
the local dev server are both set to the same port.)

Test your client as desired.

Important: If the backend API is Auth-protected, your client must provide
support as described above under
Adding Authentication Support with OAuth 2.0.
However, when running against the local dev server, no
credentials page is displayed in response to a user's attempt to sign in. Instead, the sign-on simply occurs, granting the
user access to the protected API, and the user returned is always example@example.com.

Sample source code

For a sample backend API and JavaScript client that illustrates the concepts described above, see the
Hello Endpoints
sample.