เขียนคำสั่งเรียกดูข้อมูลผู้ใช้ที่ log in application ด้วย Facebook Graph API

เมื่อ : 26-Jan-12 0:00 อ่าน : 261 ครั้ง
Tag : javascript jquery facebooksdk

Graph API ช่วยให้นักพัฒนาสามารถอ่านหรือเขียนข้อมูลไปยัง Facebook Graph API ช่วยในการแสดงข้อมูลในรูปแบบของ object graph ตัวอย่างของข้อมูลที่สามารถใช้งานผ่าน Graph API เช่น ข้อมูลผู้ใช้, รูปภาพ, เพื่อน, เหตุการณ์ วิดีโอ เป็นต้น

ในบทความนี้เราจะเขียนคำสั่งง่ายๆ ในการดึงข้อมูลผู้ใช้ที่ log in application มาแสดงบนหน้าเว็บ

เขียนคำสั่งต่อไปนี้ต่อจาก FB.init

 //check if user already logged in
            FB.getLoginStatus(function(response) {
                if (response.status === 'connected') {
                    alert("User is logged in this app with facebook.");
                    //show id of log in user
                    FB.api('/me','get',{}, function(response) {
                        if(response.error != undefined)
                        {
                            alert(response.error.message);

                        }else{
                                
                            ///$("#profile").empty();
                                
                            var content = "<li> user id : " + response.id +   "</li>"+
                                "<li> name :" + response.name + "</li>";
                               
                            $("#profile").html(content);
                        }
                    });//end    FB.api       
                        
                }else{
                    //the user hasn't even logged in to Facebook
                    //show pop up window for user to log in
                    //or not logged in this app with facebook
                    alert("User is not logged in facebook or not logged in this app with facebook.")
                    FB.login(function(response) {
                        if (response.status === 'connected') {
                            alert("User is logged in this app with facebook."); 
                        }
                        else {
                            alert("User is not logged in this app with facebook.");
                        }
                    });
                }
            });//end  FB.getLoginStatus

คำอธิาย

เริ่มจากการตรวจสอบสถานะของผู้ใช้ ถ้าผู้ใช้ log in อยู่แล้ว ก็เรียกใช้เมธอด FB.api เพื่อใช้งาน Graph API ดึงข้อมูลผู้ใช้ signature ของ FB.api เป็นดังนี้

FB.api(path, method, params, cb)

พารามิเตอร์ของ FB.api

Name	Type	Description
path	String	the url path
method	String	the http method (default `"GET"`)
params	Object	the parameters for the query
cb	Function	the callback function to handle the response

ในตัวอย่างนี้ เราเขียนคำสั่ง FB.api('/me','get',{}, function(response){ //callback function body }); path คือ /me เป็นการดึงข้อมูลผู้ใช้ที่ log in อยู่ method คือ get เป็นการอ่านข้อมูล จะกำหนดเป็น post เมื่อต้องการเขียนข้อมูล , params เป็นค่าที่ส่งเพิ่มสำหรับ path นั้น เช่น ข้อความที่จะ post cb คือ callback function ที่รับค่า response ที่เป็นผลลัพธ์ที่ได้จากการเรียกใช้ Graph API

ใน call back function ได้ทำการตรวจสอบว่ามีความผิดพลาดเกิดขึ้นหรือไม่ (response.error) ถ้ามีให้แสดงข้อความที่บอกถึงความผิดพลาดที่เกิดขึ้น (response.error.message) ถ้าไม่มีความผิดพลาด ก็ให้นำข้อมูล id (response.id) และชื่อ นามสกุล (response.name) ไปแสดงใน ul id profile

ในทางตรงข้ามหากผู้ใช้ยังไม่ได้ log in ก็ให้ทำการเรียกใช้คำสั่ง FB.login เพื่อ log in ผู้ใช้

คำสั่งทั้งหมดใน graph-api.html

<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <title>call Graph API</title>
        <style type="text/css">
            #fb-root{
                font-size: 16px;
            }
        </style>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <!-- include jQuery JavaScript library -->
        <script type="text/javascript" src="jquery-1.7.1.min.js"></script>

    </head>
    <body>
        <div id="fb-root">

            <h4>user info</h4>
        
            <ul id="profile">

            </ul>
          
    </div>
    <script>
            
        //fbAsyncInit is executed as soon as the JavaScript SDK is loaded asynchronously
        window.fbAsyncInit = function() {
               
            //initialize SDK
            FB.init({
                appId      : 'appId', // App ID
                channelUrl : 'channel.html', // Channel File
                status     : true, // check login status
                cookie     : true, // enable cookies to allow the server to access the session
                xfbml      : true  // parse XFBML
            });
                
            //additional code
               
            //check if user already logged in
            FB.getLoginStatus(function(response) {
                if (response.status === 'connected') {
                    alert("User is logged in this app with facebook.");
                    //show id of log in user
                    FB.api('/me','get',{}, function(response) {
                        if(response.error != undefined)
                        {
                            alert(error.message);

                        }else{
                                
                            ///$("#profile").empty();
                                
                            var content = "<li> user id : " + response.id +   "</li>"+
                                "<li> name :" + response.name + "</li>";
                               
                            $("#profile").html(content);
                        }
                    });//end    FB.api       
                        
                }else{
                    //the user hasn't even logged in to Facebook
                    //show pop up window for user to log in
                    //or not logged in this app with facebook
                    alert("User is not logged in facebook or not logged in this app with facebook.")
                    FB.login(function(response) {
                        if (response.status === 'connected') {
                            alert("User is logged in this app with facebook."); 
                        }
                        else {
                            alert("User is not logged in this app with facebook.");
                        }
                    });
                }
            });//end  FB.getLoginStatus

        };//end window.fbAsyncInit

        // load the SDK asynchronously
        (function(d){
            var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all.js";
            d.getElementsByTagName('head')[0].appendChild(js);
        }(document));
            
    </script>

</body>
</html>

ทดลองเปิด graph-api.html ด้วย web browser ผ่าน web server ตัวอย่าง URL เช่น http://localhost/FacebookJavascriptSdk/graph-api.html

ผลลัพธ์ที่ได้ กรณีที่ผู้ใช้ log in application อยู่ก่อนแล้ว

ศึกษา path ที่มีใน Graph API ได้จาก https://developers.facebook.com/docs/reference/api/

ทดสอบการเรียกใช้ path ได้จาก Graph API Explorer

download souce code ตัวอย่าง (NetBeanProject)

FacebookJavascriptSdk.zip

ASP.NET MVC, C#, MonoTouch, Entity Framework, Unit Test ...

เขียนคำสั่งเรียกดูข้อมูลผู้ใช้ที่ log in application ด้วย Facebook Graph API

ความเห็น

Friends