Facebook login using javascript

<!DOCTYPE html>
<html xmlns:fb="https://www.facebook.com/2008/fbml">

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

    <body>
        <div id="fb-root"></div>
        <script type="text/javascript">
            var button;
            var userInfo;

            window.fbAsyncInit = function () {
                FB.init({
                    appId: 'YOUR_APP_ID', //change your app id
                    status: true,
                    cookie: true,
                    xfbml: true,
                    oauth: true
                });

                function updateButton(response) {
                    button = document.getElementById('fb-auth');
                    userInfo = document.getElementById('user-info');

                    if (response.authResponse) {
                        //user is already logged in and connected
                        FB.api('/me', function (info) {
                            login(response, info);
                        });

                        button.onclick = function () {
                            FB.logout(function (response) {
                                logout(response);
                            });
                        };
                    } else {
                        //user is not connected to your app or logged out
                        button.innerHTML = 'Login';
                        button.onclick = function () {

                            FB.login(function (response) {
                                if (response.authResponse) {
                                    FB.api('/me', function (info) {
                                        login(response, info);
                                    });
                                } else {
                                    //user cancelled login or did not grant authorization

                                }
                            }, {
                                scope: 'email,user_birthday,status_update,publish_stream,user_about_me'
                            });
                        }
                    }
                }

                // run once with current status and whenever the status changes
                FB.getLoginStatus(updateButton);
                FB.Event.subscribe('auth.statusChange', updateButton);
            };
            (function () {
                var e = document.createElement('script');
                e.async = true;
                e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
                document.getElementById('fb-root').appendChild(e);
            }());

            function login(response, info) {
                console.log(info);
                if (response.authResponse) {
                    var accessToken = response.authResponse.accessToken;

                    userInfo.innerHTML = '<img src="https://graph.facebook.com/' + info.id + '/picture">' + "<br /> Access Token: " + accessToken + "<br /> Your Birthday:" + info.birthday + "<br /> Your Email:" + info.email + "<br /> Your First Name:" + info.first_name + "<br /> Your Last Name:" + info.last_name + "<br /> Your Gender:" + info.gender + "<br /> Profile Link:" + info.link + "<br /> Username:" + info.username;

                    button.innerHTML = 'Logout';

                    document.getElementById('other').style.display = "block";
                }
            }

            function logout(response) {
                userInfo.innerHTML = "";
                document.getElementById('debug').innerHTML = "";
                document.getElementById('other').style.display = "none";

            }

            //stream publish method
            function streamPublish(name, description, hrefTitle, hrefLink, userPrompt) {

                FB.ui({
                    method: 'stream.publish',
                    message: '',
                    attachment: {
                        name: name,
                        caption: '',
                        description: (description),
                        href: hrefLink
                    },
                    action_links: [{
                        text: hrefTitle,
                        href: hrefLink
                    }],
                    user_prompt_message: userPrompt
                },

                function (response) {

                });

            }
        </script>
        <button id="fb-auth">Login</button>
        <br />
        <div id="user-info"></div>
        <br />
        <div id="debug"></div>
        <div id="other"></div>
    </body>

</html>
About these ads

1 Comment

  1. This is great help, thank you very much. I am currently working on how to populate to a custom form where a user could log in using his Facebook account, and the form field get populated or filled automatically. Here is the example I am trying to achieve:

    https://www.odesk.com/signup/create-account/id/Contractor_513fe3bbc22f39.42230548

    The part I am having trouble with is populating the field s in the form on login to Facebook. Any help on this, is appreciated. Thank you much

I like to hear from you about this !!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s