December 2017 : This tutorial has not been updated for a while now and there could be breaking changes. I suggest that you instead reference the official documentation at https://cloud.google.com/endpoints/docs/frameworks/java/about-cloud-endpoints-frameworks

Welcome to Part 6 of the Google Cloud Endpoints Tutorial.

The full series:

Part 1 : We looked at writing a Google Cloud Endpoints class manually by using the various annotations and Exception classes that are available. We create a Quotes API that provided a JSON + REST based interface to manage Quotes (add, modify, delete and retrieve quotes).

Part 2 : We generated the Google Cloud Endpoints class from a JDO Annotated Entity class by using the Code Generation tools provided in the library.

Part 3 : Generated the Cloud Endpoints Client Library for Android and wrote an Android application that invokes the Endpoints API.

Part 4: We wrote a JavaScript client for our Endpoints API.

Part 5: Securing our API

Part 6: Calling a Secured API from a JavaScript client.

Part 7 : Calling a Secured API from an Android client.

IMPORTANT

This series covers Google Endpoints with Eclipse.

If you are looking for using Google Cloud Endpoints with Android Studio, I recommend my series on Gradle, especially the following parts:

Part 8 : Gradle + App Engine + Cloud Endpoints + Android Studio

Part 9 : Gradle + App Engine + Cloud Endpoints (Persistence) + Android Studio

Part 10 : Consuming Endpoints in your Android application

I have also published a list of Cloud Endpoints Tips:

In this episode

So far in this series, we looked at writing a Quote API and in the last episode, we introduced how to secure your API methods so that only authorized clients can invoke the methods. We secured the insertQuote method in the last episode and in this episode, we are going to see how to make secure calls from our JavaScript client.

Keep in mind that we had written a JavaScript client for our Endpoints API earlier in Episode 4, so please take a look at that first.

What do you need ?

You have a working development environment for Google App Engine. This includes the Google Eclipse plugin.

The API Project 2 (Quotes Endpoint Project) loaded in your Development Environment. This is the same as the previous episode, except that we will be focusing on the apitest.html , which is our API client.

My Development Environment

This remains the same, no changes at all. My development environment is given below:

Eclipse Juno

Google Eclipse plugin with App Engine SDK 1.8.8.

Mac + Windows machine (I kept switching from one to another, to keep everyone happy ;-))

Web Client in Action

Let us first try to understand what we are going to create here by seeing the application and security in action.

I am accessing the client at http://mybackendapi.appspot.com/apitest.html. I have currently logged out from all of my Google Accounts.

When I access the above page, I get the following page:

Notice the Login button shown above. This button is shown if there was no Google Account that was already logged in. If the User was logged in, this button would be invisible and instead we would be having a Welcome message.

Now, we will not yet click on the Login button. Instead we will attempt to insert a new Quote without logging in and verify if the insertQuote method is indeed secured or not. We enter test values in the Author Name and Quote as shown below and click on the Insert Quote button. This will bring up a popup as shown below. In fact this is the response that we have simply displayed and which came from the Endpoints API HTTP Response:

In the JavaScript code, I log out the response to the console and which you can see below:

Now, I click on Login and go through the standard OAuth dance, where I choose a Google Account to log in with, give my credentials and then authorize the application. If all is well, I am logged into our client now and we retrieve the User Name from the OAuth API and display a welcome sign on the top, as shown below:

Now, I can give my sample values for the Author Name and Quote and click on Insert Quote.

The record will get inserted and when I do a List Quotes , I will see the new record that I added:

Let us discuss the code now.

Web Client Id

If you recollect, in the earlier episode, we had visit the Google Cloud Console for our project and create the OAuth Client Id. A screenshot of the Web Client Id is shown below.

Additionally, we had updated the @APIMethod for insertQuote and provided the clientIds, that included the Web Client Id and then deployed the API.

JavaScript Client

The entire source code for apitest.html is shown below. The code snippets for Login functionality has been borrowed from the sample code provided in the official document by Google.

Let us look at the main points. Parts of the code should be familiar if you have worked with the JavaScript client that was introduced in Part 4 of this series.

We have added a Login button to the User Interface.

<div id=”login”>

<input id=”loginButton” type=”button” value=”Login”/>

</div>

As covered in an earlier episode, we load the Client API and once the API is loaded, our init method is invoked.

method is invoked. In our init method, we are loading two APIs now : the Quote Endpoint API as we have done earlier and the OAuth API.

method, we are loading two APIs now : the Quote Endpoint API as we have done earlier and the OAuth API. Once both the APIs are successfully loaded, we are invoking the signin method. To the signin method, we are providing two parameters : an immediate mode parameter whose value is set to true and a callback function : handleAuth .

method. To the method, we are providing two parameters : an immediate mode parameter whose value is set to and a callback function : . In the signin method, we invoke the gapi.auth.authorize method. To that method, we pass the client Id , scope , immediate mode and the callback (handleAuth). Notice that we have initialized the client Id and scope values in the code and they are the same values as the ones we have created via the Google Cloud Console OAuth New Client creation page. These must match for the authentication/authorization to succeed.

method, we invoke the method. To that method, we pass the , , and the (handleAuth). Notice that we have initialized the client Id and scope values in the code and they are the same values as the ones we have created via the Google Cloud Console OAuth New Client creation page. These must match for the authentication/authorization to succeed. In the handleAuth method, we get the current User Object. If the User is found with no errors, then we hide the Login button and display the Welcome message. If the User is not found, the Login button is made visible. This is what happens when our page is loaded i.e. Login button is shown or not shown depending on whether the user is logged in or not. This is also known as the immediate mode.

method, we get the current User Object. If the User is found with no errors, then we hide the Login button and display the Welcome message. If the User is not found, the Login button is made visible. This is what happens when our page is loaded i.e. Login button is shown or not shown depending on whether the user is logged in or not. This is also known as the immediate mode. Now, if the Login button is shown i.e. authorization still has to be done, then we have a handler for our Login Button as shown below:

document.getElementById(‘loginButton’).onclick = function() { signin(false,handleAuth); }

If Login Button is clicked, the signin method is called again with the immediate mode set to false and the callback method as the same one i.e. handleAuth . This will invoke the entire Google Login popup and you go through with the Authentication and Authorization cycle.

method is called again with the set to and the callback method as the same one i.e. . This will invoke the entire Google Login popup and you go through with the Authentication and Authorization cycle. The insertQuote method is slightly modified to display the error in case there is a problem executing the gapi.client.quoteendpoint.insertQuote method.

Project Source Code

The source code for the MyAPIProject2 is available in Github. You can download the entire source code over here.

Hope you liked this episode of the Google Cloud Endpoints tutorial. The next episode will cover making secured API calls from an Android client.