Herewith we saw how to integrate in to your website using Login with Facebook Button in easy way.
In Order to Create a "Login with Facebook" for your website you need a Facebook account to generate APP_ID and APP_SECRET, Create a Facebook user account and Navigate to the App Developer Page
http://www.facebook.com/developers/
In Top right press "Create New App" Button you will navigate to the following screen.
In this App Creation Popup, tell your app Display Name on your Facebook Login Popup. and App Namespace is Unique Identifier on Facebook (all lowercase) Check I Agree and Continue. in next screen expand Website Rown from "Select how your app Integrates with facebook" Section.
put your website URL which actually place the "Login with Facebook" Button. eg: http://www.w3lessons.com/ or In case of Local testing you can put http://localhost/facebooklogin/
press "Save Changes" on Bottom of that screen register your App on Facbook.
Now Your App is Ready and you can create "Login with Facbook" Button for your website.
1. PHP functions for Server Side handling to get Facebook data and store them to our database.
2. Create Login Button Using Facbook JavaScript SDK
3. Create Logout Button Using Facebook SDK
facebook-login.php (full Source)
<?php
session_start();
define('YOUR_APP_ID', 'YOUR_APP_KEY_HERE');
define('YOUR_APP_SECRET', 'YOUR_SECRET_KEY_HERE');
function get_facebook_cookie($app_id, $app_secret) {
$signed_request = parse_signed_request(@$_COOKIE['fbsr_' . $app_id], $app_secret);
// $signed_request should now have most of the old elements
$signed_request['uid'] = $signed_request['user_id']; // for compatibility
if (!is_null($signed_request)) {
// the cookie is valid/signed correctly
// lets change "code" into an "access_token"
// openssl must enable on your server inorder to access HTTPS
$access_token_response = file_get_contents("https://graph.facebook.com/oauth/access_token?client_id=$app_id&redirect_uri=&client_secret=$app_secret&code={$signed_request['code']}");
parse_str($access_token_response);
$signed_request['access_token'] = $access_token;
$signed_request['expires'] = time() + $expires;
}
return $signed_request;
}
function parse_signed_request($signed_request, $secret) {
list($encoded_sig, $payload) = explode('.', $signed_request, 2);
// decode the data
$sig = base64_url_decode($encoded_sig);
$data = json_decode(base64_url_decode($payload), true);
if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {
error_log('Unknown algorithm. Expected HMAC-SHA256');
return null;
}
// check sig
$expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
if ($sig !== $expected_sig) {
error_log('Bad Signed JSON signature!');
return null;
}
return $data;
}
function base64_url_decode($input) {
return base64_decode(strtr($input, '-_', '+/'));
}
if (isset($_COOKIE['fbsr_' . YOUR_APP_ID]))
{
$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']));
/*
Uncomment this to show all available variables
echo "<pre>";
- print_r function expose all the values available to get from facebook login connect.
print_r($user);
1. Save nessary values from $user Object to your Database
2. Register a Sesion Variable based on your user account code
3. Redirect to Account Dashboard
echo "</pre>";
*/
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Facebook Login Connect for Website Demo</title>
<style type="text/css">
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #333;
}
body {
margin-left: 50px;
margin-top: 50px;
}
</style>
</head>
<body>
<?php if (@$cookie) { ?>
<h2>Welcome <?= $user->name ?> </h2> <br />
E-mail ID: <?= $user->email ?>
<br />
<a href="javascript://" onclick="FB.logout(function() { window.location='facebook-login.php' }); return false;" >Logout</a>
<?php } else { ?>
<h2>Welcome Guest! </h2>
<div id="fb-root"></div>
<fb:login-button perms="email" width="width_value" show_faces="true" autologoutlink="true" size="large">Login with Facebook</fb:login-button>
<?php } ?>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
// Initiate FB Object
FB.init({
appId: '<?= YOUR_APP_ID ?>',
status: true,
cookie: true,
xfbml: true
});
// Reloading after successfull login
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
</script>
</body>
</html>
If you have any problem feel free to comment | Facebook Connect Live Demo |
