13

Here I am using Facebook Login button plugin and javascript sdk

I am able to successfully login and logout by using above.

When a first time user has gone through authentication process I need to store user basic information i.e. Facebook login name, email in my database.

Please suggest how I can do this.

<p><fb:login-button autologoutlink="true"></fb:login-button></p>


    <div id="fb-root"></div>
    <script>
        window.fbAsyncInit = function () {
            FB.init({ appId: '123456', status: true, cookie: true,
                xfbml: true
            });
        };


        (function () {
            var e = document.createElement('script');
            e.type = 'text/javascript';
            e.src = document.location.protocol +
          '//connect.facebook.net/en_US/all.js';
            e.async = true;
            document.getElementById('fb-root').appendChild(e);
        } ());
    </script>

4 Answers 4

14

Subscribe to the event auth.login. If you do this, Facebook will call your handler after a login as happened.

In that handler, use FB.api to call the Graph API to get any information you desire. For example calling /me as shown in the second example will get you basic information about the logged in user.

Now you have all the data in JavaScript. To send that up to your server, do a plain old XMLHttpRequest/AJAX request. Your JavaScript library probably makes this easy -- in jQuery this is jQuery.ajax() -- but worst case you can use XHR directly.

Now you have the data on your server and you can do whatever you want, like store it in the database. If you only want to store the data once, just check that you haven't already stored info about that user ID yet.

2
  • 10
    Per @Jon Watte's answer, be aware that user info sent via AJAX this way can't be trusted. Better to send only the Facebook userID and access token to the server and look up the user info in a server-side API call.
    – grossvogel
    Dec 14, 2011 at 19:38
  • Isn't there a more elegant way with Facebook directly? This solution is very insecure
    – basZero
    Feb 27, 2012 at 22:46
5

It's also possible to use a combination of PHP SDK and JS SDK, with the latter performing the login and the former storing data on the server. Something like:

<?php
require_once 'config.php';
require_once 'lib/facebook.php';

$facebook = new Facebook(array(
    'appId' => FB_APP_ID,
    'secret' => FB_APP_SECRET,
));


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

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function () {
        FB.init({
            appId:'<?php echo $facebook->getAppID() ?>',
            cookie:true,
            xfbml:true,
            oauth:true
        });
        FB.Event.subscribe('auth.login', function (response) {
            window.location = "showUser.php"; //redirect to showUser.php on Login
        });
        FB.Event.subscribe('auth.logout', function (response) {
            window.location.reload();
        });
    };
    (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);
    }());
</script>
<div class="fb-login-button" data-show-faces="true" data-width="200"
     data-max-rows="1"></div>
</body>
</html>

And in showUser.php you have something like:

<?php
#showUser.php
require_once 'config.php';
require_once 'lib/facebook.php';

$facebook = new Facebook(array(
    'appId' => FB_APP_ID,
    'secret' => FB_APP_SECRET,
));

$user = $facebook->getUser();

if($user)
{
    if ($user) {
        try {
            // Proceed knowing you have a logged in user who's authenticated.
            $user_profile = $facebook->api('/me');
            var_dump($user_profile); //You can now save this data
        } catch (FacebookApiException $e) {
            echo '<pre>'.htmlspecialchars(print_r($e, true)).'</pre>';
            $user = null;
        }
    }
}

?>
2
  • What is the config.php file that you referenced here? The App ID and secret key are already included. right below the includes.
    – pg.
    Apr 16, 2013 at 22:24
  • No, below the includes I pass the App ID and secret key to the Facebook constructor. They are defined in config.php
    – Jubstuff
    Apr 18, 2013 at 7:40
3

There's a hole in that solution -- this means the user can make up any information he wants and post an XHR back to my server. The server is going to need to check with Facebook directly.

2
  • This should have been a comment, so I added one to the answer above.
    – grossvogel
    Dec 14, 2011 at 19:40
  • Most sites are using FB login or manual form login. There is no point in making the FB login so secure when, if all they wanted to do is make stuff up, they could just use the manual form login. No sense in putting extra security on one and not the other. Something to keep in mind - you are never more secure than your weakest link. Jun 10, 2012 at 15:14
0
 //very simple just change this line
fb:login-button autologoutlink="true"

//with this one

fb:login-button autologoutlink="true" onlogin='your_ajax_fun_that_store_in_db()'

function your_ajax_fun_that_store_in_db(){
  FB.api('/me', function(response) {
     $.post( "ajax/store_user_info.php",response, function( data ) {
     //write you js code here !
     //you can use the (response) from facebook directly in your store_user_info.php as it will be sent in POST array
     });
 });
}
//last thing when you face such a problem the first thing to do is to go back to facebook reference of fun.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.