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
Pingback: Facebook Javascript SDK – Reload/Redirect URL after Facebook Login | Eureka!
Great tutorial… thanks a lot !
you are welcome. =)
Pingback: Facebook Javascript SDK – Logout | Eureka!
Pingback: Facebook Javascript SDK – A Simple Login Page with OAuth 2.0 | Eureka!
Can u tell me how to retrieve user details after login and store into mysql database
you could modified the fb login button to get more access permissions. ex.
Here is the list of available permissions.
Facebook API reference – Permissions