Pàgina d'inici > Uncategorized > Working with google APIs

Working with google APIs

We’ve already seen how to develop a whole web app using the «Web App Scripts». However, many times we would like to keep our web app into another place/server, so in this case we must use the google APIs to interact with the google services. Let’s see how to do it.

Grant access to the APIs

Before coding anything, we must grant the access to the APIs we’re going to use into our google account.

So go to : https://console.developers.google.com/ and create a new project (for instance, project2):

gapi

Then, go to «APIs & auth», «APIs» option of the new Project, and there select the API you want to enable for the project. In our example it will be the «Drive API» :

gapi

And set “enable” the API for the project :

gapi

You may add more information about why your app needs to be connected into the Google Drive Service :gapi

Now go to the «APIs & auth», «Credentials» option, and add a new credential of «OAuth 2.0 client ID» :

gapi

There are 2 authentication methods depending on which sort of use it will be needed:

  1. We could launch requests to APIs which doesn’t need to access private data in the google account, and therefore it doesn’t need authorization, so we can use a simple access with gapi.client.setApiKey(API KEY);
  2. If we have to access private data with the APIs, we have to use the OAuth 2.0.

In the example, we’ll use the OAuth 2.0 method, so we’ll work with private data.

However, before creating it, you must setup the «Consent Screen». This is the screen that will be shown to get the authorization when the app tries to access google API for first time. So go to set it up :

gapi

type a «Product Name» and save it.

gapi

