Login Using Facebook Account - FB Connect

Details
Published: Thursday, 31 January 2013 15:57
Written by Super User
Hits: 1120

This blog describes how to implement login using facebook in your website using - FB Connect .

Now a days almost all most all website have a twitter or facebook account and these platforms provide oAuth support which can be utilized to authenticate users for your site. We don't need to implement a secure login mechanism. There are many ways to implement login using facebook account . In this article , i will explain "How to Login Using Facebook Account" using Javascript  -  FB Connect.

 

To implement login using facebook in your website you need to have a facebook app id , which can be created using the Facbook instructions 

Once you create the application, you can see an facebook app id on the top of the facebook page.

Once Facebook app ID is created , follow the instructions below to create login using facebook account

  • Import the following js into the HTML page where Login using Facebook Button is located .
  <script src="/http://connect.facebook.net/en_US/all.js#appId=####### Your app id #######&xfbml=1"></script>
  • Initialize the Javascript module using below function.
FB.init({
	appId   : '####### Your facebook app id #######',
	status  : true, 
	cookie  : true, 
	xfbml   : true 
});
  • Now we need to call the important method which initiates the login using facebook process.
Make sure this method is called only on a user action like mouse click button press etc, else the browser may block the facebook login pop up.
 
function callFBLogin(){
	FB.login(function(response) {
		if (response.authResponse) {
			FB.api('/me', function(response) {
				alert("Recieved information: "+JSON.stringify(response));
        // You can send the required information to the server side for your custom needs
        // (like creating a local user for the site when somebody logs into the system using 
        // facebook first time etc) from here.
		   });
		}else{
                alert("Access not authorized.");
        }
	},{scope: 'email'});
}
 
You can request extended permission ( permission to access user likes, post on your wall etc) from the user using the scope attribute of the FB.login function.

This way you can provide login using facebook using  FB Connect, in your website . Hope this article helps you in implementing "Login using Facebook Account Functionality" . If you have any queries related to this topic , please post your queries in the comments section of "Login using Facebook Account Functionality" Blog.

Additional information