上一篇「使用 Google API 處理登入登出功能，取得使用者基本資料」，能獲得的會員資訊有 email、姓名、頭像等等，算是比較基本的資訊，後續能做的主要是 email 行銷、聯絡會員等行動。
如果有研發新產品、瞭解消費者偏好這類的規劃，至少需取得使用者「性別」、「年齡層」等資訊，才能統計、分析使用者在網站進行的行為模式及購物偏好，進而針對不同性別、不同年齡層的使用者，找出或設計出合適的產品及服務。
只要有 Google 帳號，可在「關於我」頁面看到自己的基本資料。Google 提供了「People API」工具，可輕鬆取得使用者在關於我頁面的基本個人資訊、聯絡資料等，本篇會說明 API 操作流程，並提供實作範例。
(圖片出處: pixabay.com)
一、People API 說明
1. 官方文件 首先進入官網文件網址： 此頁面為「Get」取得資料的操作說明，有幾項重要參數的設定需要特別瞭解：- resourceName：填入想取得誰的個人資料，在多數情況下直接填入 "people/me" 即可
- personFields：需要填入想取得的個人資料項目，例如「性別」為 "genders"、「頭像」為 "photos"、「生日」為 "birthdays"
- Scopes：身份驗證時需要告訴 API 取得的授權有哪些，例如「性別」為 "https://www.googleapis.com/auth/user.gender.read"、「生日」為 "https://www.googleapis.com/auth/user.birthday.read"
- A：resourceName 填入 "people/me"
- B：personFields 填入 "birthdays,genders" 代表取得生日、性別，每個項目用逗號隔開
- C：按下紅框處可展開 scopes 細項，這個 API 測試工具預設勾選所有 scopes，但實作上建議只勾選需要的項目就好。
- D：切換到「JAVASCRIPT」分頁可以看到完整的範例程式碼，複製到自己的網站就能看到類似的執行效果。
- 最後按下「EXECUTE」按鈕可看執行結果
如果你是使用者，願意開放這麼多的 Google 帳號權限供應用程式使用嗎？一定是嚇壞了對吧，所以請仔細衡量，要求足夠的權限就好，否則使用者說不定認為是詐騙集團或釣魚網站，直接就離開了。
二、準備動作
操作 API 之前需要先建立 Google API 專案，如果還沒建立過的話，請完成以下流程：- 「取得 Google API 金鑰流程」→「一、建立專案」，並啟用「People API」
- 「處理 OAuth 憑證」→「二、建立 OAuth 憑證」→「三、設定 OAuth 同意畫面」
三、程式碼範例
如果直接拿官方文件測試工具的程式碼當範例也是可以，不過我覺得沒那麼容易理解，以下是我整理過的內容，可直接看註解說明來理解程式碼在做什麼，同時使用了「Bootstrap 按鈕」、jQuery 處理點擊按鈕，作為範例程式碼：<!--jQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!--Bootstrap-->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!--登入、登出按鈕-->
<button id="google_login" class="btn btn-large btn-primary">GOOGLE 登入</button> <button id="google_logout" class="btn btn-large btn-warning">GOOGLE 登出</button>
<p/><p>目前狀態：</p>
<div id="persoanl_info">尚未授權</div>
<script>
var client_id = "5432xxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com",
scope = "https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/user.gender.read https://www.googleapis.com/auth/user.birthday.read",
personFields = "names,emailAddresses,photos,genders,birthdays",
resourceName = "people/me",
$persoanl_info = $("#persoanl_info");
loadApi();
// 載入 google api
function loadApi() {
// 動態載入 api
$.getScript("https://apis.google.com/js/api.js", function() {
// 載入用戶端程式庫 及 Google Oauth2
gapi.load("client:auth2", function() {
// Google Oauth2 起始化
gapi.auth2.init({
client_id: client_id
});
// 載入 people api
gapi.client.load("people", "v1");
});
});
}
// 點擊登入按鈕
$("#google_login").click(function() {
// 進動畫
$persoanl_info.html("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgATuJvkpy3TyBQtXW_JJ59fpiTcu6m9jkBoXtHXpCwpiiOqDdLSLIP2VkH56AQHEg_JubYb6aueZcHrVC-1muR1XwNF3Fxkt_fbNxdMtl6TiakzPHvqPlXefdZMOu2u9IzU6-a-X8So4ok/s512/indicator-light.gif' /> <span>請稍後...</span>");
// 身份驗證
gapi.auth2.getAuthInstance().signIn({
scope: scope
})
// 登入成功時
.then(function() {
// 呼叫 people api 取得資料
gapi.client.people.people.get({
"resourceName": resourceName,
"personFields": personFields,
}).then(function(res) {
// 顯示資料
var result = res.result,
name = result.names[0].displayName,
imgUrl = result.photos[0].url,
email = result.emailAddresses[0].value,
gender = result.genders[0].formattedValue,
birthday = result.birthdays[1].date,
birthdayStr = birthday.year + "-" + birthday.month + "-" + birthday.day,
html = "";
html += "暱稱： " + name + "<br/>";
html += "頭像：<img style='width: 40px;' src='" + imgUrl + "'/><br/>";
html += "email：" + email + "<br/>";
html += "性別：" + gender + "<br/>";
html += "生日：" + birthdayStr + "<br/>";
$persoanl_info.html(html);
});
})
// 登入失敗時
.catch(function (err) {
console.log(err);
});
});
// 點擊登出按鈕
$("#google_logout").click(function() {
gapi.auth2.getAuthInstance().signOut()
.then(function () {
// 登出後的動作
$persoanl_info.html("已登出");
});
});
</script>
紅字字串參數請特別注意以下說明：
- client_id：請置換為前面「處理 OAuth 憑證」流程取得的「用戶端 ID」
- scope：請參考「一、People API 說明」填入需要的 scope 授權，每個網址字串用空格隔開
- personFields：請參考「一、People API 說明」填入想取得的個人資料項目，每個項目用小寫逗號隔開
- 範例程式碼請放在前面「處理 OAuth 憑證」流程設定的網站才能執行
四、DEMO 效果展示
以下為範例程式碼的執行效果，可進行操作並注意對應狀態的顯示資訊：目前狀態：
尚未授權
更多 Google 相關文章：
沒有留言:
張貼留言注意事項：
◎ 勾選「通知我」可收到後續回覆的mail！
◎ 請在相關文章留言，與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器，否則無法登入 Google 帳號留言(只能匿名留言)！
◎ 提問若無法提供足夠的資訊供判斷，可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢，建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」；或參考「Blogger 行動版範本修改技巧 」，或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站，請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本，請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改！
◎ 若留言要輸入語法，"<"、">"這兩個符號請用其他符號代替，否則語法會消失！
◎ 為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。
◎ 本站「已關閉自刪留言功能」。