網站建置會員系統時，以往要自己處理會員登入登出、帳號密碼這些事，其實是非常麻煩的：- 需自行管理所有帳號密碼，控管安全性風險，若密碼被駭客竊取就慘了
- 使用者常多個網站設定同一密碼，對於不熟悉的網站可能因不放心交出密碼而不願意註冊
- 每次要輸入帳號密碼也麻煩，而且會員多半自己也記不住每個網站註冊的帳號密碼
- 為了讓會員忘記密碼時能取回，還得做個取回密碼的系統。
不過以上這些麻煩事都可外包給第三方服務來解決，例如網路龍頭 FB、Google，幾乎每個人都同時擁有這兩種帳號，那麼串接這些第三方 API 後，前、後端就可以少做這些事：
- 不必存放使用者密碼，減少外洩風險
- 登入、登出功能交給外部 API 處理
- 不用擔心會員忘記密碼
本篇將會說明前端如何串接 FB API，實現登入、登出功能，製作相關按鈕，並取得使用者的 FB 基本資訊。
(圖片出處: facebook.com)
一、申請 FB 應用程式 APP ID
使用 FB API 處理登入、登出功能，需要先申請應用程式 APP ID，請參照這篇教學：
按照「二、申請流程」可取得 APP ID。
由於 APP ID 放在前端一定會被看到，因此建議按照「三、相關設定」來設定 "應用程式網域"，限制在自己網站的網域才能執行，以免 API 使用額度被他人盜用。
二、官方登入登出按鈕 - 1
1. 官方文件
官方提供了登入按鈕的詳細說明文件：
可惜的是說明內容不容易看懂，提供的程式碼不太完全，也不容易測試成功，建議直接按照本篇提供的範例來操作。
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 相關文章：