文章大綱
在網站上要串接 facebook 登入的話，官網有詳細的解說，但是就是太詳細了有時候要怎麼開始都不知道，但是還是可以從幾個關鍵字下去查詢：facebook login api、facebook javascript SDK…等。
首先官網有說明要開始使用facebook login api前，需要具備以下幾個條件：
- 註冊Facebook 開發人員帳號
- 已註冊的 Facebook 應用程式，並已完成基本設定
如果你是一張白紙，那就從註冊開始吧！🥳
註冊Facebook開發人員帳號
官網圖文說明：https://developers.facebook.com/docs/development/register
進入facebook開發人員網站並且選擇右上角「登入」
通常我們都會有facebook帳號，所以可以直接登入，如果你不想用個人的fb帳號，那就註冊一個新的吧！
註冊好之後再來facebook開發人員網站登入就好。
創建應用程式
官網圖文說明：https://developers.facebook.com/docs/development/create-an-app
在facebook開發人員網站登入後，右上角原本是登入的地方會變成「我的應用程式」，請點進去
點擊「建立應用程式」。
因為我的已經有建立過了，所以跟空白沒建立過應用程式的畫面會不太一樣。
沒建立過大概是長這樣：
選擇「應用程式類型」
官網說明：如果您第一次建立應用程式且剛開始探索應用程式建立流程，請選擇無選項。ＸＤ
如果是要「給人家方便使用facebook登入」這種的，就選「消費者」然後按下「繼續」。
取一個名字，輸入你的聯絡信箱後點下「建立應用程式」，就建立完成。
設定應用程式
新增玩應用程式應該會自動跳到應用程式頁面，沒有的話再從這邊點進去你剛剛新增的應用程式。
選擇「facebook 登入」點右下角的「設定」
選擇「網頁」
輸入網站網址，如果你要先在本地測試，就寫localhost，但是因為現在都限制一定要https，所以要先把本地環境的localhost設定ssl憑證。可以參考這篇文章：
設定好之後按下save就可以了。
點選左邊的「設定」，把重新導向、SDK允許網址都填上你要使用的網站網址。
注意是有https的
到這邊為止，基本設定就完成囉！
接下來真的要開始寫code了啊終於
大致會有幾件事：
- 在
index.html引入facebook javascript SDK - 初始化 facebook 外掛
- 檢查目前登入狀態
引入facebook javascript SDK
打開vue3專案：
把以下這段貼到/public/index.html中：
可以貼在<body>標籤內的最前面。
(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/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));裡面的en_US可以改成繁體中文的版本：zh_TW，至於我為什麼知道是這個代碼，說來話長ＸＤ
可以參考這裡：https://developers.facebook.com/docs/javascript/internationalization
貼好之後會變成這樣：
<!DOCTYPE html>
<html lang="">
<head>
//...
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<script>
(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/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
})(document, "script", "facebook-jssdk");
</script>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
初始化 facebook 外掛
先把facebook app id 放到環境變數，可以在facebook developer網站裡你剛剛建立的應用程式中找到。
VUE_APP_FB_APP_ID=XXXXXXXXXXX
接著，我們要做「初始化facebook 外掛」這件事情，我習慣把第三方的東西都放到/plugins資料夾裡面比較整齊，所以建立一個fb.js檔案：
這些code都可以在facebook developer網站裡面，點進入你的其中一個應用程式，左手邊有「快速入門」裡面都可以複製。
export const initFacebook = () => {
window.fbAsyncInit = function () {
/* global FB */
FB.init({
appId: process.env.VUE_APP_FB_APP_ID,
cookie: true,
xfbml: true,
version: "v11.0",
});
FB.AppEvents.logPageView();
};
};
在你想要初始化的程式入口呼叫他，這邊我直接放在App.vue
import { initFacebook } from "@/plugins/fb";
export default {
setup() {
initFacebook();
},
};到這邊初始化就完成。
檢查目前登入狀態
這時候你會發現網站上沒有任何變化，但是fb js sdk相關的api都可以使用囉！
現在來使用一個檢查目前登入狀態的api。
在這之前有個問題，就是我們要單獨在頁面使用它產生的FB變數的話，你不寫/* global FB */是會出錯的，因為他不知道FB是啥鬼東西，他是在你plugins/fb.js裡面產生的，超過他作用域就會無法辨識了。
所以我們在剛剛那一步要先把FB存進去vuex。
首先建立一個/store/fb.js
export const state = {
FB: null,
};
export const actions = {};
export const mutations = {
setFB(state, payload) {
state.FB = payload;
},
};
export const getters = {};
export default {
state,
actions,
mutations,
getters,
namespaced: true,
};
引入fb.js
import { createStore } from "vuex";
import fb from "./fb";
export default createStore({
state: {},
mutations: {},
actions: {},
modules: { fb },
});
在初始化的地方把產生的FB存進去vuex
import store from "@/store";
export const initFacebook = () => {
window.fbAsyncInit = function () {
/* global FB */
FB.init({
appId: process.env.VUE_APP_FB_APP_ID,
cookie: true,
xfbml: true,
version: "v11.0",
});
store.commit("fb/setFB", FB);
FB.AppEvents.logPageView();
};
};
這時候你就可以在任何頁面從vuex取出FB來呼叫囉！
FB.getLoginStatus(function (response) {
console.log(response);
});更多相關的登入、登出…等api，可以參考官網：Ｄ
發表評論
想要加入討論嗎？請盡情發表您的想法！