Facebook OAuth use Javascript API

一些 Facebook Javascript API 簡單與常用的功能

開發前需先至 Facebook Develope 申請並取得APP ID

並參考本頁面 Login without Javascript SDK 架設基本環境

    //facebook api 初始化設定
    window.fbAsyncInit = function () {
        FB.init({
            appId: 'your facebook app ip', //facebook app id
            channelUrl: ' localhots/channel.html', // Channel.html 位置
            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            xfbml: true  // parse XFBML
        });
    };

    //載入 facebook jssdk
    (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));

    //facebook javascript 登入
    function login() {
        FB.login(function (response) {
            if (response.authResponse) {
                FB.api('/me', 'GET', function (response) {
                    console.log(response.name);    //取得使用者名稱
                    consoel.log(response.email);    //取得使用者 Email 
                    console.log(response.id);    //取得使用者 facebook id
                });
            } else {
                alert('登入失敗');
            }
        }, { scope: "email,user_groups,publish_stream,publish_checkins" });
        //scope為要求取得使用者的 permission 
        //EX: email:取得使用者 Email
        //    user_groups: 使用者社團資料
        //    user_about_me: 使用者關於我
        //    user_photos: 使用者相片
        //    publish_stream: 使用者發文權限
        //more: http://developers.facebook.com/docs/reference/login/#permissions
    }

    //使用者登出
    function logout() {
        FB.logout(function (response) {
            // user is now logged out
        });
    }

    //取得目前登入狀態
    function getLoginStatus() {
        FB.getLoginStatus(function (response) {
            console.log('logout');
            console.log(response);
        });
    }

    //取得使用者資料
    function getUserData() {

        //使用者資料        
        FB.api('/me','GET', function (response) {
            console.log('me:');
            console.log(response);
            console.log('Hello ' + response.name);
        });

        //使用者縮圖
        FB.api('/me/picture', 'GET', function (response) {
            if (response) {
                console.log('picture:');
                console.log(response);
            } else {
                alert("Error");
            }
        })

        //有使用者在內的照片
        FB.api('/me/photos', 'GET', function (response) {
            if (response) {
                console.log('photos:');
                console.log(response);
            } else {
                alert("Error");
            }
        })

        //使用者好友資料
        FB.api('/me/friends','GET',function (response) {
            if (response) {
                console.log('friends:');
                console.log(response);
            } else {
                alert("Error");
            }
        });

        //社團資料 (需開啟 user_groups permission)
        FB.api('/me/groups', 'GET', function (response) {
            if (response) {
                console.log('groups:');
                console.log(response);
            } else {
                alert("Error");
            }
        });     
    }

    //使用者發文(需開啟 publish_stream permission)
    function publish(){
        FB.api('/me/feed', 'post', { message: 'facebook api' }, function (response) { 
            //{message:'發文內容'}
            if (!response || response.error) {
                alert('Error');
            } else {
                alert('Post ID: ' + response.id);
            }
        });
    }

    //使用者打卡(需開啟 publish_checkins permission)
    function Checkins() {
        var data = {    
            "place" : "117464364938130",    //打卡位置ID
            "coordinates" : JSON.stringify({    //打卡位置至經緯度
                'latitude' : 40.7798027,
                'longitude' : -73.9481371,
            })
        };
        FB.api('me/checkins',data,'POST', function (response) {
            if (response) {
                console.log('checkins success');
                console.log(response);    
            } else {
                alert('Error');
            }
        })
    }