使用 FB API 處理登入登出功能(含自製按鈕)，取得使用者基本資料﹍實作範例

網站建置會員系統時，以往要自己處理會員登入登出、帳號密碼這些事，其實是非常麻煩的：

• 需自行管理所有帳號密碼，控管安全性風險，若密碼被駭客竊取就慘了
• 使用者常多個網站設定同一密碼，對於不熟悉的網站可能因不放心交出密碼而不願意註冊
• 每次要輸入帳號密碼也麻煩，而且會員多半自己也記不住每個網站註冊的帳號密碼
• 為了讓會員忘記密碼時能取回，還得做個取回密碼的系統。

不過以上這些麻煩事都可外包給第三方服務來解決，例如網路龍頭 FB、Google，幾乎每個人都同時擁有這兩種帳號，那麼串接這些第三方 API 後，前、後端就可以少做這些事：

• 不必存放使用者密碼，減少外洩風險
• 登入、登出功能交給外部 API 處理
• 不用擔心會員忘記密碼

本篇將會說明前端如何串接 FB API，實現登入、登出功能，製作相關按鈕，並取得使用者的 FB 基本資訊。

(圖片出處: facebook.com)

一、申請 FB 應用程式 APP ID

使用 FB API 處理登入、登出功能，需要先申請應用程式 APP ID，請參照這篇教學：

• 申請 Facebook 應用程式 APP ID 流程

按照「二、申請流程」可取得 APP ID。

由於 APP ID 放在前端一定會被看到，因此建議按照「三、相關設定」來設定 "應用程式網域"，限制在自己網站的網域才能執行，以免 API 使用額度被他人盜用。

二、官方登入登出按鈕 - 1

1. 官方文件

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

• 搭配 JavaScript SDK 的網頁版「Facebook 登入」

可惜的是說明內容不容易看懂，提供的程式碼不太完全，也不容易測試成功，建議直接按照本篇提供的範例來操作。


2. 按鈕形式

官方提供兩組登入、登出按鈕，以下先展示官方簡易按鈕的作法，而後面「三、官方登入登出按鈕 - 2」這裡會展示官方大按鈕的作法。


3. 官方簡易按鈕程式碼及範例

<fb:login-button scope="public_profile,email" autologoutlink="true" onlogin="checkLoginState();"></fb:login-button>

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

<script>
window.fbAsyncInit = function() {
FB.init({
appId: '348456942xxxxxx', // 填入 FB APP ID
cookie: true,
xfbml: true,
version: 'v3.2'
});

FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};

// 處理各種登入身份
function statusChangeCallback(response) {
console.log(response);
var target = document.getElementById("FB_STATUS_1"),
html = "";

// 登入 FB 且已加入會員
if (response.status === 'connected') {
html = "已登入 FB，並加入 WFU BLOG DEMO 應用程式<br/>";

FB.api('/me?fields=id,name,email', function(response) {
console.log(response);
html += "會員暱稱：" + response.name + "<br/>";
html += "會員 email：" + response.email;
target.innerHTML = html;
});
}

// 登入 FB, 未偵測到加入會員
else if (response.status === "not_authorized") {
target.innerHTML = "已登入 FB，但未加入 WFU BLOG DEMO 應用程式";
}

// 未登入 FB
else {
target.innerHTML = "未登入 FB";
}
}

function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}

// 載入 FB SDK
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "https://connect.facebook.net/zh_TW/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>


• 藍色字串是官網沒有的參數，一定要加此參數，才能自動切換「登入/登出」按鈕
• 紅色字串請置換為前面取得的 FB APP ID
• 請參照註解可瞭解各區塊進行了什麼事
• 最重要的是 statusChangeCallback 這個函數，處理了三種狀況：
  
  • 登入 FB 且授權給此 APP(加入會員) → 可取得使用者基本資料並顯示在螢幕上
  • 登入 FB 但未授權給此 APP(未加入會員)
  • 未登入 FB
• 套用範例程式碼後，可針對以上三種狀況的 JS 內容，修改為自己要處理的事

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



目前狀態：

三、官方登入登出按鈕 - 2

1. 官方登入按鈕加大版

官網說明頁面往下捲會看到下圖，這是第二種登入按鈕的形式：



勾選需要的項目後，按「取得程式碼」可看到範例程式碼，但實際上是無法運作的。


2. 程式碼及範例

要讓這個形式的按鈕可運作的話，請將「二、官方登入登出按鈕 - 1」的範例程式碼中，<fb:login... ~ ...fb:login-button> 這一段 HTML 碼，改成以下內容：

<div class="fb-login-button" data-max-rows="1" data-size="medium" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="false" data-scope="public_profile,email" data-onlogin="checkLoginState();"></div>

• 藍字的參數請視自己的需求修改，可參照按下「取得程式碼」後的 code 對照修改
• 加上紅字參數後才能讓這組登入登出按鈕正常運作

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

目前狀態：

四、自訂登入登出按鈕

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

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

以下用「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>

<!--登入、登出按鈕-->
<button id="FB_login" class="btn btn-large btn-primary">FB 登入</button> <button id="FB_logout" class="btn btn-large btn-warning">FB 登出</button>

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

<script>
window.fbAsyncInit = function() {
FB.init({
appId: '348456942xxxxxx', // 填入 FB APP ID
cookie: true,
xfbml: true,
version: 'v3.2'
});

FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};

// 處理各種登入身份
function statusChangeCallback(response) {
console.log(response);
var target = document.getElementById("FB_STATUS_2"),
html = "";

// 登入 FB 且已加入會員
if (response.status === 'connected') {
html = "已登入 FB，並加入 WFU BLOG DEMO 應用程式<br/>";

FB.api('/me?fields=id,name,email', function(response) {
console.log(response);
html += "會員暱稱：" + response.name + "<br/>";
html += "會員 email：" + response.email;
target.innerHTML = html;
});
}

// 登入 FB, 未偵測到加入會員
else if (response.status === "not_authorized") {
target.innerHTML = "已登入 FB，但未加入 WFU BLOG DEMO 應用程式";
}

// 未登入 FB
else {
target.innerHTML = "未登入 FB";
}
}

// 點擊登入
$("#FB_login").click(function() {
// 進行登入程序
FB.login(function(response) {
statusChangeCallback(response);
}, {
scope: 'public_profile,email'
});
});

// 點擊登出
$("#FB_logout").click(function() {
FB.logout(function(response) {
statusChangeCallback(response);
});
});

// 載入 FB SDK
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "https://connect.facebook.net/zh_TW/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

主要修改地方為 FB APP ID，也可修改點擊按鈕後要處理的 JS，其餘注意事項參考前面範例即可。

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



目前狀態：

更多 Facebook 相關文章：