2021年4月10日

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

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

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


(圖片出處: pixabay.com)


一、準備動作


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




二、安裝官方 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 相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

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

TOP