Google API + AngularJS: The first step – Authenticate and display data!

· Tech · , ,

In one of my previous posts I created a tiny ToDo-app with AngularJS and Parse. In this post I’ll be using the same concept however this time I’ll be using AngularJS with the Google Task API. In this particular example I’ll be demonstrating how easy it is to authenticate and display your tasks. The prerequisite for this example is that you already have a GMail account. This example is divided in two parts,

1) Set up the Google Task API for your application

2) Wire up the Google Task API with your ToDo-app.

 

Part 1: Set up Google Task API for your application

1. Go to Google Developers Console – this is where you’ll administrate, among other, Google API access and credentials

https://console.developers.google.com/project

2. Create a new Project.
3. Go to the newly Project and enable Google Task API.
4. Before we can start accessing the API, we need to first generate an ID. Go to Credentials:

a) Create Client ID
Under AUTHORIZED JAVASCRIPT ORIGINS put the URL of the webserver you’re working with;

– ex if you’re developing locally: http://localhost:5050

Under AUTHORIZED REDIRECT URI, put the URL for the callback;

ex: http://localhost:5050/callback.html

6. Once the credentials are ready, the next step is to form the URL you’ll be call to Google. This URL contains information such as what data your application is requesting from Google, what the redirect URL is, and what is your client id. An example of the URL might look something like this:

https://accounts.google.com/o/oauth2/auth?

scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ftasks+

https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ftasks.readonly+profile&

redirect_uri=http://localhost:57657/Index.html&

response_type=token&

client_id=< YOUR CLIENT ID HERE – see step 4.a >

 

7. Your application is now ready to access the API. Go to the URL you just formed – you should see something like this:

google task auth

You can administrate your 3rd party application list here: https://security.google.com/settings/security/permissions

 

Now, let’s wire it up with AngularJS!

 

Part 2: Wire up the Google Task API with your ToDo-app

1. For this ToDo-app we’ll be using the same architecture as in my previous post.

2. Let’s first define app.js:

'use strict';

// Declare app level module which depends on filters, and services
var todoApp = angular.module('todoApp', []);

//URLs
todoApp.constant("GOOGLE_VALIDATE_TOKEN_URL", "https://www.googleapis.com/oauth2/v1/tokeninfo?access_token=");
todoApp.constant("GOOGLE_TASK_API_URL", "https://www.googleapis.com/tasks/v1/lists/%40default/tasks?access_token=");
todoApp.constant('GOOGLE_AUTH_URL', 'https://accounts.google.com/o/oauth2/auth?scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ftasks+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ftasks.readonly+profile&amp;redirect_uri=http://localhost:57657/Index.html&amp;response_type=token&amp;client_id=759474991499-j0tip3nsv9q0ee6tvv02jber6afsrqrk.apps.googleusercontent.com');

2. Once we have the core building block of the app ready, let’s start of with the Service. The Service has two core features:

1. For every page load the Service validates the token (if there are any) and also checks if you’re coming from a callback URL from Google – the token will then be displayed in the URL as a access_token parameter.

2. A getTasks method that calls the Google Task API and recieves the tasks.

todoApp.service("IgService", function ($http, $q, $location, GOOGLE_VALIDATE_TOKEN_URL, GOOGLE_TASK_API_URL) {

var d = $q.defer();
var token = localStorage.token;
var URL = $location.path();
var validated = false;

//Check for callback URL
if(URL.indexOf("access_token") != -1){
localStorage.token = URL.substring(URL.indexOf("=") + 1, URL.indexOf("&amp;"));
token = localStorage.token;
}

//Validate and parse token
$http.get(GOOGLE_VALIDATE_TOKEN_URL + token)
.success(function (result) {
validated = true;
}).error(function (error) {
validated = false;
});

//Get Google Tasks
this.getTasks = function () {
if (validated) {
$http.get(GOOGLE_TASK_API_URL + token)
.success(function (result) {
d.resolve(result);
}).error(function (error) {
console.log(error);
});
return d.promise;
}
}
});

This is how the token is generated and received from Google:

tokenflow

3. The next step is to put the Controller together; call the Service to retrieve the Google Tasks and then expose the data and Google Authentication URL to the view.

todoApp.controller("IgCtrl", function ($scope, IgService, GOOGLE_AUTH_URL) {
//Get tasks
$scope.tasks = function () {
IgService.getTasks().then(function (result) {
$scope.models = result.items;
});
};

//Auth URL
$scope.GoogleAuth = GOOGLE_AUTH_URL;
});

 

4. The last step is to then put the data to the view in the HTML.

&lt;!doctype html&gt;
&lt;html lang="en" ng-app="todoApp"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;ToDo&lt;/title&gt;
&lt;link rel="stylesheet" href="css/bootstrap.min.css" /&gt;
&lt;link rel="stylesheet" href="css/app.css" /&gt;
&lt;/head&gt;

&lt;body ng-controller="IgCtrl"&gt;

&lt;div class="container" align="center" style="width:500px"&gt;
&lt;div class="row"&gt;
&lt;div class="col-md-6"&gt;
&lt;a href="{{GoogleAuth}}"&gt;
&lt;h4&gt;Google Auth&lt;/h4&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class="col-md-6"&gt;
&lt;a href="" ng-click="tasks()"&gt;
&lt;h4&gt;Get Google Tasks&lt;/h4&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/br&gt;&lt;/br&gt;

&lt;table class="table table-striped"&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Title&lt;/th&gt;
&lt;th&gt;Done&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr ng-repeat="model in models | orderBy: 'updated'"&gt;
&lt;td&gt;{{model.title}}&lt;/td&gt;
&lt;td&gt;
&lt;input type="checkbox" ng-model="model.status" ng-checked="model.status == 'completed'"/&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;

&lt;!--SCRIPTS--&gt;
&lt;script src="lib/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="lib/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;script src="lib/angular/angular.min.js"&gt;&lt;/script&gt;
&lt;script src="js/app.js"&gt;&lt;/script&gt;
&lt;script src="js/controllers/IgCtrl.js"&gt;&lt;/script&gt;
&lt;script src="js/services/IgService.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

And that’s all! Your view should look something like this:

todo google API

GitHub: get the repo here!

Written by almirmesic · · Tech · , ,
NextDavid meets van Gogh