Friday, May 11, 2012

How to use FaceBook Login for your App

You need to register your app on FaceBook first to get identified by FaceBook.
Register here !

(App Registration procedure is discussed in http://bashwithflash.blogspot.in/2012/05/photo-sharing-on-facebook-using-graph.html)

In the login page of your application, open the following request url (either by button-click, href, ajax, get request, or window.open)

"https://www.facebook.com/dialog/oauth/authorize?client_id=YOUR_APP_ID&redirect_uri=http%3A%2F%2Fwww%2Eappdomain%2Ecom%2F&scope=email,read_stream"

You will be prompted by Facebook to permit the app to access your FB account. If you reject, FB will send you an error, else it will send you an access code along with the return url. Since your scope was "email" in the above request url, you will get to know user's basic account details, like his username, email, first name, last name.

You must provide a redirect url for a file where you want to start a proper user session (as when the user is logged in). There you should check whether FB has provided you an access code or not in the return url.

Once you have received an access code it means you have permitted the app to use your Facebook account to access your basic details. Write the following code in your return url file.


<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js" type="text/javascript"></script>

<script>
    $(document).ready(function () {
        FB.init({
          appId      : 'YOUR_APP_ID', // App ID
          channelURL : 'URL_TO_CHANNEL_FILE', //must be in your domain
          status     : true, // check login status
          cookie     : true, // enable cookies to allow the server to access the session
          oauth      : true, // enable OAuth 2.0
          xfbml      : true  // parse XFBML
        });

        FB.getLoginStatus(function (response) {
            if(response.status == "unknown")
            {
                //user is not logged in to FaceBook
            }
            else if (response.status == "not_authorized")
            {
                //user has not authorized the app to access his account
            }
            else if (response.status == "connected")
            {
                if (response.authResponse) {
                    FB.api('/me', function(response) {
                        //user first name = response.first_name
                        //user last name = response.last_name
                        //user email = response.email
                        alert("Welcome " + response.first_name + " " + response.last_name);
                    });
                } else {
                    // can show a login prompt
                }
            }
        });
   });
</script>


If FB returns the login status as connected, you can retrieve the user details as response.first_name, response.last_name, response.email, which you can use to create the user's account on your app.

It is obvious that FB will never allow you to access user's password, hence you will have to create a random password for the user account, which he can change anytime later.

No comments:

Post a Comment