Use OAuth to Import Gmail Contacts In 15 Lines

#oauth

#oauth2

#javascript

#gmail

Goal

We found that the simplest way to import contacts from Gmail is to use OAuth. Here is a short Javascript code snippet to do it in less than 10 lines using OAuth.io.

Code Snippet

You can test importing your Gmail contacts using the code snippet below. Click on the social button to log into your Gmail account, and it will get the import the contacts from that Gmail account.

https://jsfiddle.net/xodzka1f/

Code Explanation

HTML

<a id="drive-button" class="btn btn-block btn-social btn-vimeo">
  <i class="fa"></i> Contact list
</a>

CSS

None

Javascript

$('#drive-button').on('click', function() {
  // Initialize with your OAuth.io app public key
  OAuth.initialize('YOUR_OAUTH_IO_KEY');
  // Use popup for oauth
  OAuth.popup('google_contact').then(provider => {
    console.log('provider:', provider);

    provider.get('/m8/feeds/contacts/default/full').then(data => {
      console.log('Contacts:', data);
    });
  });
})

External Requirements

This Javascript code has external requirements:

jQuery - HTML element manipulation
- https://code.jquery.com/jquery-3.2.1.min.js
bootstrap, font-awesome - Look-and-feel of social buttons and icons
oauth-io javascript library - Simplifies OAuth usage by hiding the nuances in the OAuth implementation of various OAuth providers, e.g., LinkedIn, Twitter, etc. behind the ratified standard OAuth2 interface
- https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js

Step-by-step Guide

Here is a summary of the steps to create this social button to get file list from Dropbox on a user's behalf using OAuth2.

Create a Gmail account, if you do not have one
Create an app on Google application using this simple step-by-step guide
Copy your Google app client id and client secret
Signup for OAuth.io account
Link your Google app with OAuth.io by pasting your Google app client id and client secret into OAuth.io
Copy the OAuth javascript snippet (https://jsfiddle.net/xodzka1f/) on to your web page