Importing gmail contacts in your website using javascript

|
| By Webner

Importing gmail contacts in external website is common these day where you can login to gmail from within external website and then access your contacts directly inside external website. For example, the requirement could be to allow user to refer their friends to use your website and for that they may need access to their gmail account as usually people do not remember email ids of their contacts. To let them directly access their gmail account through your web application, you need to use Google Contacts API.

Before using the API, you need to enable the Contacts API from Google developer console. The complete process can be followed using information at this link:

https://developers.google.com/google-apps/contacts/v3/

After enabling the Contacts API and getting credentials such as clientId, client secret etc. you are ready to use the feature in your website. Add this code in your webpage to get the contacts list.

<html>

<body>
 <script>
 gapi.load('client', function() { // Loads the client library interface with Discovery Document URL or JSON object. 
 //console.log('gapi.client loaded.');
 });

 var clientId = ‘Your clientId '; // clientId received from API
 var apiKey = ’Your Api Secret’; // client secret key from API 
 var scopes = 'https://www.google.com/m8/feeds'; // enables read/write access to contacts

 $(document).on('click', '.importContact', function() {
 gapi.client.setApiKey(apiKey); //sets apiKey for application
 window.stop();
 checkAuth();
 });

 function checkAuth() {
 gapi.auth.authorize({ //authorizes the client using api key fields and calls handleAuthResult method
 client_id: clientId,
 scope: scopes,
 immediate: false
 }, handleAuthResult);
 }

 function handleAuthResult(authResult) {
 window.stop();
 if (authResult && !authResult.error) {
 //if no authorization error, then it will show the login popup
 $.get('https://www.google.com/m8/feeds/contacts/default/full?alt=json&access_token=' + authResult.access_token + '&max-results=700&v=3.0',
 function(response) {
 //Handle Response as per requirement
 window.stop();
 });
 }
 }
 </script>

 //anchor to show the gmail login popup
 <a href="" class="importContact">Import contact</a>
</body>

</html>

Leave a Reply

Your email address will not be published. Required fields are marked *