Friday, June 22, 2012

Signup Users using Facebook Registration Plugin

Almost every Website, ask its users to Sign Up for an account using a valid email address. Which is a tough task for the user, if that includes filling up a large registration Forms, with multiple information to be filled, many users quit at this point, and never register. Hence, today we will be discussing about the Facebook Registration pplugin, which helps users Autofill their registration forms using Facebook's account.

Facebook has also introduced its "Login with Facebook" plugin, but i do not find it safe to authenticate users based on their Facebook account directly.


And just like me, most of the developers think the same, but in here, by just taking help of Facebook in filling the registration forms, we help the users to get rid of typing again and again the same email address and other info to register, and at the same time, we save the information precisely to our database.

Its just a way to Autofill the registration form, if the user is already logged into Facebook. Its a simple iframe, which can be placed anywhere on your webpage, and additional fields can also be included.

Now lets discuss, about how to accomplish this, it is very easy and simple, initially the first task that you need to do is, get you website registered as an App with Facebook. You will get an App id and an App Secret id, save them, because we will be using them for this plugin to work.


Download the Script



Visit https://developers.facebook.com/apps , login with your account, and click on App button, Fill the info to create a new App (like site name, site URL, domain name etc), then you will be provided with your App Id and Secret App Id.


Database Design


 Users Table:  (This table is made based on our requirements, here we are just including name, email, and password.)


CREATE TABLE users(                                                  
uid INT PRIMARY KEY AUTO_INCREMENT,                                  
fullname VARCHAR(100),                                                
email VARCHAR(200) UNIQUE,
password VARCHAR(100));


Registration Form

This is displayed by the iframe automatically, all you need to do is replace the client_id and redirect_uri with your Facebook App Id and the redirection url.

Here we are just including, name, email, password and captcha. But you can also add other fields. 
  • For date of birth and gender you can simply add  {"name":"dob"}, and  {"name":"gender"}, below the similar field of password in the below given iframe (after the 7th line).
  • For additional fields, you need to add, add additional codes with description and name of the custom field. Example - to add a field for phone number, we must add  {"name":"phone", "description":"Phone Number", "type":"text"} to our existing code after 7th line.


  signup_facebook.php  

<iframe src="http://www.facebook.com/plugins/registration.php?

                        client_id=18346754546546&

               redirect_uri=http://www.yourdomain.com/save_fb_user.php&

                        fields=[

                        {"name":"name"},

                        {"name":"email"},

                        {"name":"password"},

                        {"name":"captcha"},

                        ]'

                        scrolling="auto"

                        frameborder="no"

                        style="border:none;"

                        allowTransparency="true"

                        width="450"

                        height="450">

</iframe>




You will get such a form as output of the above iframe.



Fetching and Storing the Callback data

  save_fb_user.php  


<?php
include ("db.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"];



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


if($result){
echo "Successfully registered";
}
else
{
// Error in storing
}
}
else 
{
echo '$_REQUEST is empty';
}
?>


This was all you needed to do, now users can get their registration forms auto filled using Facebook data, only they nee to fill in a password for your website, and the custom fields if added.


If you have any query related to this tutorial, do let us know through your precious comments
love hearing from you.







3 comments:

  1. I have only just come across your tutorials and I think I have been missing out. Excellent, and thank you for sharing.

    A question, if you don't mind! I have been looking too add Facebook login/registration for a while and have come across several tutorials, unfortunately they all assume that the user is starting from scratch with nothing in place.

    I already have login/registration system in place and would like to add Facebook on top of it it. Any directions on how to go about it would be very much appreciated.

    Thanks again for the tutorials

    ReplyDelete
  2. Hi

    I have just integrated this into my website and works perfect but how do users who use the form login using the details they entered into the form

    http://tuts.wtfdiary.com/2012/06/signup-users-using-facebook.html

    For example I used the form and registered successfully with a totally different password from my normal facebook password but no way to login to test it works
    any ideas please as really love this app and the tutorial you made

    Kind regards

    Ian

    ReplyDelete
  3. Nice tutorial.. Can you tell how to save the access token after a user authenticate the app?

    ReplyDelete