准备工作：
打开Google API 控制台 : https://code.google.com/apis/console
点击 My Project (我的项目)
按照图示流程，您将完成一个google+ 登录API。快来尝试一下吧。
参考API地址：https://developers.google.com/
1、
2、
3、
4、
5、
6、
7、
8、
9、
10、
11、
12、
13、代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
// 加载google js文件
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js?onload=render'; // 后边加onload触发初始化函数
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
// 初始化函数
function render() {
gapi.signin.render('google_login', {
'callback': 'signinCallback',
'approvalprompt': 'auto',
// 这里写入你的App ID
'clientid': '732990474661-01mhrf8i4hlbustv0pv4mnokf2vm50mr.apps.googleusercontent.com',
'cookiepolicy': 'single_host_origin',
'requestvisibleactions': 'http://schemas.google.com/AddActivity',
'scope': 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email'
});
}
// 回调函数
function signinCallback(authResult) {
if (authResult) {
// 是否有错
if(authResult["error"]==undefined){
// 隐藏登录按钮
$("#google_login").hide();
// 加载api
gapi.client.load('plus','v1',function(){
// 传入me即视为自己
var request=gapi.client.plus.people.get({'userId':'me'});
// 回调函数
request.execute(function(profile){
// 取得头像、生日、名字。只有公开的资料才能获取
$("#name").html(profile["displayName"]);
$("#age").html(profile["ageRange"]["min"]);
// sz=200 即图片大小200
$("#head").attr("src",profile["image"]["url"]+"&sz=200");
});
});
// 加载api
gapi.client.load("oauth2","v2",function(){
var request=gapi.client.oauth2.userinfo.get();
request.execute(function(obj){
// 取得登录邮箱并显示
if(obj["email"]){
$("#email").html(obj["email"]);
}
});
});
// 显示登录后的信息
$("#vip").show();
}
}
} // 取消与应用关联的代码
function disconnectUser() {
var revokeUrl = 'https://accounts.google.com/o/oauth2/revoke?token=' + gapi.auth.getToken().access_token;
$.ajax({
type: 'GET',
url: revokeUrl,
async: false,
contentType: "application/json",
dataType: 'jsonp',
success: function(nullResponse) {
// 成功以后隐藏登录信息
$("#vip").hide();
// 显示登录按钮
$("#google_login").show();
alert("退出成功！");
},
error: function(e) {
alert("取消關聯失敗！請到 https://plus.google.com/apps 手动解除！");
window.open("https://plus.google.com/apps");
}
});
}
} </script>
</head>
<body>
<div id="vip" style="font-size:14px;font-weight:blod;color:red;display:none;">
<img id="head" /><br />邮箱：<span id="email"></span><br />年龄：<span id="age"></span>
<br />姓名：<span id="name"></span><br /><a href="javascript:;" onclick="disconnectUser()">退出</a>
</div>
<span id="google_login"><a href="javascript:;">login</a></span>
</body>
</html>