Facebook login integration with website, Login with Facebook for websites

Wednesday, January 9, 2013

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

20 comments:

Mitrajit Samanta said...

I have followed your post and try to do it by just change the app id and secret id. and copy this file to my root folder but it won't work. no email id or user name displayed.
What should I do? please reply.
Thank u

W3Lessons Programming Blog said...

Kindly Verify your facebook App running on the same Website, While you are configure at Website URL setup at the time of New App Creation on Facebook developer account.

Anonymous said...

Hi Mr Jailani, hopefully you can help my trouble. I like yout sample project. But, can i make this project using coldfusion?? Thanks so much Mr Jai.

Jailani M said...

Hi, Above Sample Project build with Facebook PHP SDK. As you need in ColdFusion you can use this Facebook Connect code at
"https://github.com/weejames/Facebook-Connect-Library-for-Cold-Fusion"
hopefully this will help to your project.

Anonymous said...

I have managed to create a login and logout page. but I am still confused how to get and display the email and username of the member login.

could you give me an example with the full source of the sample?

Anonymous said...

how can i get APP_KEY and SECRET_KEY ?
in my facebook apps, theres have APP_ID and APP_SECRET. Thanks so much

Anonymous said...

dfg

Senthil kanna said...

hi.I have used your code only.But where we add the redirection page after login

shree said...

When I try to integrate this code ..its saying invalid API key ..though I gave it correct.

Anonymous said...

It all worked great, but the email and name doesn't come through, and the "logout" link doesn't work?!

Anil Kumar Panigrahi said...

Thank you very much ... It is working great. But how can we implement it without using cookies.

maya41 said...

after the login it says just "welcome" with out the name and same thin about "E-mail ID:" pls help me

Anonymous said...

You have done a nice job but how can we speed up this process in website. If we place this code in top of website it took 10-15 seconds to make page load and without it site loads in 2 secs.

Any IDEA

Sonu said...

Hello Sir,How to use the below code :

Uncomment this to show all available variables
- 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

Anonymous said...

Thank you, your code works nice with me, but i'd like to make some changes. How do i change the Facebook login popup window size?

Anonymous said...

Thanks so much

Anonymous said...

hi thanks your code working nice. Can you please tell me how to fetch friends details?. viz. name photo, working currently,date of joining etc..

Anonymous said...

Nice work....But receving error as below

Warning: file_get_contents() [function.file-get-contents]: URL file-access is disabled in the server configuration in C:\APM_Setup\htdocs\app_name\facebook-login.php on line 14

Warning: file_get_contents(https://graph.facebook.com/oauth/access_token?client_id=xxxxxxxxxx&redirect_uri=&client_secret=xxxxxxxxxxxxxxxxxx) [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in C:\APM_Setup\htdocs\app_name\facebook-login.php on line 14

pls help....

Akram said...

Problem behind this error message is, your hosting provider blog the url access from PHP Script, ask them to enable this feature.

Configured Tester said...

Thanks dude !
It works perfectly !
(Y)
:D

Post a Comment