Afterwards, choose the «Web application» type and – for more safety – I advise to filter the origin domains where the app will access (in the example, we’ll use a local server, so we’ll access from local http://localhost) :

gapi

Then, you will get the «Client ID» and «Client Secret» keys. Keep your «Client ID», because we’ll need it later.

gapi

So we’ve already got it. Now we can access the services using the API.

The first time you try to access to the API, if the request parameter «immediate» is false (we’ll see it later), a window screen pop up will ask you for login into google account (if you’re not yet):

gapi

and also to allow the access to the google service:

gapi

Access the API

Now that we have the access available, let’s going to see how to use it.
We’ve built this simple html page to show an easy example :

<!DOCTYPE html>

<html>

<head>

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

https://apis.google.com/js/client.js

var clientId = ’10…………….apps.googleusercontent.com’;

var scopes = ‘https://www.googleapis.com/auth/drive.metadata.readonly&#8217;;

function checkAuth() {

$(‘body’).append(‘

The authorization request has been launched

‘);

gapi.auth.authorize({

‘client_id’: clientId,

‘scope’ : scopes,

‘immediate’: true

},

handleAuthResult);

}

function handleAuthResult(authResult) {

if (authResult && !authResult.error) {

$(‘body’).append(‘

The authorization request has been succesful

‘);

$(‘.send_request’).removeAttr(‘disabled’);

} else {

$(‘body’).append(‘

There was an ERROR!

‘);

}

}

</head>

<body style=”width: 100%; height: 100%; overflow: hidden;”>

<h1> Google API access example </h1>

<button id=”authorize-button1″ onclick=”checkAuth();”> check Authorization </button>

<button class=”send_request” onclick=”method_1_request();” disabled=”true”> Request method 1 (request) </button>

<button class=”send_request” onclick=”method_2_request();” disabled=”true”> Request method 2 (load) </button>

<button class=”send_request” onclick=”method_3_request();” > Request method 3 (CORS) </button>

</body>

</html>

The first we need is include the google API’s JS library into our page (https://apis.google.com/js/client.js). We’re going to launch the request with a javascript code, although there’re many other ways to do it. You can also use PHP, Java, Python, etc.. (https://developers.google.com/api-client-library/).

As you can guess, before anything the app has to authenticate the client access to the API services. In the example, as we’ve set it up before, we’ll use the OAuth 2.0. As you can see in the code, we put a button that calls a javascript function «checkAuth», where we use the gapi.auth.authorize() function. This uses 2 parameters. The first parameter is an object with the following values:

  1. client_id: This is the ID you’ve got after setting up the google API service access. Just put the code there, or use an input parameter to set it.
  2. scope: Here we have to specify which scope (part of the service) we will use. Each API has many scopes, and depending on what our app wants to do, we must choose the most suitable. In the example, we’re using the «drive.metadata.readonly» scope of the Google Drive API. However we could use many others.
  3. immediate: This (true/false) value – as we’ve seen before – sets the app to show the authorization popup window, or not. (true = it doesn’t show the popup / false = it does show the popup).

And the second parameter, is a handler function (handleAuthResult), to be called after the request finishes, in order to handle the answer. The most common we should do here is to test the result of the request with the parameter (authRestful), and then proceed as the app needs.

If you try to execute the example, you’ll see that there’s an authorization request to the API:

gapi

gapi

As you may know, the google API works as a RESTful method. It means that the client (javascript, or any else we’re using) and the server (google) uses a http URL structured interface to compose the messages for sending requests and responses. You can learn more about this process there.

So, let’s see how to build and send a request. Here we have 3 different options. We can either use a simple request call (with gapi.client.request), or a faster technique, that loads previously the API interface. Even more, we also could build manualy an XHR request (with CORS).

Method 1: gapi.client.request

The easier one. We can quickly compose a http request using the gapi.client.request function. This uses an object parameter where we must set the required values to build the request, as the «path» (in the example, we’re using the drive file list request), the «method» (GET by default for reading, although it could be POST / PUT / DELETE), «params» for specific parameters of the request, and «headers» and «body», which we’re not going to use for now.

function method_1_request() {
    $(‘body’).append(‘<p>Drive API direct request has been launched</p>’);
    var restRequest = gapi.client.request({
       ‘path’ : ‘https://www.googleapis.com/drive/v2/files&#8217;,
        ‘method’ : ‘GET’,
        ‘params’ : { ‘maxResults’: 10, ‘q’ : ‘trashed=false’ }
        });
    restRequest.then(
       function(resp) { load_result(resp.result); }, // Success function
       function(reason) { $(‘body’).append(‘<p>There was an ERROR!</p>’); }); // Error function
}

After the request, as we have previously set with the «restRequest.then», it will launches the response handled function (load_result if it goes ok).

The request we’ve used for the example (drive/v2/files), as you may have already read in the documentation, asks google Drive for a metadata list of our stored files, and returns it in a JSON structure:

{
“kind” : “drive#fileList”,
“etag” : etag,
“selfLink” : string,
“nextPageToken” : string,
“nextLink” : string,
“items” : [ files Resource ]
}

As an example, we could print it into the page with and easy dynamic script :

function load_result(resp) {
    $(‘body’).append(‘<p>Drive API direct request has been successful</p>’);
    var files = resp.items;
    if (files && files.length > 0) {
        $(‘body’).append(‘<ul>’);
        for (var i = 0; i < files.length; i++) {
           $(‘body’).append(‘<li>’ + files[i].title + ‘ – ‘ + files[i].id + ‘</li>’);
        }
        $(‘body’).append(‘</ul>’);
    } else {
        $(‘body’).append(‘<p>No files found.</p>’);
    }
}

And get the following result :

gapi

As you’ve seen, after pushing the button, the page launched a XHR request to talk with the API, with the URL and defined parameters:

gapi

Method 2: gapi.client.load

There’s another way to do exactly the same, though with a better performance. We could load the full client API’s interface, with the gapi.client.load() function, and henceforth use it to launch many requests. As you can imagine, it should be faster in a many requests scenario.

After loading the API interface, we can call all its available requests (for instance, those of the Drive API) through each of its functions (like gapi.client.drive.files.list). So we can manage to the same result as in the last method with the following code:

function method_2_request() {
    gapi.client.load(‘drive’, ‘v2’,
function() {
$(‘body’).append(‘<p>Drive API interface loaded</p>’);
var request = gapi.client.drive.files.list({ ‘maxResults’: 10, ‘q’ : ‘trashed=false’ });
request.execute(load_result);
}
);
}

As you can see, the result is the same, and the XHR request has the same structure and parameters :

gapi

Method 3: Direct request with CORS

We have also another method to send a request to a google API: with a direct CORS request.

To take it lighter, we may just load the auth.js library instead of the whole client.js :

https://apis.google.com/js/auth.js <!– use this for only CORS auth –>
https://apis.google.com/js/client.js <!– use this for full client API –>

and then, after getting permission from the gapi.auth.authorize function, built the XHR request directly:

function method_3_request() {
$(‘body’).append(‘<p>Launching a manual request with CORS</p>’);
gapi.auth.authorize({
client_id : clientId,
scope : scopes,
immediate : true},
function() {
var oauthToken = gapi.auth.getToken();
var xhr = new XMLHttpRequest();
var url_request = ‘https://www.googleapis.com/drive/v2/files?maxResults=10‘; // + ‘&access_token=’ + encodeURIComponent(oauthToken.access_token);
$(‘body’).append(‘<p>xhr: ‘ + url_request + ‘</p>’);
xhr.open(‘GET’, url_request);
xhr.setRequestHeader(‘Authorization’, ‘Bearer ‘ + oauthToken.access_token);
xhr.onload = function() {
var obj_res = JSON.parse(xhr.responseText);
load_result(obj_res);
};
xhr.send();
});
}

This is the same way as if we would have buit a simple XMLHttpRequest.

Nevertheless, we shouldn’t forget adding the authorization token to the request. We have 2 ways to do it:

  1. Add the access_token parameter to the URL:
    var oauthToken = gapi.auth.getToken();
    var url_request = ‘https://www.googleapis.com/drive/v2/files?maxResults=10‘ + ‘&access_token=’ + encodeURIComponent(oauthToken.access_token);
  2. Or add it to the request’s header (with the setRequestHeader function):
    var oauthToken = gapi.auth.getToken();
    xhr.setRequestHeader(‘Authorization’, ‘Bearer ‘ + oauthToken.access_token);

There’s more info about this method right here.

Advertisements
Categories:Uncategorized
  1. Encara no hi ha cap comentari.
  1. No trackbacks yet.

Deixa un comentari

Fill in your details below or click an icon to log in:

WordPress.com Logo

Esteu comentant fent servir el compte WordPress.com. Log Out / Canvia )

Twitter picture

Esteu comentant fent servir el compte Twitter. Log Out / Canvia )

Facebook photo

Esteu comentant fent servir el compte Facebook. Log Out / Canvia )

Google+ photo

Esteu comentant fent servir el compte Google+. Log Out / Canvia )

Connecting to %s

Enfilant el camí

Visualitzant el present per construir el futur

El Noguer

Visualitzant el present per construir el futur

Visualitzant el present per construir el futur

%d bloggers like this: