Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
google login by javascript
<!DOCTYPE html>
<html>
<head>
<title>Google login example</title>
<script src="https://apis.google.com/js/client:platform.js" async defer></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style media="screen">
h3 {
color:green;
}
</style>
</head>
<body>
<button name="button" id="disconnect" style="display:none;">Disconnect</button>
<!-- https://developers.google.com/+/web/signin/?hl=en#button_attributes -->
<div id="gConnect">
<button class="g-signin"
data-clientid=" %%% YOUR CLIENT ID HERE %%% "
data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/contacts.readonly"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-callback="_onSignInCallback"
data-theme="dark"
data-cookiepolicy="single_host_origin">
</button>
</div>
<h2>
Result
</h2>
<div id="result">
<h3>
About me from plus API
</h3>
<div id="me_from_plus">
</div>
<h3>
People from plus API
</h3>
<div id="people_from_plus_api">
</div>
<h3>
Contact from contacts API
</h3>
<div id="contacts_from_contact_api">
</div>
</div>
</body>
<script type="text/javascript">
// https://developers.google.com/google-apps/contacts/v3/index#getting_started
// http://vincentwoo.com/2012/08/15/the-api-for-googles-most-valuable-resource-sucks/
function disconnect() {
$.ajax({
type: 'GET',
url: 'https://accounts.google.com/o/oauth2/revoke?token=' +
gapi.auth.getToken().access_token,
async: false,
contentType: 'application/json',
dataType: 'jsonp',
success: function(result) {
console.log('revoke response: ' + result);
$('#gConnect').show();
$('#disconnect').hide();
$("#result div").empty();
},
error: function(e) {
console.log(e);
}
});
}
function _onSignInCallback(authResult){
gapi.client.load('plus','v1')
.then(function() {
console.log('authResult', JSON.stringify(authResult));
if (authResult['access_token']) {
$('#gConnect').hide();
$('#disconnect').show();
loadSelf();
loadPlusFriends();
loadContacts();
} else if (authResult['error']) {
console.error("failed to authentication")
}
});
}
function loadSelf(){
gapi.client.plus.people.get({
'userId': 'me'
}).then(function(res) {
var me = res.result;
$('#me_from_plus').empty()
.append(JSON.stringify(me))
.append($('<p><img src=\"' + me.image.url + '\"></p>'))
},function(e){
console.error("failed to load self",e);
});
}
function loadPlusFriends(){
gapi.client.plus.people.list({
'userId': 'me',
'collection': 'visible'
}).then(function(res) {
var people = res.result;
$('#people_from_plus_api').empty().append(JSON.stringify(people));
for (var personIndex in people.items) {
person = people.items[personIndex];
$('#people_from_plus_api').append('<img src="' + person.image.url + '">');
}
},function(err){
console.error("failed to load people",e);
});
}
function loadContacts(){
var urls =[];
$.ajax({
url: 'https://www.google.com/m8/feeds/contacts/default/full?alt=json',
dataType: 'jsonp',
data: gapi.auth.getToken()
}).done(function(data) {
$('#contacts_from_contact_api')
.empty()
.append(JSON.stringify(data.feed));
data.feed.entry.forEach(function(e){
var pushed = false;
e.link.forEach(function(l){
if (l.type === "image/*" && !pushed){
urls.push(l.href + "?"+ $.param({"access_token":gapi.auth.getToken().access_token, "token_type":gapi.auth.getToken().token_type}));
pushed = true;
}
});
});
function staggerImages(index) {
if (index == urls.length) return;
var img = new Image();
var notFound = false;
img.onload = function() {
staggerImages(index + 1);
};
img.onerror = function() {
img.src = "404.png"
};
img.src = urls[index];
$('#contacts_from_contact_api').append(img);
}
staggerImages(0);
});
}
$(function(){
$('#disconnect').on("click", disconnect);
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment