How to Implement Facebook Login API in Web Applications

Configure Your Facebook App

• Before implementing the Facebook Login in your web application, ensure your application is correctly configured in the Facebook Developer Portal. You need the App ID and App Secret for your app, which is essential for authentication.

 

• In your app settings, make sure to add the correct OAuth redirect URI. This URI is where Facebook will redirect users after they have logged in.

Include the Facebook SDK for JavaScript

• Add the Facebook JavaScript SDK to your web application. This SDK facilitates interactions with Facebook services, including login authentication.

 

• Place the following script tag in the head or just before the closing body tag of your HTML:

  <script async defer crossorigin="anonymous" 
    src="https://connect.facebook.net/en_US/sdk.js"></script>
  

 

Initialize the Facebook SDK

• After the SDK is loaded, you need to initialize it with your app details. Make sure this initialization code runs after the SDK loads.

 

• The following code initializes the SDK:

  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : 'your-app-id',
        cookie     : true,
        xfbml      : true,
        version    : 'v16.0'
      });
      
      FB.AppEvents.logPageView();   
    };
  </script>
  

  Replace 'your-app-id' with your real Facebook App ID.

 

Add a Login Button

• Create a login button on your page. This button will trigger Facebook's login process.

 

• Here’s a simple button element:

  <button onclick="checkLoginState();">Login with Facebook</button>
  

 

Define Login Status Check

• Define a JavaScript function to handle the login state once the user clicks the login button:

 

• <script>
    function checkLoginState() {
      FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
      });
    }
  
    function statusChangeCallback(response) {
      if (response.status === 'connected') {
        // Logged into your app and Facebook.
        console.log('Welcome! Fetching your information.... ');
        FB.api('/me', function(response) {
          console.log('Successful login for: ' + response.name);
          document.getElementById('status').innerHTML =
            'Thanks for logging in, ' + response.name + '!';
        });
      } else {
        // The person is not logged into your app or Facebook.
        document.getElementById('status').innerHTML = 'Please log into this app.';
      }
    }
  </script>
  

 

Handle Authentication Response

• After a user logs in, you might want to authenticate the session on your server. Send the response.authResponse property, which contains the access token, to your server for further validation and to create a session.

 

• Securely send this token to your backend using AJAX or any other method suitable for your stack.

Logout Functionality

• Add functionality for users to log out, both from your application and Facebook if desired. You can accomplish this with the following function:

 

• <script>
    function logout() {
      FB.logout(function(response) {
        // User logged out
        document.getElementById('status').innerHTML = 'You have logged out.';
      });
    }
  </script>
  
  <button onclick="logout();">Logout</button>
  

Additional Security Considerations

• Always ensure secure communication by deploying your web application over HTTPS.

 

• Verify the Facebook access token on the server-side to avoid client-side spoofing and unauthorized access.