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
  • https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
  • https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
  • https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.min.css
• 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.

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

References

Use OAuth to import contacts from Gmail: https://tome.oauth.io/providers/gmail/import-gmail-contacts