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

本文件將講解在您的網站使用 Javascript 專用 Facebook SDK 安裝 Facebook 登入功能的步驟。

如果您是 Facebook 用戶，而且無法順利登入您的帳戶，請前往我們的幫助中心。

準備工作

您需要準備好以下項目：

如果基於某些原因，您無法使用我們的 JavaScript SDK，您也可以手動建立登入流程，以安裝 Facebook 登入功能。

1.在應用程式管理中心內輸入您的重新導向網址

在應用程式管理中心中選擇您的應用程式，然後滾動至加入產品，在 Facebook 登入訊息卡中點擊設定。在左側導航面板選擇設定，然後前往用戶端 OAuth 設定，在有效 OAuth 重新導向網址 欄中輸入重新導向網址，以成功完成授權流程。

2.檢查用戶登入狀態

載入您網頁的第一個步驟，是檢查用戶是否已使用 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 可以是下列其中一項：

`Status` 類型	描述
`connected`	用戶已登入 Facebook 和您的網頁。
`not_authorized`	用戶登入了 Facebook，但尚未登入您的網頁。
`unknown`	用戶尚未登入 Facebook，所以無法知道他們有否登入您的網頁。或 FB.logout() 已經被調用過，因此無法連結至 Facebook。

如果其狀態為 connected，要求將包含下列 authResponse 參數：

`authResponse` 參數	值
`accessToken`	網頁用戶的存取憑證。
`expiresIn`	憑證過期時間，採用 UNIX 時間戳記。憑證過期後，用戶將需再次登入。
`reauthorize_required_in`	登入過期前的剩餘時間（以秒作為單位）；這段時間過後，用戶將需再次登入。
`signedRequest`	此為已簽署的參數，其中包括網頁用戶的資訊。
`userID`	網頁用戶的編號。

JavaScript SDK 會自動偵測登入狀態，您無需執行任何動作便可啟用此行為。

如果用戶打開了網頁，但是沒有登入網頁或 Facebook，則您可以使用登入對話框，以提示他們登入網頁及 Facebook。如果用戶尚未登入 Facebook，系統就會提示他們先登入 Facebook，然後再登入您的網頁。

若要讓用戶登入，您可選擇兩種方法：

Facebook 登入按鈕
JavaScript SDK 中的登入對話框

A. 使用登入按鈕登入

如要使用 Facebook 登入按鈕，請使用我們的附加程式配置工具，以自訂登入按鈕並獲取程式碼。

附加程式配置工具

Width

按鈕大小

large

按鈕文字

continue_with

啟用登出按鈕

用戶登入 Facebook 帳戶時加上姓名和個人資料相片 [?]

取得代碼

B. 使用 Javascript SDK 登入對話框登入

如要使用專屬登入按鈕，請向 FB.login() 執行調用，即可調用登入對話框。

FB.login(function(response){
  // handle the response 
});

要求獲取其他權限

當用戶點擊 HTML 按鈕時，畫面會顯示帶有登入對話框的彈出式視窗。您可以透過這個對話框要求獲取權限，以存取用戶的資料。您可透過 FB.login() 函數調用傳遞 scope 參數。此參數為可選項目，是以逗號分隔的權限清單，列出了網頁存取用戶資料前用戶必須授予的權限。

調用範例

此範例將會詢問登入用戶是否願意授權，以允許網頁存取他們的公開個人檔案和電郵地址。

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. 
  }
});

4.讓用戶退出

為按鈕或連結附上 JavaScript SDK 函數 FB.logout()，讓用戶可以退出網頁。

調用範例

FB.logout(function(response) {
   // Person is now logged out
});

請注意：這個函數調用可能也會將用戶登出 Facebook。

請考慮下列情況

用戶先登入 Facebook，然後再登入您的網頁。登出您的應用程式後，用戶仍維持 Facebook 登入狀態。
用戶登入您的網頁，然後在應用程式登入流程中登入 Facebook。登出您的應用程式後，用戶也登出了 Facebook。
用戶登入了另一網頁，並在該網頁的登入流程中登入 Facebook，然後再登入您的網頁。用戶退出任何一個網頁時，同時也退出了 Facebook。

此外，用戶退出您的網頁時，並不會撤銷在登入期間授予網頁的權限。您必須單獨執行撤銷權限動作。開發網頁時，請確保已退出的用戶在重新登入時不會看到登入對話框。

完整程式碼範例

這段程式碼會在 HTML 頁面中載入和初始化 JavaScript SDK。將應用程式編號改為 {app-id}，並將 {api-version} 改為您使用的 Graph API 版本。除非您有特殊原因需要使用較舊版本，否則請指定最新版本： v5.0.

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>

  function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
    console.log('statusChangeCallback');
    console.log(response);                   // The current login status of the person.
    if (response.status === 'connected') {   // Logged into your webpage and Facebook.
      testAPI();  
    } else {                                 // Not logged into your webpage or we are unable to tell.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this webpage.';
    }
  }


  function checkLoginState() {               // Called when a person is finished with the Login Button.
    FB.getLoginStatus(function(response) {   // See the onlogin handler
      statusChangeCallback(response);
    });
  }


  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{app-id}',
      cookie     : true,                     // Enable cookies to allow the server to access the session.
      xfbml      : true,                     // Parse social plugins on this webpage.
      version    : '{api-version}'           // Use this Graph API version for this call.
    });


    FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
      statusChangeCallback(response);        // Returns the login status.
    });
  };

  
  (function(d, s, id) {                      // Load the SDK asynchronously
    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'));

 
  function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
    });
  }

</script>


//  The JS SDK Login Button 

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

<div id="status">
</div>

</body>
</html>