Enhance Social Logins in web application

We can implement the social Login Integration to the Websites or web application in order to widen the reach of your web applications.

To start with, to integrate Facebook with your web application, we need to register our web application or website with Facebook, and get an application ID(appId), along with a secret key . you can create and retrieve the appId on the App Dashboard ( https://www.facebook.com/developers/)

Here we try to  implement login in a web application using the JavaScript SDK.

This code will load and initialize the JavaScript SDK in your HTML page. Use your appId where indicated.

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
  // This is called with the results from from FB.getLoginStatus().
  function statusChangeCallback(response) {
    console.log('statusChangeCallback');
    console.log(response);
    if (response.status === 'connected') {
         testAPI();
    } else if (response.status === 'not_authorized') {
      document.getElementById('status').innerHTML = 'Please log into this app.';
    } else {
      document.getElementById('status').innerHTML = 'Please log into Facebook.';
    }
  }
  function checkLoginState() {
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
  }
  window.fbAsyncInit = function() {
  FB.init({
    appId      : '{your-app-id}',
    cookie     : true,  // enable cookies to allow the server to access the session
    xfbml      : true,  // parse social plugins on this page
    version    : 'v2.1' // use version 2.1
  });

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

  // Load the SDK asynchronously
  (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 = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

  function testAPI() {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me?fields=id,name,first_name,last_name,birthday,email,gender,link,locale,updated_time,verified,timezone,picture', function(response) {
    console.log('Successful login for: ' + response.name);
    console.log(response.name);
    document.getElementById('status').innerHTML='Thanks for logging in,'+response.name + '!'; 
}); 
} 
</script> 

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button> 
<div id="status"> </div> 
</body> 
</html>

FB.init and FB.event.subscribe initialise the JavaScript SDK, and subscribe to the login event, respectively.

The facebook javascript sdk is “connect.facebook.net/en_US/sdk.js”.

For apps that want to use their own button, we can invoke the Login Dialog with a simple call to FB.login().

FB.login(function(response) {
 checkLoginState();
 }, { scope: 'public_profile,email'
 });

FB.getLoginStatus() is used to get the most recent login state.

We can log people out of your app by attaching the JavaScript SDK function FB.logout

    FB.logout(function(response) {
        // Person is now logged out
    });

The Graph API

The most basic way of accessing information from Facebook is the Graph API. The Open Graph Protocol and the Facebook Graph API are the two heavyweights in Facebook application development.

while trying   https://graph.facebook.com/inapp

This results a JSON response of the basic information of the facebook  user:-

{

   "id": "100001163432838",
   "first_name": "InApp",
   "gender": "male",
   "last_name": "India",
   "link": "https://www.facebook.com/inapp",
   "locale": "en_US",
   "name": "InApp India",
   "username": "inapp"
}
Today, the best Social Login APIs offer businesses the benefit of choosing from a huge list of social networks for social sign on.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>