Facebook login using javascript

Hi,

Are you looking for Facebook login functionality for your website?

Let go ahead.

1) Create  application https://developers.facebook.com/ to communicate with Facebook from your website or application.


Lets us assume that you have created a page contact.aspx(Should be same as Canvas URL) configured in your Facebook application. Refer above image. Use this code to get Facebook login button.

Head section of your page.
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>



Body section of your page.

 <div id="fb-root">
    </div>
    <script>
        window.fbAsyncInit = function () {
            FB.init({
                appId: Your Application Id, // App ID
                status: true, // check login status
                cookie: true, // enable cookies to allow the server to access the session
                xfbml: true  // parse XFBML
            });
            // Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
            // for any authentication related change, such as login, logout or session refresh. This means that
            // whenever someone who was previously logged out tries to log in again, the correct case below
            // will be handled.
            FB.Event.subscribe('auth.authResponseChange', function (response) {
                // Here we specify what we do with the response anytime this event occurs.
                if (response.status === 'connected') {
                    // The response object is returned with a status field that lets the app know the current
                    // login status of the person. In this case, we're handling the situation where they
                    // have logged in to the app.
                    var uid = response.authResponse.userID; // Login User Id
                    var accessToken = response.authResponse.accessToken; // Temporary accesstoken
                     $("#hdfAccessToken").val(accessToken);  //Store Access token in hidden field for later use
                    // TODO: Handle the access token                        

                } else if (response.status === 'not_authorized') {
                    // In this case, the person is logged into Facebook, but not into the app, so we call
                    // FB.login() to prompt them to do so.
                    // In real-life usage, you wouldn't want to immediately prompt someone to login
                    // like this, for two reasons:
                    // (1) JavaScript created popup windows are blocked by most browsers unless they
                    // result from direct interaction from people using the app (such as a mouse click)
                    // (2) it is a bad experience to be continually prompted to login upon page load.
                   // FB.login();
                } else {
                    // In this case, the person is not logged into Facebook, so we call the login()
                    // function to prompt them to do so. Note that at this stage there is no indication
                    // of whether they are logged into the app. If they aren't then they'll see the Login
                    // dialog right after they log in to Facebook.
                    // The same caveats as above apply to the FB.login() call here.
                    //FB.login();
                }
            });
        };

        // Load the SDK asynchronously
        (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));


    </script>

<fb:login-button scope="user_about_me,email,user_birthday,status_update,publish_stream,read_insights,offline_access,manage_pages,read_friendlists,read_mailbox,manage_notifications,user_photos,friends_photos,user_status,friends_online_presence,user_checkins,read_stream"
        width="200" max-rows="1"></fb:login-button>

 <form runat="server">
                <asp:HiddenField ID="hdfAccessToken" runat="server" />
</form>


Note : I have taken lots of scope above. Different scope's gives different data from Facebook. It is good practice always that use minimum of scope. It is taking permission from Facebook that you are going to get this this.... information from Facebook. Get the idea of this permission from developer.facebook.com because Facebook continuously doing changes in all API's.

Facebook may stop the functionality or API. So always keep track from Facebook developer news.

Comments