facebook authentication on your website

How to Authenticate Your Website Using Facebook ?

Welcome I am here to Show how to integrate facebook login on your website. This is important because user’s can easliy create account through facebook instead of filling up the registration form, so it makes registration and login faster.

Website can also be authenticate through Twitter and google but we will focuses on facebook api’s. There are many more tutorial’s available online on this topic, but i personally had a tough time figuring out the correct method to use. So i am writing down here the best method which i found out.

Facebook Login and Authentication

Facebook provides an authentication api which you can use as an alternate for the traditional login system or also to import facebook user profile information to your website. Basically how this works is you create a facebook app, ask user to grant permission to your app to access his profile information, after he has granted access you can create account on your website using his profile information.
This is the workflow which gets followed when integrating facebook login on your site (helpful for a beginner)

Create a facebook app for your domain

Add a login button on your website

There conditions are possible when user clicks on the login button.

1 1. User is Not Logged In: Facebook dialog pop’s up and asks user to login.

2. User is Logged In, but has not authorized the app: Facebook pop’s up a dialog asking user to give permission to your app.

3. User is Logged In and has already authorized the app
In this case, facebook will directly redirect to a page specified by us.

On the page where facebook redirects, we retrieve user information like name, email, facebook id etc and create his account on our website.

The entire code is divided in two part
1. javascript
2. Php

The bellow code is of java

<div id="fb-root"></div>

<script type="text/javascript">

//<![CDATA[

window.fbAsyncInit = function() {

   FB.init({

     appId      : 'XXXXXXXXXXXXXX', // App ID

     channelURL : '', // Channel File, not required so leave empty

     status     : true, // check login status

     cookie     : true, // enable cookies to allow the server to access the session

     oauth      : true, // enable OAuth 2.0

     xfbml      : false // parse XFBML

   });

};

// logs the user in the application and facebook

function login(){

FB.getLoginStatus(function(r){

     if(r.status === 'connected'){

            window.location.href = 'fbconnect.php';

     }else{

        FB.login(function(response) {

                if(response.authResponse) {

              //if (response.perms)

                   window.location.href = 'fbconnect.php';

            } else {

              // user is not logged in

            }

     },{scope:'email'}); // which data to access from user profile

}

});

}

// Load the SDK Asynchronously

(function() {

   var e = document.createElement('script'); e.async = true;

   e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';

   document.getElementById('fb-root').appendChild(e);

}());

//]]>

</script>

2. The next code is of Php

require_once 'src/facebook.php'; //include the facebook php sdk

$facebook = new Facebook(array(

        'appId' => 'XXXXXXXXXXXXXX',    //app id

        'secret' => 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXX', // app secret

));

$user = $facebook->getUser();

if ($user) { // check if current user is authenticated

    try {

        // Proceed knowing you have a logged in user who's authenticated.

        $user_profile = $facebook->api('/me'); //get current user's profile information using open graph

            }

         catch(Exception $e){}

The varaible $user_profile will contain the profile information of the user like firstname, lastname, email, facebook id etc. You can use this information to create his account on your website.

The content of the $user_profile depends on the permission which we have asked in the app. There permission are set in ‘scope’ parameter in our javascript code. A full list of all facebook permissions are given here

1. User is Not Logged In: Facebook dialog pop’s up and asks user to login. - See more at: http://excellencemagentoblog.com/blog/2012/03/22/facebook-login-integration-website/#sthash.ynqkWJBh.dpuf

In this tutorial we will see how to integrate facebook login on your website. This is useful because user’s can easliy create account through facebook instead of filling up the registration form, so it makes registration and login faster.

This tutorial is not related to magento, but rather just focuses on facebook api’s. There are many tutorial’s available online on this topic, but i personally had a tough time figuring out the correct method to use. So i am writing down here the best method which i found out.

Facebook Login and Authentication

Facebook provides an authentication api which you can use as an alternate for the traditional login system or also to import facebook user profile information to your website. Basically how this works is you create a facebook app, ask user to grant permission to your app to access his profile information, after he has granted access you can create account on your website using his profile information.
This is the workflow which gets followed when integrating facebook login on your site (helpful for a beginner)

Create a facebook app for your domain
Place a login button on your website
When user clicks on the login button there conditions are possible.