User Signup using Facebook Data

Using facebook registration plug-in users can easily sign up on your website using facebook data. With one simple facebook login the form will be filled with user appropriate data. This plug-in is a simple iframe you can place it anywhere on your webpage. You can also add a custom field if facebook doesn’t have.

 1. Creating Facebook App

a) First step is to Create a Facebook App.
b) Give a name for the Application and agree the Terms and Conditions.
c) On the Web Site tab give the values for siteURL and site domain
d) Store the App ID and App Secret.

2. Designing the Database
  Create a table depending upon the fields we required in the registration process.

CREATE TABLE users
(
uid int(11) PRIMARY KEY AUTO_INCREMENT,
fullname varchar(50),
email varchar(50) UNIQUE,
password varchar(50),
gender varchar(6),
dob varchar(16)
);

 

3. Designing the Registration Form

a) We are using iframe provided to by facebook to display registration form.
b) You all have to do is just replace client_id and redirect_uri with your Facebook App Id and the redirection url.
c) In this tutorial we are designing a form with name, email, password, gender, date of birth and captcha.

registration.php

<iframe allowtransparency="true" frameborder="no" height="600" scrolling="auto" src="http://www.facebook.com/plugins/registration.php?
client_id=183620578322567&
redirect_uri=http://example.com/store_user_data.php?&
fields=[
{"name":"name"},
{"name":"email"},
{"name":"password"},
{"name":"gender"},
{"name":"birthday"},
{"name":"captcha"}
]"
scrolling="auto"
frameborder="no"
style="border: none;"
width="500"
height="600">
</iframe>

 

4. Reading and Storing the Callback Data

store_user_data.php

<?php
define('FACEBOOK_APP_ID', 'your_app_id'); // Place your App Id here
define('FACEBOOK_SECRET', 'your_app_secret'); // Place your App Secret Here

// No need to change the function body
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 ($_REQUEST)
{
$response = parse_signed_request($_REQUEST['signed_request'],
FACEBOOK_SECRET);

$name = $response["registration"]["name"];
$email = $response["registration"]["email"];
$password = $response["registration"]["password"];
$gender = $response["registration"]["gender"];
$dob = $response["registration"]["birthday"];

// Connecting to database
mysql_connect('DATABASE_HOST', 'YOUR_USERNAME', 'YOUR_PASSWORD');
mysql_select_db('YOUR_DATABASE');

// Inserting into users table
$result = mysql_query("INSERT INTO users (name, email, password, gender, dob) VALUES ('$name', '$email', '$password', '$gender', '$dob')");

if($result){
// User successfully stored
}
else
{
// Error in storing
}
}
else
{
echo '$_REQUEST is empty';
}
?>

 

Adding a custom field

f you want to request user for additional information that facebook may not have then add a custom field in JSON string.

{"name":"phone", "description":"Phone Number", "type":"text"}