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.啟用「Facebook 登入」的 JavaScript SDK

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

將 Login with JavaScript SDK 的切換開關設定為「是」以告知使用 JavaScript SDK 用於登入功能，並在 JavaScript SDK 允許網域清單中輸入代管 SDK 的網頁網域。這樣可確保存取權杖只會傳回至授權網域中的回呼。透過 Facebook JavaScript SDK 授權的動作僅支援 https 網頁。

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

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

無論是連線或取消的回應都會將 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。

需考慮的情況

  1. 用戶先登入 Facebook，然後再登入您的網頁。於是登出您的應用程式時，該用戶仍然登入 Facebook。
  2. 在您的應用程式登入流程中，用戶同時登入您的網頁和 Facebook。於是登出您的應用程式時，該用戶也會同時登出 Facebook。
  3. 在另一網頁登入流程中，用戶先同時登入另一網頁和 Facebook，然後再登入您的網頁。於是登出任一網頁時，該用戶也會同時登出 Facebook。

此外，登出網頁不會撤銷用戶在登入時授予您網頁的權限。撤銷權限必須另外完成。因此在建置網頁時，不要讓已登出的用戶在重新登入時看到「登入」對話方塊。

完整程式碼範例

這段程式碼會在您的 HTML 頁面中載入 JavaScript SDK 並初始化。將 {app-id} 替換為您的應用程式編號，並將 {api-version} 替換為要使用的圖形 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>

其他資源