get gmail contacts Google Contacts API with javascript

10,724

I ran into the same problem, I solved it by first retrieving an access token, and then call the API directly. This is because the javascript api (gapi) does not support retrieving google contacts.

Since it was quite the hassle, I wrote a blogpost about it here: https://labs.magnet.me/nerds/2015/05/11/importing-google-contacts-with-javascript.html

Basically this is how I solved it:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">
          var clientId = 'your Client ID';
          var apiKey = 'Your API Code';
          var scopes = 'https://www.googleapis.com/auth/contacts.readonly';

          $(document).on("click",".googleContactsButton", function(){
            gapi.client.setApiKey(apiKey);
            window.setTimeout(authorize);
          });

          function authorize() {
            gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthorization);
          }

          function handleAuthorization(authorizationResult) {
            if (authorizationResult && !authorizationResult.error) {
              $.get("https://www.google.com/m8/feeds/contacts/default/thin?alt=json&access_token=" + authorizationResult.access_token + "&max-results=500&v=3.0",
                function(response){
                  //process the response here
                  console.log(response);
                });
            }
          }
        </script>
        <script src="https://apis.google.com/js/client.js"></script>
        <button class="googleContactsButton">Get my contacts</button>
  </body>
</html>

10,724

Author by

TheDean

Updated on June 14, 2022

Comments

TheDean about 2 years

it always says The page you requested is invalid. how can i fetch the contacts with javascript using google contacts api i have valid scope and Client ID

google.load('gdata', '2.x');
    debugger
    google.setOnLoadCallback(function () {
        if (window.location.hash == "") {
            if (!checkLogin()) {
                logMeIn();
            } else {
                var feedUrl = "https://www.google.com/m8/feeds/contacts/default/full";
                query = new google.gdata.contacts.ContactQuery(feedUrl);
                query.setMaxResults(5000);
                myService = new google.gdata.contacts.ContactsService('exampleCo-exampleApp-1.0');
                myService.getContactFeed(query, function (result) {
                    document.cookie = "g314-scope-0=";
                    window.opener.parseGmailContacts(result.feed.entry);
                    close();
                }, function (e) {
                    alert(e.cause ? e.cause.statusText : e.message);
                });
            }
        }
    });
    function logMeIn() {
        scope = "https://www.google.com/m8/feeds";
        var token = google.accounts.user.login(scope);
    }
    function logMeOut() {
        google.accounts.user.logout();
    }
    function checkLogin() {
        scope = "https://www.google.com/m8/feeds/";
        var token = google.accounts.user.checkLogin(scope);
        return token;
    }

i think there is something wrong with

  var token = google.accounts.user.checkLogin(scope);
            return token;

token retuns ""(empty value here), how can i get the value of the token to get the contacts , plz help

skytreader over 7 years

This works from a local HTML file but when I use it in our project in a server, I get CORS header ‘Access-Control-Allow-Origin’ does not match ‘*’. Any ideas?
Samuel Liew almost 6 years

It's good practice on Stack Overflow to add an explanation as to why your solution should work. For more information read How To Answer.
Kiquenet about 5 years

clientId and apiKey not secure in source code javascript ?