使用 Google API 處理登入登出功能，取得使用者基本資料﹍實作範例

上一篇「用 FB API 製作登入登出按鈕」，說明了會員系統的登入功能外包給第三方服務的優點，同時提供實作範例，本篇繼續說明 Google API 登入登出功能的製作流程，及提供自製按鈕實作範例。


(圖片出處: pixabay.com)

一、準備動作建立 Google API 專案

前端開發人員通常都已建立過 Google API 專案，如果還沒建立過的話，請完成以下流程：

• 「取得 Google API 金鑰流程」→「一、建立專案」
• 「處理 OAuth 憑證」→「二、建立 OAuth 憑證」→「三、設定 OAuth 同意畫面」

即可。

二、安裝官方 Google 登入按鈕

1. 官方文件

官方提供了登入按鈕的詳細說明文件：

• Integrating Google Sign-In into your web app

但可惜沒有中文版說明。


2. 安裝程式碼及範例

<script src="https://apis.google.com/js/platform.js" async="async"></script>
<meta name="google-signin-client_id" content="5432xxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com"/>
<div class="g-signin2" data-onsuccess="onSignIn"></div>

目前狀態：
<span id="GOOGLE_STATUS_1"></span>

<script>
// 登入之後
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile(),
target = document.getElementById("GOOGLE_STATUS_1"),
html = "";

html += "ID: " + profile.getId() + "<br/>";
html += "會員暱稱： " + profile.getName() + "<br/>";
html += "會員頭像：" + profile.getImageUrl() + "<br/>";
html += "會員 email：" + profile.getEmail() + "<br/>";
target.innerHTML = html;
}
</script>

• 紅色字串請置換為前面取得的「用戶端 ID」
• 程式碼請放在「二、處理 OAuth 憑證」設定的網站

以下是「官方 Google 登入按鈕」的範例效果，可進行操作並注意對應狀態的文字：


目前狀態：

三、自製登入登出按鈕

如不使用官方按鈕，想要自製「登入」、「登出」的樣式，那麼就得自行處理以下：

• 分別製作兩個按鈕
• 分別處理兩個按鈕的點擊

參考官網文件「Building a custom Google Sign-In button」，以下用「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"></link>

<script src="https://apis.google.com/js/api:client.js"></script>

<!--登入、登出按鈕-->
<button id="GOOGLE_login" class="btn btn-large btn-primary">GOOGLE 登入</button> <button id="GOOGLE_logout" class="btn btn-large btn-warning">GOOGLE 登出</button>

目前狀態：
<span id="GOOGLE_STATUS_2"></span>
<script>
// 進行登入程序
var startApp = function() {
gapi.load("auth2", function() {
auth2 = gapi.auth2.init({
client_id: "5432xxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com", // 用戶端 ID
cookiepolicy: "single_host_origin"
});
attachSignin(document.getElementById("GOOGLE_login"));
});
};

function attachSignin(element) {
auth2.attachClickHandler(element, {},
// 登入成功
function(googleUser) {
var profile = googleUser.getBasicProfile(),
$target = $("#GOOGLE_STATUS_2"),
html = "";

html += "ID: " + profile.getId() + "<br/>";
html += "會員暱稱： " + profile.getName() + "<br/>";
html += "會員頭像：" + profile.getImageUrl() + "<br/>";
html += "會員 email：" + profile.getEmail() + "<br/>";
$target.html(html);
},
// 登入失敗
function(error) {
$("#GOOGLE_STATUS_2").html("");
alert(JSON.stringify(error, undefined, 2));
});
}

startApp();

// 點擊登入
$("#GOOGLE_login").click(function() {
// 進行登入程序
startApp();
});

// 點擊登出
$("#GOOGLE_logout").click(function() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function() {
// 登出後的動作
$("#GOOGLE_STATUS_2").html("");
});
});
</script>

主要修改地方為紅字的「用戶端 ID」，也可修改點擊按鈕後要處理的 JS，其餘注意事項參考前面範例即可。。

以下是「自製登入登出按鈕」的範例效果，可進行操作並注意對應狀態的文字：

GOOGLE 登入GOOGLE 登出

目前狀態：