Facebook Javascript SDK – A Simple Login Page with OAuth 2.0

A few months ago, i published several posts about Facebook Javascript SDK but they no longer work since Facebook updates to OAuth 2.0. So this post is the updated version of
Facebook Javascript SDK – A Simple Login Page
and it should work works with OAuth2.

1. Create the a Facebook App @ Facebook Developers.

2. Enter the website URL under Select how your app integrates with Facebook.

3. In the webroot folder, create a directory called php-sdk and download the following 2 files from GitHub – facebook / php-sdk to the new created folder.

  • facebook.php
  • base_facebook.php

 

4. Upload the following file to your web server. This file should be located at the URL which we enter in step 2.
fb-login-oauth2.php

<?php

// Enter the app id and secret below
define('YOUR_APP_ID', '<facebook app id>');
define('YOUR_APP_SECRET', '<facebook app secret>');

require 'php-sdk/facebook.php';

$facebook = new Facebook(array(
  'appId'  => YOUR_APP_ID,
  'secret' => YOUR_APP_SECRET,
));

$userId = $facebook->getUser();
?>

<html>
  <body>
    <div id="fb-root"></div>
    <?php if ($userId) { 
      $userInfo = $facebook->api('/' + $userId); ?>
      Welcome <?= $userInfo['name'] ?>
    <?php } else { ?>
    <fb:login-button></fb:login-button>
    <?php } ?>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId : <?php print YOUR_APP_ID; ?>,
          status: true, 
          cookie: true,
          xfbml : true,
          oauth : true,
        });

        FB.Event.subscribe('auth.login', function(response) {
          window.location.reload();
        });
      };

      (function(d){
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
      }(document));
    </script>
  </body>
</html>

 

That’s all for the OAuth2 updates. But there is a slight difference with the old example Facebook Javascript SDK – A Simple Login Page. In this new example, after you have logged in, the login session will not end even if you logout from http://www.facebook.com in another browser tab. So you have to add the log out feature otherwise the application will keep your login session until you clear the browser cache.

Done =)

Reference:

About these ads

23 thoughts on “Facebook Javascript SDK – A Simple Login Page with OAuth 2.0

  1. Pingback: Facebook Javascript SDK – A Simple Login Page | Eureka!

  2. mitrajitjit Samanta

    Please help me.

    I have created a folder named facebook at my web root folder and paste these two files facebopok.php and base_facebook.php(downloaded as u directed) in it and paste fb-login-oauth2.php file at web root folder. I have changed my application Id and secret key as you see below —

    // Enter the app id and secret below
    define('YOUR_APP_ID', '177639729#######');
    define('YOUR_APP_SECRET', '74a990aa2b19b4e28bc#############'); 
    
    include_once(facebook/facebook.php');
    echo "before create facebook object";
    
    $facebook = new Facebook(array(
      'appId'  => YOUR_APP_ID,
      'secret' => YOUR_APP_SECRET,
    ));
    echo "after create facebook object";
    

    but it won’t works. The first echo statement execute but not second.
    what should I do? Please help

    Reply
    1. ykyuen Post author

      i tried and there is no problem. is that becoz you missed the open single quote.

      ...
      //include_once(facebook/facebook.php');
        include_once('facebook/facebook.php');
      ...
      
      Reply
      1. Mitrajit Samanta

        Thanks very much for your quick reply.
        But actually this mistake happened here while typing and editing, not in my original php file.
        And one thing if really its happened, then some syntax error would be prompt to me, but there is whole blank page except the line “before create facebook object”

      2. ykyuen Post author

        Set the error_reporting as follow

        <?php
        // Add the following 3 lines
        error_reporting(E_ALL);
        ini_set('display_errors', TRUE);
        ini_set('display_startup_errors', TRUE);
        
        // Enter the app id and secret below
        define('YOUR_APP_ID', '177639729#######');
        define('YOUR_APP_SECRET', '74a990aa2b19b4e28bc#############'); 
        
        include_once(facebook/facebook.php');
        echo "before create facebook object";
        
        $facebook = new Facebook(array(
          'appId'  => YOUR_APP_ID,
          'secret' => YOUR_APP_SECRET,
        ));
        echo "after create facebook object";
        ?>
        

         

        Refresh the url, what did you get?

  3. mitrajitjit Samanta

    after adding these three lines it shows me the following error —

    Fatal error: Uncaught exception ‘Exception’ with message ‘Facebook needs the CURL PHP extension.’ in /var/www/facebook/base_facebook.php:19 Stack trace: #0 /var/www/facebook/facebook.php(18): require_once() #1 /var/www/fb-login-oauth2.php(11): include_once(‘/var/www/facebo…’) #2 {main} thrown in /var/www/facebook/base_facebook.php on line 19

    Reply
  4. Vincent bergeron

    Hi,
    Thanks for that tuto but I got a problem:
    Everything seems to work well except that the page is alway reloading. If I remove this section and refresh manually it is working fine:
    FB.Event.subscribe(‘auth.login’, function(response) {
    window.location.reload();
    Can you help?

    Reply
  5. Ross French

    Hi – thanks for posting the code. I have copied your file, placed it on the server. When the page first appears it shows the login button. Once I click that, i login. After that, the screen comes back with only the login button again. Isn’t it supposed to do something else? I’m thinking something could be wrong with my set-up, but it shows no php errors of not. Any advice?

    Reply
    1. ykyuen Post author

      It is a 2 steps login, if your browser doesn’t have a facebook login session.

      1. it will show the fb connect button.
      2. click the fb connect button and there is popup fb login window.
      3. after login, the fb connect button will change to fb login button.
      4. click the fb login button to complete the login.

      if you are already login to facebook, step 1 & 2 are skipped.

      Reply
  6. dnyaneshwar kashid

    hi,
    i have got following error after loing with facebook popup,

    Fatal error: Uncaught CurlException: 77: error setting certificate verify locations: CAfile: C:\xampp\htdocs\facebook\fb3/fb_ca_chain_bundle.crt CApath: none thrown in C:\xampp\htdocs\facebook\fb3\base_facebook.php on line 977

    Reply

Leave a Reply

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