Skip to content

Instantly share code, notes, and snippets.

@lupeke

lupeke/gist:6233678

Created Aug 14, 2013
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
Google Contacts API v3 Javascript sample
Raw
gistfile1.html
<html>
<head>
<script src="https://apis.google.com/js/client.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
function auth() {
var config = {
'client_id': 'OAUTH_CLIENT_ID',
'scope': 'https://www.google.com/m8/feeds'
};
gapi.auth.authorize(config, function() {
fetch(gapi.auth.getToken());
});
}
function fetch(token) {
$.ajax({
url: 'https://www.google.com/m8/feeds/contacts/default/full?alt=json',
dataType: 'jsonp',
data: token
}).done(function(data) {
console.log(JSON.stringify(data));
});
}
</script>
</head>
<body>
<button onclick="auth();">GET CONTACTS FEED</button>
</body>
</html>
@YossiH

This comment has been minimized.

Sign in to view
Copy link

@YossiH YossiH commented Nov 24, 2014

works perfectly, thanks! except that I'm running into a same origin policy error. Any suggestions?
@sureshotday

This comment has been minimized.

Sign in to view
Copy link

@sureshotday sureshotday commented Dec 29, 2014

the above fetch function gives same origin policy error. here is the code which will solve this problem.

function fetch(token) {
    $.ajax({
        url: "https://www.google.com/m8/feeds/contacts/default/full?access_token=" + token.access_token + "&alt=json",
        dataType: "jsonp",
        success:function(data) {
                  console.log(JSON.stringify(data));
        }
    });
}
@natesire

This comment has been minimized.

Sign in to view
Copy link

@natesire natesire commented Feb 15, 2015

I get this error
Error: Permission denied to access property 'nodeType'
@hemank-s

This comment has been minimized.

Sign in to view
Copy link

@hemank-s hemank-s commented Apr 14, 2015

Thanks, works perfectly.
@nathantechie9 :- Try editing the redirect ui in the google dev console for your project.
@crutchcorn

This comment has been minimized.

Sign in to view
Copy link

@crutchcorn crutchcorn commented Apr 29, 2015

@hemank-s How would one configure that for localhost?
@bhupeshpant19jan

This comment has been minimized.

Sign in to view
Copy link

@bhupeshpant19jan bhupeshpant19jan commented May 4, 2015

@crutchcorn, create a local http server.
I use python for that,
python -m SimpleHTTPServer
it will run the httpserver for localhost @ port 8000
@Ganesh-tresbu

This comment has been minimized.

Sign in to view
Copy link

@Ganesh-tresbu Ganesh-tresbu commented May 19, 2015

I got this error can any body please help me to fix this issue.
Uncaught SecurityError: Blocked a frame with origin "https://localhost" from accessing a frame with origin "https://accounts.google.com". Protocols, domains, and ports must match.
@crutchcorn

This comment has been minimized.

Sign in to view
Copy link

@crutchcorn crutchcorn commented May 21, 2015

@bhupeshpant19jan I know how to run a local webserver. :D I was wondering how to configure the redirect ui in google dev console
@aman90attari

This comment has been minimized.

Sign in to view
Copy link

@aman90attari aman90attari commented Mar 13, 2016

console.log(JSON.stringify(data)); return bunch of data could you please suggest me how to grab one by one email using loop or any other methods thanks.
@vishaltps

This comment has been minimized.

Sign in to view
Copy link

@vishaltps vishaltps commented Mar 25, 2016

i am using the subdomain in rails. so every time My origin url is different. because i have many subdomains. i m using the lvh.me:3000. local server. how can i set the origin url.. which support every time in any subdomain..??
@j1379826

This comment has been minimized.

Sign in to view
Copy link

@j1379826 j1379826 commented Apr 12, 2016

hi, i have some question i tried to fetch google mail contact through Google_Http_Request and it works fine but still i'm encountering some problem, there is some contact that i added/create api as well and it shows to the google contact in may mail web gmail, but when i'm fetching it all thru api again some emails are missing but still it is visible on the google contact web server. is there anyone know this scenario?
@loganathan-s

This comment has been minimized.

Sign in to view
Copy link

@loganathan-s loganathan-s commented Apr 25, 2016

I am getting this error

Error: Permission denied to access property 'nodeType'
@cs-intellineers

This comment has been minimized.

Sign in to view
Copy link

@cs-intellineers cs-intellineers commented May 3, 2016 •
edited

@loganathan-s: you might want to take a look at this post on stackoverflow
http://stackoverflow.com/questions/28949048/error-permission-denied-to-access-property-nodetype-on-ajax-request-in-firefo
BlackSheep wrote:

I figured this out by taking a closer look at the token object I was sending: the token object contains a field called g-oauth-window, which contains a reference to the DOM object which created it. When you pass this token inside of a $.post request, JQuery will resolve this field, and it makes Firefox bug out. Blanking out this field (setting it to null) makes everything work!

so just change the fetch function of the example on the top to

function fetch(token) {
    token['g-oauth-window'] = null;
    $.ajax({
        url: 'https://www.google.com/m8/feeds/contacts/default/full?alt=json',
        dataType: 'jsonp',
        data: token
    }).done(function(data) {
        console.log(JSON.stringify(data));
    });
}
@ClaudioLoano

This comment has been minimized.

Sign in to view
Copy link

@ClaudioLoano ClaudioLoano commented May 19, 2016

