上一篇「用 FB API 製作登入登出按鈕」，說明了會員系統的登入功能外包給第三方服務的優點，同時提供實作範例，本篇繼續說明 Google API 登入登出功能的製作流程，及提供自製按鈕實作範例。 (圖片出處: pixabay.com)
一、準備動作
操作 API 之前需要先建立 Google API 專案，如果還沒建立過的話，請完成以下流程：
- 「取得 Google API 金鑰流程」→「一、建立專案」
- 「處理 OAuth 憑證」→「二、建立 OAuth 憑證」→「三、設定 OAuth 同意畫面」
二、安裝官方 Google 登入按鈕
1. 官方文件
官方提供了登入按鈕的詳細說明文件：
但可惜沒有中文版說明。
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>- 紅色字串請置換為前面「處理 OAuth 憑證」流程取得的「用戶端 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 相關文章：