2021年5月8日

使用 Google People API 取得使用者生日、性別等多種個人資訊

使用 Google People API 取得使用者生日、性別等多種個人資訊

Wayne Fu 0 A+
people-api.png-使用 Google People API 取得使用者生日、性別等多種個人資訊上一篇「使用 Google API 處理登入登出功能,取得使用者基本資料」,能獲得的會員資訊有 email、姓名、頭像等等,算是比較基本的資訊,後續能做的主要是 email 行銷、聯絡會員等行動。 如果有研發新產品、瞭解消費者偏好這類的規劃,至少需取得使用者「性別」、「年齡層」等資訊,才能統計、分析使用者在網站進行的行為模式及購物偏好,進而針對不同性別、不同年齡層的使用者,找出或設計出合適的產品及服務。 只要有 Google 帳號,可在「關於我」頁面看到自己的基本資料。Google 提供了「People API」工具,可輕鬆取得使用者在關於我頁面的基本個人資訊、聯絡資料等,本篇會說明 API 操作流程,並提供實作範例。

一、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"
之後操作 API 時需要參閱此頁面的官方文件來查詢參數如何填。 2. 測試 API 官方文件頁面往下捲找到「Try this API」可以在寫程式之前先測試 API 功能,按下這個區塊右上角的「全螢幕」按鈕,如下圖: people-api-1.jpg-使用 Google People API 取得使用者生日、性別等多種個人資訊
  • A:resourceName 填入 "people/me"
  • B:personFields 填入 "birthdays,genders" 代表取得生日、性別,每個項目用逗號隔開
  • C:按下紅框處可展開 scopes 細項,這個 API 測試工具預設勾選所有 scopes,但實作上建議只勾選需要的項目就好
  • D:切換到「JAVASCRIPT」分頁可以看到完整的範例程式碼,複製到自己的網站就能看到類似的執行效果。
  • 最後按下「EXECUTE」按鈕可看執行結果
特別說明一下 C 點,如果自己寫 API 程式時,使用了越多的授權 scope 項目,那麼使用者登入時會看到下面的彈跳視窗: 如果你是使用者,願意開放這麼多的 Google 帳號權限供應用程式使用嗎?一定是嚇壞了對吧,所以請仔細衡量,要求足夠的權限就好,否則使用者說不定認為是詐騙集團或釣魚網站,直接就離開了。

二、準備動作

操作 API 之前需要先建立 Google API 專案,如果還沒建立過的話,請完成以下流程:

三、程式碼範例

如果直接拿官方文件測試工具的程式碼當範例也是可以,不過我覺得沒那麼容易理解,以下是我整理過的內容,可直接看註解說明來理解程式碼在做什麼,同時使用了「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://lh5.googleusercontent.com/-EyVZ0f8J0qQ/UCeEG7aa8nI/AAAAAAAADtY/9sXw53XkYXM/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 相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP