Facebook Javascript SDK – A Simple Login Page

-

 
Update 2012-01-13: For OAuth 2.0 implementation, please refer to the new post.
Facebook Javascript SDK – A Simple Login Page with OAuth 2.0

Update 2011-12-19: Since Facebook has updated their authentication system and HTTP to OAuth 2.0 and HTTPS. The following example will not work any more. i will update the post later. For more information, you can refer to Jerry Cain – Updated JavaScript SDK and OAuth 2.0 Roadmap

-

 

Facebook API allows your website to interact with the Facebook content. A very common usage is to authenticate a Facebook user to your website. Let’s try it now.

1. Create the a Facebook App @ Facebook Developers.

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

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

<?php

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

function get_facebook_cookie($app_id, $app_secret) {
  $args = array();
  parse_str(trim($_COOKIE['fbs_' . $app_id], '\\"'), $args);
  ksort($args);
  $payload = '';
  foreach ($args as $key => $value) {
    if ($key != 'sig') {
      $payload .= $key . '=' . $value;
    }
  }
  if (md5($payload . $app_secret) != $args['sig']) {
    return null;
  }
  return $args;
}

$cookie = get_facebook_cookie(YOUR_APP_ID, YOUR_APP_SECRET);
$user = json_decode(file_get_contents('https://graph.facebook.com/me?access_token='.$cookie['access_token']));

?>
<html>
  <head>
    <title>Eureka! - My Facebook Login Page</title>
  </head>
  <body>
    <div id="fb-root"></div>
    <?php if ($user->id) { ?>
      <p>Welcome <?= $user->name ?></p>
    <?php } else { ?>
      <script src="http://connect.facebook.net/en_US/all.js"></script>
      <script>
        FB.init({ 
          appId:<?php print YOUR_APP_ID; ?>, cookie:true, 
          status:true, xfbml:true
        });
      </script>
      <fb:login-button>Login to Eureka!</fb:login-button>
    <?php } ?>
  </body>
 </html>

 

4. Go to the above file URL, you could find the login button.

 

5. Enter your Facebook login in the popup window.

 

6. A confirmation box will then appear and ask you to authorize the permission of the Facebook App.

 

7. The login process is completed after you clicked the allow button. Refresh the page and see what you get.

 

8. The Facebook user has authorize the Facebook App, so the permission box will be skipped until the user remove the Facebook App @ the Facebook Account Settings page.

 

Done =)

Next: Facebook Javascript SDK – Reload/Redirect URL after Facebook Login

Reference: Facebook Developers – Facebook for Websites

About these ads

8 thoughts on “Facebook Javascript SDK – A Simple Login Page”

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