12/18/2018

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

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

A+
fb-api-log-in-out-button-example.jpg-使用 FB API 處理登入登出功能,取得使用者基本資料﹍實作範例網站建置會員系統時,以往要自己處理會員登入登出、帳號密碼這些事,其實是非常麻煩的:

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

不過以上這些麻煩事都可外包給第三方服務來解決,例如網路龍頭 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. 官方登入按鈕加大版

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

fb-api-log-in-out-button-example-1.png-使用 FB API 處理登入登出功能,取得使用者基本資料﹍實作範例

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


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 相關文章:
如這篇文章對你有幫助,歡迎「分享」或給我個讚:

沒有留言:

張貼留言注意事項:

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

TOP