准備工作：
打開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>