Login with facebook authentication with in your app by using jquery

I implemented this scenario in Grails application. first of all create sample web application.

step 1:

place given code as below in html page. create a button in html page. button id as fbImg.

<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.14.0.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/qunit/qunit-1.14.0.js"></script>
<asset:javascript src="jquery.fblogin.js"/>
<asset:javascript src="tests.js"/>
<button class="login_icons_soco pointer" id="fbImg" >FB Login</button>
<script>
 $(document).ready(function(){
$('#fbImg').click(function(){
var s = 'script';
var id = 'facebook-jssdk';
var js, fjs = document.getElementsByTagName(s)[0];
   if (document.getElementById(id)) {return;}
   js = document.createElement(s); js.id = id;
   js.src = "https://connect.facebook.net/en_US/sdk.js";
   fjs.parentNode.insertBefore(js, fjs);
});
 });
</script>

step 2: jquery.fblogin.js file

(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // CommonJS
        factory(require('jquery'));
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {
    $.extend({
        /**
         * fblogin
         * @property {object}  options      - settings for fblogin plugin.
         *
         * Required:
         * options.fbId         {string}    - the Facebook app id
         *
         * Optional:
         * options.permissions  {string}    - a comma seperated list of FB permissions. See http://bit.ly/1plqJSs
         * options.fields       {string}    - a comma seperated list of field ids. See http://bit.ly/1plrevO
         * options.success      {function}  - callback that will be triggered when data is successfully returned from FB.
         * options.error        {function}  - callback that will be triggered by any errors.
         */
        fblogin: function (options) {
            /**
             * Private Props
             * @property {object}  __               - add private module functions here.
             * @property {object}  isSdkLoaded      - a flag for when the FB SDK has loaded.
             * @property {object}  isFbInitiated    - a flag for when FB.init has been called.
             * @property {object}  $dfd             - stores an instance of jquery Deferred.
             */
            var __,        
                isSdkLoaded,    
                isFbInitiated,
                $dfd;

            options = options || {};
            isSdkLoaded = false;
            isFbInitiated = false;
            $dfd = $.Deferred();

            // PRIVATE FUNCTIONS
            __ = {
                init: function () {
                    // FB ID is required
                    if (!options.fbId) {
                            throw new Error('Required option "fbId" is missing!');
                    }

                    options.permissions = options.permissions || '';
                    options.fields = options.fields || '';
                    options.success = options.success || function(){};
                    options.error = options.error || function(){};

                    __.listenForFbAsync();
                },
                listenForFbAsync: function () {
                    if (window.fbAsyncInit) {
                        var notMyFunction = window.fbAsyncInit;
                    }
                    // listen for FB SDK load
                    window.fbAsyncInit = function() {
                        __.initFB();
                        isSdkLoaded = true;
                        if (notMyFunction) { notMyFunction(); }
                    };

                    if (isSdkLoaded || window.FB) {
                        window.fbAsyncInit();
                        return;
                    }
                },
                initFB: function () {
                    if (!isFbInitiated) {
                        window.FB.init({
                            appId      : options.fbId,
                            cookie     : true,
                            xfbml      : true,
                            version    : 'v2.0'
                        });

                        isFbInitiated = true;
                    }
                 
                    $dfd.notify({status: 'init.fblogin'});
                },
                loginToFB: function () {
                    window.FB.login(function(response) {
                        if (response.authResponse) {

                            $dfd.notify({
                                status: 'authenticate.fblogin',
                                data: response
                            });

                        } else {
                            // mimic facebook sdk error format
                            $dfd.reject({
                                error: {
                                    message: 'User cancelled login or did not fully authorize.'
                                }
                            });
                        }
                    }, {
                        scope: options.permissions,
                        return_scopes: true
                    });
                },
                getFbFields: function (accessToken) {
                    FB.api('/me', {fields: options.fields}, function(response) {
                        if (response && !response.error) {
                            $dfd.resolve(response);
                            // Set login details
                            $('#authEmail').val(response.email)
                            $('#socialMediaActive').val(true);
                            callAuthForm();
                        }
                        else {
                            $dfd.reject(response);
                        }
                    });
                }
            };

            // This monitors the FB login progresssion
            // 1. Init FB
            // 2. FB.login
            // 3. Get user data
            $dfd.progress(function (response) {
                if( response.status === 'init.fblogin' ) {
                    __.loginToFB();
                } else if( response.status === 'authenticate.fblogin' ) {
                     __.getFbFields(response.data.authResponse.accessToken);
                } else {
                    dfd.reject();
                }
            });

            // point callbacks at deffereds
            $dfd.done(options.success);
            $dfd.fail(options.error);

            // here we go!
            __.init();

            return $dfd;
        }
    });
}));

step 3: test.js file

(function($) {
   module('plugin options');
   test('required FB id option not included', function () {
       throws(function () {
var options = new Object();
options.fbId = 'APP ID HERE'
options.permissions = 'public_profile,email';
options.fields = 'email';
           $.fblogin(options);
       },
       'Should throw an error');
   });
}(jQuery));

step 4:

create controller, call an action it views step 1 html page.

 

it shows like this

before going to login we can add our app in facebook application. for that goto this link

https://developers.facebook.com/apps

it shows facebook login. just login into fb with your account. it shows dashboard like this

 

goto MyApps >> Add New App

it shows like this

select website

   

give app name and choose category as apps for pages then click on create app ID. you will navigated to app dashboard

goto settings, click on add platform

select platform as website

give url of app

and then save

goto advanced. give call back url

then save.

place app id in tests.js in step 3

now run the app. click on fb button

login with your login details you will navigated to your application.

for mail id and profile details you can go to step 2. below function

getFbFields: function (accessToken) {
                    FB.api('/me', {fields: options.fields}, function(response) {
                        if (response && !response.error) {
                            $dfd.resolve(response);
                            // Set login details
                            alert(response.email)
                        }
                        else {
                            $dfd.reject(response);
                        }
                    });
                }


Reference:

http://www.jqueryrain.com/?EiMyCkSQ
http://www.oauthlogin.com/