Hi,

In my recent grails project i had a requirement to allow an user to login into my site using his Facebook credentials
To achieve it , here is what is required to be done :

1) Create an application in facebook :
Create an application in facebook from the application dashboard (https://developers.facebook.com/apps).

2) Provide the App Domain and Site Url :
After providing the required appname now it is needed to provide the App Domain and Site Url,

i) Set App Domain to your domain eg. ‘myDomain.com’.

ii) Now , go to the section ‘Select how your app integrates with Facebook’ and select ‘Website with Facebook Login’ and provide
your site URL eg. ‘http://www.myDomain.com’.

Note the App ID value , it would be required later.

3) Load the javascript sdk :
Load the javascript sdk now by writing this script in the login page of the application :

 
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            appId      : 'YOUR_APP_ID', // App ID
            channelUrl : '//WWW.YOUR_DOMAIN.COM/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
          });
          // Additional initialization code here
        };
        // Load the SDK Asynchronously
        (function (data) {
                var jse, id = 'facebook-jssdk', ref = data.getElementsByTagName('script')[0];
                if (data.getElementById(id)) {
                    return;
                }
                jse = data.createElement('script');
                jse.id = id;
                jse.async = true;
                jse.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID";
                ref.parentNode.insertBefore(jse, ref);
            }(document));
      </script>

4) Add facebook login button :
Now we are Good to go. We would want that when a user is logged in on facebook , he gets logged in on our site as well.
We can authenticate the user from the information which he has on facebook rather than forcing the user to register for
our site.For this we need facebook to do the authentication part for us.
To do authentication we have to add a Facebook login button in our login page as :

  <div class="fb-login-button">Login with Facebook</div>

This provides us the access to user’s basic information.For getting access to more information as Email we need to ask
permissions from the user by mentioning it in a scope attribute as :

<div class="fb-login-button" scope="email,user_checkins">
        Login with Facebook
      </div>

5) Get information of the authenticated user :
When the user is logged in facebook ,we have the information of the authenticated user.To get that information we do:

FB.Event.subscribe('auth.login', function () {
FB.getLoginStatus(function (response) {
                    if (typeof(response) == 'undefined') {
                        return
                    }
                    else {
                        var uid = response.authResponse.userID;
                        var accessToken = response.authResponse.accessToken;
                        getProfileInfoAndLogin(accessToken);
                    }

                });
 });

 function getProfileInfoAndLogin(token) {
                    var url = "${createLink(controller: 'controllerName', action: 'actionName')}";
                    FB.api("/me", "GET", function (response) {
                 $.ajax({
                            type:"GET",
                            url:url,
                            dataType:"html",
                            data:{fbEmail:response.email}
                        }).done(function (data) {
                                    alert(data);
                                    if (data == "true") {
                                        // redirect user to his homepage
                                      // eg.   window.location = "http://www.example.com/user/home";
                                    }
                                    else {
                                        alert("failure")
                                    }
                                });
                    });
                }

In the getProfileInfoAndLogin function, ‘function(response)’ is a callback function through which we can access the data facebook sends after passing validation.When we have the data we can manipulate it as we want.
I have send the user’s email to the server using an Ajax call and checked whether that
Email exists in database and then logged the user into my site as :

 def fbLoginCheck() {
        String userEmail = params.fbEmail
            if (User.countByEmail(userEmail)) {    // User is already stored in database
             session.userEmail = userEmail      
            render true
        }
  }

6) Logout user :
To log the user out of our site we add this script to the HOME page of user along with the javascript SDK :

 function fbLogout(){
            FB.logout(function (response) {
//              Do what we want to do when user logs out from facebook like call our logout action.
//              eg.  window.location = "http://www.example.com/logout";
            });
        }

The logout button can be added as :

<span id="fbLogout" onclick="fbLogout()"><a class="fb_button fb_button_medium"><span class="fb_button_text">Logout</span></a></span>

Hope this helps.
Cheers.

Vineet Mishra
Intelligrape software