codesanook.com - เขียนคำสั่งในการ log in, log out Facebook ด้วย JavaScript SDK และ jQuery

เขียนคำสั่งในการ log in, log out Facebook ด้วย JavaScript SDK และ jQuery

เมื่อ : 25-Jan-12 0:10 อ่าน : 61 ความเห็น : 0
Tag : jquery facebooksdk

ในบทความที่ผ่านมา ผมได้แนะนำการเขียนคำสั่งเชื่อมต่อ Facebook แบบเบื้องต้น
วันนี้จึงขอแนะนำการเขียนคำสั่งเพื่อทำปุ่ม log in และ log out
ในกรณีที่ผู้ใช้กดปุ่ม log in จะมีหน้าต่าง Facebook log in ปรากฏขึ้นมาเพื่อให้ผู้ใช้ทำการ log in ด้วย Facebook account
และเมื่อผู้ใช้กดปุ่ม log out ก็จะเป็นการออกจากระบบของ Facebook

มาเริ่มดูคำสั่งกันเลยแล้วกันนะครับ

สร้างปุ่ม log in และ log out

       <div id="fb-root">

            <!-- log in button-->
            <input id="btnLogIn" type="button" value="log in"/>
            
            <br/><br/>
            <!-- log out button-->
            <input id="btnLogOut" type="button" value="log out"/>

        </div>

include jQuery เข้าไปใน HTML page

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

เขียนคำสั่งผูก click event ให้กับปุ่ม log in และ log out

   <script type="text/javascript">
            
            //short hand jQuery document ready
            $(function(){
                
                //add  handler to button click event
                $("#btnLogIn").click(function(){
                     
                    //check if user already logged in
                FB.getLoginStatus(function(response) {
                    if (response.status === 'connected') {
                        alert("User is logged in this app with facebook.");
                    }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  FB.getLoginStatus
                
                //log out
                $("#btnLogOut").click(function(){
                    //check if user already logged in
                    FB.getLoginStatus(function(response) {
                        if (response.status === 'connected') {
                            //log out user
                            FB.logout(function(response) {
                                if(response.status == "unknown")
                                {
                                    alert("User is logged out");
                                }
                            });
                        }
                        else
                        {
                               alert("User is not logged in, no need for logging out.");  
                        }
                   
                    });//end FB.getLoginStatus
                    
                }) //end  $("#btnLogOut").click
                
            });//end jQuery document ready
            
        </script>

คำอธิบาย

ในคำสั่งข้างต้น ตรวจสอบสถานะการ log in ของผู้ใช้ด้วย FB.getLoginStatus
เพื่อตรวจสอบว่าผู้ใช้ได้ log in อยู่แล้วหรือไม่ หากยังไม่ได้ log in ก็ให้ทำการเรียกใช้ FB.login ซึ่งจะแสดงหน้าต่างให้ผู้ใช้ทำการ log in เข้า Facebook ในทางตรงข้ามใช้ FB.logout เพื่อทำการ log out ผู้ใช้ออกจาก Facebook ทั้ง FB.login และ FB.logout มี call back function ที่จะถูกเรียกใช้เมื่อ FB.login และ FB.logout ทำการ log in และ log out เรียบร้อย พร้อมทั้งส่ง response object ที่บอกสถานะการ log in ของผู้ใช้(response.status) ไปให้ call back function ด้วย

คำสั่งทั้งหมด (login-logout.html)

 <!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <title>Log in, Log out Facebook</title>

        <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>

        <script type="text/javascript">
            
            //short hand jQuery document ready
            $(function(){
                
                //add  handler to button click event
                $("#btnLogIn").click(function(){
                     
                    //check if user already logged in
                FB.getLoginStatus(function(response) {
                    if (response.status === 'connected') {
                        alert("User is logged in this app with facebook.");
                    }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  FB.getLoginStatus
                
                //log out
                $("#btnLogOut").click(function(){
                    //check if user already logged in
                    FB.getLoginStatus(function(response) {
                        if (response.status === 'connected') {
                            //log out user
                            FB.logout(function(response) {
                                if(response.status == "unknown")
                                {
                                    alert("User is logged out");
                                }
                            });
                        }
                        else
                        {
                               alert("User is not logged in, no need for logging out.");  
                        }
                   
                    });//end FB.getLoginStatus
                    
                }) //end  $("#btnLogOut").click
                
            });//end jQuery document ready
            
        </script>
    </head>
    <body>
        <div id="fb-root">

            <!-- log in button-->
            <input id="btnLogIn" type="button" value="log in"/>
            
            <br/><br/>
            <!-- log out button-->
            <input id="btnLogOut" type="button" value="log out"/>

        </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
                });
                
            };//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>

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

FacebookJavascriptSdk.zip

ความเห็น

แสดงความเห็น

ชื่อ*
อีเมล์*	ไม่เผยแพร่
ความเห็น*

อักษรในรูปภาพ*	พิมพ์เล็กหรือพิมพ์ใหญ่ก็ได้

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

เขียนคำสั่งในการ log in, log out Facebook ด้วย JavaScript SDK และ jQuery

ความเห็น