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

本文件將帶領您逐步完成在網頁上搭配 Facebook JavaScript SDK 建置「Facebook 登入」的步驟。

如果您是 Facebook 用戶，而且在登入帳號時遇到問題，請瀏覽我們的使用說明。

準備工作

您需要下列項目：

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

1.在應用程式主控板中輸入重新導向網址

在應用程式主控板選擇您的應用程式，然後捲動至新增產品，按一下「Facebook 登入」圖卡中的「設定」。在左側導覽面板選擇「設定」，然後在「用戶端 OAuth 設定」下方的「有效的 OAuth 重新導向 URI」欄位內輸入您的重新導向網址，以成功完成授權。

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 登入」按鈕
JavaScript SDK 的「登入」對話方塊

A. 使用「登入」按鈕登入

若要使用「Facebook 登入」按鈕，請使用外掛程式配置器自訂「登入」按鈕，並取得程式碼。

外掛程式配置器

Width

按鈕大小

large

按鈕文字

continue_with

啟用登出按鈕

用戶登入 Facebook 帳號時加上姓名和大頭貼照 [?]

取得程式碼

B. 使用 Javascript SDK 的「登入」對話方塊登入

若要使用自己的登入按鈕，只需呼叫 FB.login()，即可叫用「登入」對話方塊。

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

要求其他權限

當用戶點擊您的 HTML 按鈕時，會出現含有「登入」對話方塊的彈出式視窗。此對話方塊可讓您要求權限來存取用戶的資料。scope 參數可隨 FB.login() 函數呼叫一起傳遞。此選用參數為以逗號分隔的權限清單，必須經過用戶確認，您的網頁才能存取其資料。

呼叫範例

此範例會在您的網頁有權限存取用戶的公開個人檔案和電子郵件的情況下要求用戶登入。

FB.login(function(response) {
  // handle the response
}, {scope: 'public_profile,email'});

處理「登入」對話方塊回應

無論是連線或取消的回應都會將 authResponse 物件傳回至您進行 FB.login() 呼叫時所指定的回呼。這個回應可以在 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} 替換為要使用的圖形 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>