It is simple and works very well, but ....

Does anyone have an idea why you see only a part of the contacts and not all ???
@wikett

This comment has been minimized.

Sign in to view
Copy link

@wikett wikett commented Aug 2, 2016

Really useful.

I have checked the documentation of Google Contacts API for javascript but I couldn't find nothing related to create new Contacts.
Do you know how can I create a new Contact using Google Contacts API v3 Javascript??

Thanks in advance.
@Sriharshak95

This comment has been minimized.

Sign in to view
Copy link

@Sriharshak95 Sriharshak95 commented Sep 14, 2016

this was very helpful but i want to access individual email address from contacts and display in web page. please help with the code.
@OElesin

This comment has been minimized.

Sign in to view
Copy link

@OElesin OElesin commented Sep 21, 2016

@ClaudioLoano, you need to pass the max-results query parameter. Probably increase it to 2000
@fox-alvarez

This comment has been minimized.

Sign in to view
Copy link

@fox-alvarez fox-alvarez commented Oct 11, 2016

hi @Ganesh-tresbu, Could you solve the problem?
Uncaught SecurityError: Blocked a frame with origin "https://localhost" from accessing a frame with origin "https://accounts.google.com". Protocols, domains, and ports must match.
@Mani0702

This comment has been minimized.

Sign in to view
Copy link

@Mani0702 Mani0702 commented Feb 1, 2017

Hi,

I want to retrieve all contacts from my Gmail account. So am using the url as "https://www.google.com/m8/feeds/contacts/{userEmail}/full". But the returned results is for only 25 contacts. Can anyone help me.
@javpla

This comment has been minimized.

Sign in to view
Copy link

@javpla javpla commented Feb 10, 2017

@Mani0702 you should add a query parameter called 'max-results', into the URL
https://developers.google.com/google-apps/contacts/v3/#retrieving_contacts_using_query_parameters
@ghost

This comment has been minimized.

Sign in to view
Copy link

@ghost ghost commented Apr 4, 2017

Hi All,

Was trying to use this api in react js
But getting these error in console:
custom-google-contact-list.jsx?3b92:21 Uncaught (in promise) TypeError: Cannot convert object to primitive value
at eval (eval at (app.7dd4eb6….js:20), :74:9)
at h.r2 (cb=gapi.loaded_0:53)
at xs (cb=gapi.loaded_0:56)
at Wq (cb=gapi.loaded_0:56)
at _.C.uea (cb=gapi.loaded_0:55)
at Ap (cb=gapi.loaded_0:49)

And when clicked on these error it takes me to the line: fetch(gapi.auth.getToken());

I guess am not getting gapi object in these component as its the script file : client.js which gets the gapi stuffs is in my index file.

Please guide guys.

Immediate help will be totally appreciated.

Thanks in advance
@michaelpwilson

This comment has been minimized.

Sign in to view
Copy link

@michaelpwilson michaelpwilson commented Jul 7, 2017

After freshly pasting this into a HTML file and adding my client id, I'm getting this error:

"Uncaught DOMException: Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame."
@thestudiosinc

This comment has been minimized.

Sign in to view
Copy link

@thestudiosinc thestudiosinc commented Sep 22, 2017 •
edited

I have done the googles contact api credential part while i'm running the above code i still got error 401. will you please help me to resolve this.
@wysocki

This comment has been minimized.

Sign in to view
Copy link

@wysocki wysocki commented Oct 5, 2017

  1. That’s an error.
    Error: invalid_client
    The OAuth client was not found.
@silentC0der

This comment has been minimized.

Sign in to view
Copy link

@silentC0der silentC0der commented Jan 12, 2018

Working fine but how to get all record right now i am getting only 25 result at a time.
Thanks
@abwahed

This comment has been minimized.

Sign in to view
Copy link

@abwahed abwahed commented Feb 19, 2018

is there a way where i can get contacts on a page load if already signed in with google?
that would be really helpfull
@Mvallinath

This comment has been minimized.

Sign in to view
Copy link

@Mvallinath Mvallinath commented Apr 25, 2018

All the contacts are retrieved with email,name and id but not able to get Phone number. Used tag gd:phoneNumber but failed to retrieve. Can you help please
@VivienAdnot

This comment has been minimized.

Sign in to view
Copy link

@VivienAdnot VivienAdnot commented Jul 4, 2018 •
edited

Hello guys,

Thank you for this code, it works very well for me and i was able to fetch all my google contacts.
There is only one problem: google try to open a new tab with the auth page, and at first chromes blocks it.
I have to authorize it manually by clicking on the icon and after, it works.
I'm in localhost, maybe in production il will work with https ?

Do you know if I can do something about it ?

Thank you very much again guys :)
@Maggie199

This comment has been minimized.

Sign in to view
Copy link

@Maggie199 Maggie199 commented Sep 25, 2018

This works perfect for quite a long time, but starting last week I'm getting the error msg of Refused to execute script from 'https://www.google.com/m8/feeds/contacts/default/thin?v=3.0&access_token=...&max-results=5000&alt=json&callback=...&_=...' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled. and the contacts are not getting rendered (I can verify that the data is fetched successfully). Just curious if anyone runs into the same issue, and if someone knows how to solve it?
@chico

This comment has been minimized.

Sign in to view
Copy link

@chico chico commented Mar 19, 2019

Replacing https://www.google.com with https://www.googleapis.com fixed the Refused to execute script... issue for me.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment