[API] Facebook API開發紀錄
這次稍微寫一點Facebook Api的東西
其實一開始看覺得看不懂只是因為英文或是都是片段片段的東西
要自己完整組合起來才會比較了解!
關於申請App Id的部分就不贅述了
直接拿sample code來看
當然我也是參考 Facebook Developer與網路上的資源
通常這段很制式的寫法..
沒有載入當然跑下面的FB.init()就會出現ERROR
因為沒載入之前FB這個物件也沒有被定義!
或是一開始就用就將SDK在html header內載入也是OK的!
// 初始化FB物件
詳細參數問題可以自己連結過去看
基本上用上面的參數就夠用了
入沒有登入會自動pop up出登入或取得權限的頁面(Login Dialog)
scope的地方為需要存取使用者的那些東西
這個就需要用到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
其實一開始看覺得看不懂只是因為英文或是都是片段片段的東西
要自己完整組合起來才會比較了解!
關於申請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
留言
張貼留言