Hi,<\/p>\n
In my recent grails project i had a requirement to allow an user to login into my site using his Facebook credentials
\nTo achieve it , here is what is required to be done : <\/p>\n
\r\n\r\n<\/pre>\n1) Create an application in facebook :<\/strong>
\nCreate an application in facebook from the application dashboard (https:\/\/developers.facebook.com\/apps).<\/p>\n\r\n\r\n<\/pre>\n2) Provide the App Domain and Site Url :<\/strong>
\nAfter providing the required appname now it is needed to provide the App Domain and Site Url,<\/p>\ni) Set App Domain to your domain eg. ‘myDomain.com’.<\/p>\n
ii) Now , go to the section ‘Select how your app integrates with Facebook’ and select ‘Website with Facebook Login’ and provide
\n your site URL eg. ‘http:\/\/www.myDomain.com’.<\/p>\nNote the App ID value , it would be required later.<\/p>\n
\r\n\r\n<\/pre>\n3) Load the javascript sdk :<\/strong>
\nLoad the javascript sdk now by writing this script in the login page of the application :<\/p>\n[javascript]<\/p>\n
<script>
\n window.fbAsyncInit = function() {
\n FB.init({
\n appId : ‘YOUR_APP_ID’, \/\/ App ID
\n channelUrl : ‘\/\/WWW.YOUR_DOMAIN.COM\/channel.html’, \/\/ Channel File
\n status : true, \/\/ check login status
\n cookie : true, \/\/ enable cookies to allow the server to access the session
\n xfbml : true \/\/ parse XFBML
\n });
\n \/\/ Additional initialization code here
\n };
\n \/\/ Load the SDK Asynchronously
\n (function (data) {
\n var jse, id = ‘facebook-jssdk’, ref = data.getElementsByTagName(‘script’)[0];
\n if (data.getElementById(id)) {
\n return;
\n }
\n jse = data.createElement(‘script’);
\n jse.id = id;
\n jse.async = true;
\n jse.src = "\/\/connect.facebook.net\/en_US\/all.js#xfbml=1&appId=YOUR_APP_ID";
\n ref.parentNode.insertBefore(jse, ref);
\n }(document));
\n <\/script><\/p>\n[\/javascript]<\/p>\n
4) Add facebook login button :<\/strong>
\nNow 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.
\n We can authenticate the user from the information which he has on facebook rather than forcing the user to register for
\n our site.For this we need facebook to do the authentication part for us.
\n To do authentication we have to add a Facebook login button in our login page as :<\/p>\n[html]<\/p>\n
<div class="fb-login-button">Login with Facebook<\/div><\/p>\n
[\/html]
\nThis provides us the access to user’s basic information.For getting access to more information as Email we need to ask
\npermissions from the user by mentioning it in a scope attribute as :
\n[html]
\n<div class="fb-login-button" scope="email,user_checkins">
\n Login with Facebook
\n <\/div><\/p>\n[\/html]<\/p>\n
5) Get information of the authenticated user :<\/strong>
\nWhen the user is logged in facebook ,we have the information of the authenticated user.To get that information we do:<\/p>\n[javascript]<\/p>\n
FB.Event.subscribe(‘auth.login’, function () {
\nFB.getLoginStatus(function (response) {
\n if (typeof(response) == ‘undefined’) {
\n return
\n }
\n else {
\n var uid = response.authResponse.userID;
\n var accessToken = response.authResponse.accessToken;
\n getProfileInfoAndLogin(accessToken);
\n }<\/p>\n});
\n });<\/p>\nfunction getProfileInfoAndLogin(token) {
\n var url = "${createLink(controller: ‘controllerName’, action: ‘actionName’)}";
\n FB.api("\/me", "GET", function (response) {
\n $.ajax({
\n type:"GET",
\n url:url,
\n dataType:"html",
\n data:{fbEmail:response.email}
\n }).done(function (data) {
\n alert(data);
\n if (data == "true") {
\n \/\/ redirect user to his homepage
\n \/\/ eg. window.location = "http:\/\/www.example.com\/user\/home";
\n }
\n else {
\n alert("failure")
\n }
\n });
\n });
\n }
\n[\/javascript]
\nIn 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.
\nI have send the user’s email to the server using an Ajax call and checked whether that
\nEmail exists in database and then logged the user into my site as :
\n[javascript]
\n def fbLoginCheck() {
\n String userEmail = params.fbEmail
\n if (User.countByEmail(userEmail)) { \/\/ User is already stored in database
\n session.userEmail = userEmail
\n render true
\n }
\n }
\n[\/javascript]<\/p>\n\r\n\r\n<\/pre>\n6) Logout user :<\/strong>
\nTo log the user out of our site we add this script to the HOME page of user along with the javascript SDK :<\/p>\n[javascript]<\/p>\n
function fbLogout(){
\n FB.logout(function (response) {
\n\/\/ Do what we want to do when user logs out from facebook like call our logout action.
\n\/\/ eg. window.location = "http:\/\/www.example.com\/logout";
\n });
\n }
\n[\/javascript]<\/p>\nThe logout button can be added as :
\n[html]
\n<span id="fbLogout" onclick="fbLogout()"><a class="fb_button fb_button_medium"><span class="fb_button_text">Logout<\/span><\/a><\/span>
\n[\/html]<\/p>\nHope this helps.
\nCheers. \ud83d\ude42<\/p>\nVineet Mishra
\nIntelligrape software<\/p>\n","protected":false},"excerpt":{"rendered":"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 […]<\/p>\n","protected":false},"author":58,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":4},"categories":[7],"tags":[703,1041,700],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/8084"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/58"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=8084"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/8084\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=8084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=8084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=8084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}