Facebook API: Log-in using JavaScript(Part-4)

In this part, I am going to show you how you can use Facebook SDK for JavaScript. I shall also show you how to authenticate and log-in via app using that SDK. We have a lot to cover; so let’s get started!

Tools to need

We would require two tools for this parts, which are:

  • XAMPP
  • Any text editor to write a JavaScript code(I shall use Sublime text)

How to install XAMPP

Go to the following link:

https://www.apachefriends.org/download.html

and choose your operating system and install XAMPP.

The question arises why do we need XAMPP? Well, I am going to make a webpage, which will be run on the localhost. Hence, XAMPP is the perfect tool to use.

Facebook Authentication

After installing XAMPP, we now need to create our Application. Go to the following link:

https://developers.facebook.com/apps

and click on the “Add a New App” Button. You will be presented with the following window:

Note: According to the official Facebook API documentation, certain terms like "fb" are not allowed. For example, you may not use our trademarks or brand elements (including FB, Face, Book, Insta, Gram, and Rift) or any confusingly similar terms in your app name if such term is, or could be perceived as, a reference to Facebook or its brands.

Therefore, choose the Display name by considering the note above. After giving the name to your app, click on “Create App ID.”

When you click on the “Create App ID”, you will see the following window:

Choose the “Facebook Login” Product, and click on “Set Up.” The next window that you will see is:

There are various platforms you can choose from the list, but the one in which we are interested is the “Web” platform. Choose “www Web” platform.

Once you select the Web platform, you will be presented with the following:

Choose name Site URL! I am going to test it locally; hence, I shall give it a URL “http://localhost/graphapi”. Now Save that.

JavaScript Code in Sublime Text

Once you save that, write the following JavaScript Code in the HTML page using your favourite Text Editor.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

 

<script>

  window.fbAsyncInit =
function() {

    FB.init({

      appId      : '{your-app-id}',

      cookie     : true,

      xfbml      : true,

      version    : '{latest-api-version}'

    });

      

      

  };

 

  (function(d, s, id){

     var js, fjs = d.getElementsByTagName(s)[0];

     if (d.getElementById(id)) {return;}

     js =  d.createElement(s); js.id = id;

     js.src = "https://connect.facebook.net/en_US/sdk.js";

    
fjs.parentNode.insertBefore(js, fjs);

   }(document, 'script', 'facebook-jssdk'));

</script>

 

</body>

</html>

Two fields that you need to change:

  • Put the App ID in {your-app-id} field
  • Put the latest API version in {latest-api-version} field.

You can get both by going to Setting->Advanced as shown below:

Once you have that, insert both of those fields in your code.

Now to check the result, add the following code snippet inside window.fbAsyncInit = function() block of the above code.

FB.getLoginStatus(function(response) {

   
statusChangeCallback(response);

});

Then create the function “statusChangeCallback” before the tag, as shown below:

function statusChangeCallback(response) {

                if(response.status === “connected”) {
                    console.log(“Authenticated!”);
                }else {
                    console.log(“Not Authenticated!”);
                }

}

If you run the above code using XAMPP, and open inspector of your browser, you would see "Authenticated" or "Not Authenticated" based on your application, Facebook Button logic and permissions.

Adding Auth Facebook Button

You can add Facebook Button for Log-in and its callback, but using the following snippets:

Facebook Button Snippet

<fb:login-button  
    scope="public_profile,email"            
    onlogin="checkLoginState();">  
</fb:login-button>

Facebook Button Callback Snippet

function checkLoginState()  { 
    FB.getLoginStatus(function(response)  { 
        statusChangeCallback(response);  
});
}

Summary

In this article, I have discussed how to use Facebook SDK for JavaScript and also talked about the authentication and log-in code. That’s it for this article!

AUTHOR

READ NEXT

Boostlog is an online community for developers
who want to share ideas and grow each other.

Delete an article

Deleted articles are gone forever. Are you sure?