FaceBook API使用紀錄

其實網站想要使用FACEBOOK API非常簡單，
因為作到一半必須抽身去處理別的東西， 所以來紀錄一下。

圖片來源Designed by Freepik

---

這邊紀錄的是於前端網頁使用【JavaScript SDK】，
所以您必須要具備【jQuery】及【JSON】的基礎知識。
因為FB API回傳的資訊是JSON資料格式，
如果您想要有更良好的使用者操作界面需要配合jQuery。

1. 訪問facebook for developers並登入FB帳號，新增應用程式。

新增完畢後，比較重要的是【應用程式網域】及【是否發佈應用程式？】
【應用程式網域】必須為您的網域名稱，
如果您想要在本機先開發，可以修改host文件，將【127.0.0.1 應用程式網域】加入
而如果要正式對外開放，必須把【是否發佈應用程式？】開啟。

1. 登入網頁新增JavaScript SDK

接著請參閱搭配 JavaScript SDK 的網頁版「Facebook 登入」的使用說明。

主要的四段程式碼如下：

1. 1. 初始化JavaScript SDK，並加入Login function

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{your-app-id}',
      cookie     : true,  // enable cookies to allow the server to access
                          // the session
      xfbml      : true,  // parse social plugins on this page
      version    : 'v2.8' // use graph api version 2.8
    });
  };

  FB.login(function (response) {
      if (response.authResponse) {
          console.log('Welcome!  Fetching your information.... ');
          FB.api('/me', function (response) {
              console.log('Good to see you, ' + response.name + '.');
          });
      } else {
          console.log('User cancelled login or did not fully authorize.');
      }
  }, { scope: 'email' });
</script>
別忘了把{your-app-id}，改成您申請的應用程式ID。

1. 2. 自訂登入按鈕

您可以使用網頁中的範例，fb提供的範例如下
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

或是自行設計，並呼叫FB.login() function
自行設計按鈕時，請將上一段初始化範例中的FB.login修改一下，
於click事件中，呼叫使用
function FBLogin() {
    FB.login(function (response) {
        if (response.authResponse) {
            console.log('Welcome!  Fetching your information.... ');
            FB.api('/me', function (response) {
                console.log('Good to see you, ' + response.name + '.');
            });
        } else {
            console.log('User cancelled login or did not fully authorize.');
        }
    }, { scope: 'email' });
}
應用程式授權時，除了基本的public_profile之外，其他必須自行設定。
如上述範例中紅色字體，我需要額外授權email。

1. 3. 檢查是否授權or登入

如果要檢查是否授權或登入時，可以使用FB.getLoginStatus()檢查。
網頁中的範例如下：
function statusChangeCallback(response) {
  console.log('statusChangeCallback');
  console.log(response);
  // The response object is returned with a status field that lets the
  // app know the current login status of the person.
  // Full docs on the response object can be found in the documentation
  // for FB.getLoginStatus().
  if (response.status === 'connected') {
    // Logged into your app and Facebook.
    testAPI();
  } else if (response.status === 'not_authorized') {
    // The person is logged into Facebook, but not your app.
    document.getElementById('status').innerHTML = 'Please log ' +
      'into this app.';
  } else {
    // The person is not logged into Facebook, so we're not sure if
    // they are logged into this app or not.
    document.getElementById('status').innerHTML = 'Please log ' +
      'into Facebook.';
  }
}

// This function is called when someone finishes with the Login
// Button.  See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });
}

1. 4. 取得授權使用者資料

授權應用程式後，如果要取得資料的話…用法如下
function UserInfo() {
  FB.api('/me', { fields: 'id,first_name,last_name,gender,email' }, function (response) {
    console.log(JSON.stringify(response, null, '\t'));
  });
}
上面的範例，使用graph-api request了【id,first_name,last_name,gender,email】等資料。
有哪些資料可以提供，請參閱網站Returns a single user node

以上先紀錄一下到目前為止知道的東西，
如果還有其他需求請看下方資訊
graph-api的詳細用法請參閱https://developers.facebook.com/docs/graph-api
其他FB API詳細資料請參閱Facebook 登入