User Signup Using Facebook

Using Facebook registration plug-in where 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.
User Signup Using Facebook
Follow below steps to make this work:
1. Creating Facebook App
a) First step is to Create a Facebook App http://www.facebook.com/developers/createapp.php.
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) Get the App ID and App Secret.

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

CREATE TABLE tblusers
(
intid 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 just 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.

signup.php

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

4. Reading and Storing the Callback Data

<?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('DB');

// Inserting into users table
$result = mysql_query("INSERT INTO tblusers (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';
}
?>

Add a custom field(Optional)
If 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"}

You might like:

Leave a Reply