[API] Facebook API開發紀錄

這次稍微寫一點Facebook Api的東西

其實一開始看覺得看不懂只是因為英文或是都是片段片段的東西

要自己完整組合起來才會比較了解!

關於申請App Id的部分就不贅述了



直接拿sample code來看

當然我也是參考 Facebook Developer與網路上的資源

(function(d)
{
  var js,
  id = 'facebook-jssdk',
  ref = d.getElementsByTagName('script')[0];
  if (d.getElementById(id))
  {
    return;
  }
  js = d.createElement('script');
  js.id = id;
  js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js";
  ref.parentNode.insertBefore(js, ref);
}(document));

上面這段是非同步載入FB JS SDK
通常這段很制式的寫法..
沒有載入當然跑下面的FB.init()就會出現ERROR
因為沒載入之前FB這個物件也沒有被定義!
或是一開始就用就將SDK在html header內載入也是OK的!

// 初始化FB物件
window.fbAsyncInit = function()
{
  FB.init(
  {
    appId      : ' 將你申請到的 APP ID放這 ',
    status     : true,  //確認使用者的登入狀況是否是最新的狀態
    xfbml      : true
  });
}
初始或FB物件是一定要做
詳細參數問題可以自己連結過去看
基本上用上面的參數就夠用了

function FB_Login()
{
  FB.login(function(response)
  {
    if (response.authResponse)  //若有登入並取得使用者同意則進入這裡
    {
         //accessToken = response.authResponse.accessToken;   此處取得access token
         getUserInfo(); //自訂function : 取得使用者資訊
    }
    else
    {
      //若無取得權限則在瀏覽器console顯示出底下文字
      console.log('User cancelled login or did not fully authorize.');
    }
  },{scope: 'email,user_photos,user_videos,user_birthday,user_location'});

}
上面function功能是用來確認使用者到底有沒有登入
入沒有登入會自動pop up出登入或取得權限的頁面(Login Dialog)
scope的地方為需要存取使用者的那些東西

function getUserInfo()
{
  FB.api('/me', function(response)
  {
console.log(response);
  });
}
接下來是取得使用者資訊了
這個就需要用到Graph API的東西
詳細不多加介紹,可以自行上Facebool Developer看 XD
重點是在於FB.api('/me', function(response) {}
此function是用JS SDK去跟Graph API存取資料
其中的response物件其實就已經是使用者資訊的JSON陣列了!
用console.log(response)就可以看出端倪了!
當然是不建議前端這麼做
建議方法是取得access token後丟給後端PHP或其他程式
由Server端再去討資料才是比較安全的作法!
至於Access token怎麼取得?
其實在FB.login那裏就有註解了!
後端的部分就請自己努力! XD


留言

這個網誌中的熱門文章

[MySQL] schema 與資料類型優化

[翻譯] 介紹現代網路負載平衡與代理伺服器