Facebook login integration with website, Login with Facebook for websites


Facebook login integration with website, Login with Facebook for websites

Facebook provide OAuth support provides web developers are able to create a Login or Sign In option with Existing Facebook Account without spending more time on new registration on your website.
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

Download This Script     Facebook Connect Live Demo

Copy from http://www.w3lessons.com/2012/01/facebook-login-integration-with-website.html

Advertisements
By dbglory Posted in PHP

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