Facebook 登入

使用 JavaScript SDK 的網頁版 Facebook 登入

本文件將逐步介紹如何在您的網頁上使用 Facebook JavaScript SDK 執行 Facebook 登入。

準備工作

您需要準備好以下項目：

基本自動登入範例

以下程式碼範例展示如何將 Facebook JavaScript SDK 加至網頁、如何初始化 SDK；如果您已登入 Facebook，它會顯示您的姓名和電郵地址。如果您未登入 Facebook，它會自動顯示登入對話框的彈出視窗。

public_profile 權限 可讓您獲取公開的可用資訊（例如姓名和個人資料相片）；email 權限 不要求應用程式審查，並由系統自動授予所有使用 Facebook 登入的應用程式。 

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>

    <h2>Add Facebook Login to your webpage</h2>

      <!-- Set the element id for the JSON response -->
    
      <p id="profile"></p>

      <script>
  
        <!-- Add the Facebook SDK for Javascript -->
  
        (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')
        );


        window.fbAsyncInit = function() {
            <!-- Initialize the SDK with your app and the Graph API version for your app -->
            FB.init({
                      appId            : '{your-facebook-app-id}',
                      xfbml            : true,
                      version          : '{the-graph-api-version-for-your-app}'
                    });
            <!-- If you are logged in, automatically get your name and email adress, your public profile information -->
            FB.login(function(response) {
                      if (response.authResponse) {
                           console.log('Welcome!  Fetching your information.... ');
                           FB.api('/me', {fields: 'name, email'}, function(response) {
                               document.getElementById("profile").innerHTML = "Good to see you, " + response.name + ". i see your email address is " + response.email
                           });
                      } else { 
                           <!-- If you are not logged in, the login dialog will open for you to login asking for permission to get your public profile and email -->
                           console.log('User cancelled login or did not fully authorize.'); }
            });
        };

      </script>

  </body>
</html>

1. 啟用 JavaScript 版 Facebook 登入 SDK

在應用程式管理中心中選擇您的應用程式，然後捲動至新增 1 個商品，在 Facebook 登入卡片中點擊設定。在左側導覽面板中，於用戶端 OAuth 設定下方選擇設定，在有效的 OAuth 重新導向 URI 欄位中輸入您的重新導向網址，以成功授權。

將使用 JavaScript SDK 登入設定切換為「是」，表明您正在使用 JavaScript SDK 執行 Facebook 登入，並在 JavaScript SDK 許可的網域清單中輸入您用於託管 SDK 的網頁網域。這樣能確保存取憑證只會傳回至已授權網域的回呼。只有 https 網頁支援使用 Facebook JavaScript SDK 進行驗證動作。

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 會自動偵測登入狀態，您無需執行任何動作便可啟用此行為。

3. 讓用戶登入

如果用戶開啟您的網頁後並沒有登入網頁，或者沒有登入 Facebook，您可以使用登入對話框來提示他們登入兩者。如果用戶尚未登入 Facebook，系統就會提示他們先登入 Facebook，然後再登入您的網頁。

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

A. 使用登入按鈕來登入

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

附加程式配置工具

Width
按鈕大小
按鈕文字
按鈕版面形狀
[?]
取得代碼

B. 透過 Javascript SDK 登入對話框來登入

如要使用您自己的登入按鈕，請呼叫 FB.login()，即可觸發登入對話框。

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

要求獲取其他權限

當用戶點擊 HTML 按鈕時，畫面會顯示帶有登入對話框的彈出視窗。您可以透過此對話框要求權限，以存取用戶的資料。scope 參數可隨 FB.login() 函式呼叫一同傳遞。此選用參數是一個以逗號分隔的權限清單，用戶必須確認這些權限才能授權您的網頁存取其資料。「Facebook 登入」需要進階 public_profile 權限，以供外部用戶使用。

呼叫範例

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

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。

請考慮下列情況

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

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

完整程式碼範例

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

<!-- Load the JS SDK asynchronously -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
</body>
</html>

其他資源