先前設定的 Facebook JavaScript SDK (可參考，另.triggerHandler() jQuery API)
<div id="fb-root"></div>
<script>
// 載入 SDK' source code 後執行此 function
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the App Dashboard
//channelUrl : '', // Channel File for x-domain communication
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true // parse XFBML tags on this page?
});
// 於 SDK 載入後，設定相關事件
// 設家 jQuery 觸發器處理程序，觸發 'fbAsyncInit' 事件
$(window).triggerHandler('fbAsyncInit');
};
// 非同部載入 SDK's source code
(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/zh_TW/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
設定 Facebook Javascript 登入及登出速件。(可參考)
<script>
// 設定 fbAsyncInit 事件接收器
$(window).bind('fbAsyncInit', function() {
// 設定登入事件
FB.Event.subscribe('auth.login', function(response) {
FB.api('/me', function(response){
document.getElementById('login').innerHTML = "auth.login Event : " + response.name + " 成功登入";
ShowTaoble(response);
});
});
// 設定登出事件
FB.Event.subscribe('auth.logout', function(response) {
document.getElementById('login').innerHTML = "auth.logout Event : 使用者已登出！"
});
// 設定取得登入狀態
FB.getLoginStatus(function(response) {
// javascript + Facebook Graph API
FB.api('/me', function(response){
document.getElementById('login').innerHTML = "FB.getLoginStatus : " + response.name + " 成功登入成功登入";
ShowTaoble(response);
});
});
});
</script>
設定 facebook 登入及登出 function (權限清單 )
<script>
//設定 FB 登入 function
//FB.login( callback( response ),{ scope: perms } );
function loginFB(){
// perms(string): 使用者同意之權限。
var perms =
'email,user_birthday,user_about_me,status_update,read_stream,' +
'publish_stream,user_events,create_event,friends_events,' +
'user_photos,friends_photos,user_photo_video_tags,friends_photo_video_tags';
// FB JavaScript login function
FB.login(function(response){
// API 回傳 response 值
ShowTaoble(response);
}, { scope: perms } ); // 設定 scope(使用者同意之權限) 參數
}
// FB.logout( callback(response) );
function logoutFB(){
// FB JavaScript login function
FB.logout(function(response) {
ShowTaoble(response);
});
}
// 用表單的方式顯示 Facebook response 回來的資料。
function ShowTaoble(response){
var html = loopValue(response);
document.getElementById("info").innerHTML = html;
}
// 取得 response Key and Value 迴圈
function loopValue(response){
if(typeof response === 'string'){ return response; }
var html = "<table width='100%' style='word-break:break-all'>";
for (var key in response) {
html += (
'<tr>' +
'<th width = "100">' + key + '</th>' +
'<td>' + response[key] + '</td>' +
'</tr>'
);
if(typeof response[key] == "object"){
html += "<tr><th>-</th><td>" +loopValue(response[key])+"</td></tr>";
}
}
html += "</table>";
return html;
}
</script>
設定 登入及登入按鈕
<script>
$(document).ready(function() {
// Handler for .ready() called.
$("#fbLoginBtn").click(function(){
loginFB();
});
$("#fbLogoutBtn").click(function(){
logoutFB();
});
});
</script>
<input type="button" id="fbLoginBtn" value="Login"/> |
<input type="button" id="fbLogoutBtn" value="LogOut"/>
另 Facebook Javascript SDK 的 回傳 資料，資料格式大多為 Object。
固可以用使用 response.id 取得回傳直。如下例：
<script>
function getMe(){
// javascript + Facebook Graph API
// FB.api( Graph API , callblack );
FB.api('/me', function(response){
alert( "使用者 id ：" + response.id ); //取得目前仲用者的 id 資料。
ShowTaoble(response);
});
}
</script>
<input type="button" id="meBtn" value="取得使用者 id " />
| | 登入訊息：
response :
參考資料：
