Implementing the Google Contacts AuthSub flow with jQuery

Google AuthSub follows a common oAuth style handshake flow. Unfortunately, it is not immediately clear how to implement this flow with the AuthSub GData JavaScript Library using their documentation examples or the library’s API.

I recently implemented the flow for a Google Contacts viewer that we are working on here at Bocoup, and thought I would share the boilerplate I came up with.

In the boilerplate below, I am specifically focusing on authenticating users with AuthSub Gdata Library and getting their Google Contacts data using the Google Contacts GData JavaScript API.

You can download the full code here to get started. Note: this code needs to be served by HTTPS. I’ll work on getting a live demo up.

The JavaScript Code:

The JavaScript code below creates login, logout, and getContacts buttons which allow the user to AuthSub into Google, grant access to their Google contacts to the current domain, get their contacts, and revoke access to the current domain. Read through the inline comments in the JavaScript code to see how everything works.

The HTML Document:

And here is a look at the HTML document that the above JavaScript initializes on:

This entry was posted by Boaz Sender (@boazsender) on June 08, 2011 in AJAX, Google, JavaScript and jQuery.

Tweet