專欄：獨立站之Facebook登入整合｜給你程式碼
前言
獨立站要出海，在註冊和登入環節如果需要填寫很多繁瑣的資料，會損失掉很多潛在客戶。因為國外人非常注重隱私，個人資料比如郵箱賬號、姓名都是很敏感的資訊，初次使用一個陌生網站便被要求提供隱私資料肯定是非常不願意和抗拒的。一種很好的解決辦法便是透過國外一些主流社交平臺授權來完成客戶註冊登入過程。
前期準備
你需要準備以下工作：
一個 Facebook 開發者帳戶
一個已註冊的 Facebook 應用，且需配置好基本設定
引用JavaScript 版 Facebook SDK
在應用面板中選擇您的應用，然後滾動到
新增產品
，在
Facebook 登入
彩箋中點選
設定
。在左側導航視窗中選擇
設定
，然後在
客戶端 OAuth 設定
下方，在
有效的 OAuth 跳轉網址
欄中輸入跳轉網址，以實現成功授權。
檢查使用者登入狀態
網頁載入時，首先應檢查使用者是否已使用 Facebook 登入登入您的網頁。呼叫 FB。getLoginStatus 可以觸發 Facebook 呼叫，獲取登入狀態。然後 Facebook 會呼叫包含結果的回撥函式。
FB。getLoginStatus（function（response） {
statusChangeCallback（response）；
}）；
JSON 響應示例：
{
status： ‘connected’，
authResponse： {
accessToken： ‘{access-token}’，
expiresIn：‘{unix-timestamp}’，
reauthorize_required_in：‘{seconds-until-token-expires}’，
signedRequest：‘{signed-parameter}’，
userID：‘{user-id}’
}
}
status 表示網頁使用者的登入狀態。status 可以是下列之一：
如果狀態為 connected，響應中會包含下列 authResponse 引數：
JavaScript SDK 會自動檢測登入狀態，您無需執行任何操作即可啟用此行為。
使用者登入
如果使用者開啟網頁後並沒有登入網頁，或是沒有登入 Facebook，您可以使用登入對話方塊來提示他們登入兩者。如果使用者未登入 Facebook，系統首先會提示他們登入 Facebook，然後提示登入您的網頁。呼叫 FB。login（），即可呼叫登入對話方塊。
FB。login（function（response）{
// handle the response
}）；
當用戶點選 HTML 按鈕時，系統會顯示帶有登入對話方塊的彈出視窗。您可以透過此對話方塊請求許可權，以訪問使用者的資料。scope 引數可隨 FB。login（） 函式呼叫一同傳遞。可選引數為由逗號分隔的許可權列表，只有經使用者確認後，您的網頁才可獲得使用者資料訪問許可權。
此示例可以詢問登入使用者，您的網頁是否有許可權訪問他們的公開資料和郵件。
FB。login（function（response） {
// handle the response
}， {scope： ‘public_profile，email’}）；
響應（連線或取消）會向呼叫 FB。login（） 時指定的回撥返回 authResponse 物件。此響應可在 FB。login（） 內檢測和處理。
FB。login（function（response） {
if （response。status === ‘connected’） {
// Logged into your webpage and Facebook。
} else {
// The person is not logged into your webpage or we are unable to tell。
}
}）；
使用者退出
在按鈕或連結中附加 JavaScript SDK 函式 FB。logout（），讓使用者可以退出網頁。
FB。logout（function（response） {
// Person is now logged out
}）；
要考慮下列情形：
使用者先登入 Facebook，然後再登入您的網頁。當用戶退出您的應用時，其 Facebook 帳戶仍為登入狀態。
使用者登入您的網頁，並在應用登入流程中登入 Facebook。當用戶退出您的應用時，同時也將退出 Facebook。
使用者登入了另一網頁，並在該網頁的登入流程中登入 Facebook，然後再登入您的網頁。當該使用者退出任一網頁時，同時也退出 Facebook。
此外，使用者退出您的網頁並不會撤消其在登入期間授予網頁的許可權。必須單獨執行撤銷許可權操作。構建您的網頁時，應讓已退出的使用者在重新登入時不會看到登入對話方塊。
完整程式碼示例
下面的程式碼將在 HTML 頁面中載入和初始化 JavaScript SDK。用您的應用ID替換 {app-id}，再用要使用的圖譜 API 版本替換 {api-version}。除非有特殊原因必須使用較舊版本，否則請指定最新版本： v6。0。
<！DOCTYPE html>
// The JS SDK Login Button
給你程式碼專欄｜往期回顧：
專欄：將Linkedin登入整合到你的獨立站｜給你程式碼
專欄：EDM中如何實現檢測傳送的郵件被對方開啟過？｜給你程式碼
專欄：使用PayPal REST API方式整合外貿獨立站支付功能｜給你程式碼
