Tutorial Online: Simple Login and Sign Up using Facebook Javascript SDK

Friday, January 16, 2015

Simple Login and Sign Up using Facebook Javascript SDK

Filling Sign Up and Login form were part of every web application nowadays. Users feel it hard to fill the sign up form again with same information. With Facebook API you can easily collect the basic user information needed for sign up.

This is the simplest working example for facebook based sign up.

This tutorial uses Facebook Javascript SDK v2.2

Demo| Download

Needables

Facebook SDK
Facebook Application ID

You can create your application for free from here https://developers.facebook.com/apps

App ID (Application ID) can be obtained from the facebook application page, as show in above screenshot.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

Signup Html Form

      <form class="form-signin" role="form">
            <div id="status"></div>
        <h2 class="form-signin-heading">User Registration</h2>
        
        <label for="inputFname" class="sr-only">First Name</label>
            <input type="text" id="inputFname" class="form-control" placeholder="First Name" required autofocus>
        
        <label for="inputLname" class="sr-only">First Name</label>
            <input type="text" id="inputLname" class="form-control" placeholder="Last Name" required >
            
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required >
        
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>
        
        <button class="btn btn-sm btn-primary btn-block" type="submit">Sign Up</button> <button class="btn btn-sm btn-primary btn-block" onclick="_login();" type="submit">Sign Up using Facebook</button>
      </form>

Javascript

    <script>
  // Load the SDK asynchronously
  (function(thisdocument, scriptelement, id) {
    var js, fjs = thisdocument.getElementsByTagName(scriptelement)[0];
    if (thisdocument.getElementById(id)) return;
    
    js = thisdocument.createElement(scriptelement); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js"; //you can use 
    fjs.parentNode.insertBefore(js, fjs);
  }(document, script, facebook-jssdk));
    
  window.fbAsyncInit = function() {
  FB.init({
    appId      : 1449392918617564, //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
  });

  // These three cases are handled in the callback function.
  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });

  };
    
  // This is called with the results from from FB.getLoginStatus().
  function statusChangeCallback(response) {
    if (response.status === connected) {
      // Logged into your app and Facebook.
      _i();
    } else if (response.status === not_authorized) {
      // The person is logged into Facebook, but not your app.
      document.getElementById(status).innerHTML = Please log  +
        into this app.;
    }
  }  
  
  function _login() {
    FB.login(function(response) {
       // handle the response
       if(response.status===connected) {
        _i();
       }
     }, {scope: public_profile,email});
 }
 
 function _i(){
     FB.api(/me, function(response) {
        document.getElementById("inputFname").value = response.first_name;
        document.getElementById("inputLname").value = response.last_name;
        document.getElementById("inputEmail").value = response.email;
    });
 }

</script>

Tutorial Online