Login With Facebook Using javascript SDK Example

Hello

Here Example of Facebook Login With Javascript SDK
the login flow step-by-step and explain each step clearly - this will help you if you are trying to integrate Facebook Login into an existing login system, or just to integrate it with any server-side code you're running. But before we do that, it's worth showing how little code is required to implement login in a web application using the JavaScript SDK.

Create Login.php File

Code For Login.php

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
function facebook_login (){
    if(typeof(FB) == "undefined") {
        alert("Facebook SDK not yet loaded please wait.")
      }
    FB.getLoginStatus(function(response) {
      if (response.status === 'connected') {
        console.log('Logged in.');
        basicAPIRequest();

      }
      else {
       FB.login(function(response) {
 
      if (response.status === 'connected') {
        console.log('Logged in.');
        basicAPIRequest();
  }
 
}, {scope: 'email,user_birthday,user_location,public_profile,publish_actions'});

      }
    });    
}

  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      xfbml      : true,
   status     : true, // check login status
      version    : 'v2.0'
    });

FB.Event.subscribe('auth.login', function () {
         basicAPIRequest()
      });

  };

 
  

  
  
   (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 basicAPIRequest() {
    FB.api('/me',
        {fields: "id,about,age_range,picture,bio,birthday,context,email,first_name,gender,hometown,link,location,middle_name,name,timezone,website,work"},
        function(response) {
         console.log('API response', response);
         /*  $("#fb-profile-picture").append('<img src="' + response.picture.data.url + '"> ');
          $("#name").append(response.name);
          $("#user-id").append(response.id);
          $("#work").append(response.gender);
          $("#birthday").append(response.birthday);
          $("#education").append(response.hometown);
  $("#email").append(response.email);*/
 

 
  $.ajax({
  url: "facebook_login_query.php",
  data: {
  email:response.email,
  birthday : response.birthday,
  gender : response.gender
  },
  success: function( response ) {
alert(response);
window.location.href = "http://localhost/home.php";
return false;
 
  }
 

});
 
        }
    );
  }



</script>
<!--<div  class="fb-login-button" data-scope="email,user_birthday,user_hometown,user_location,user_website,user_work_history,user_about_me
" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="true"  >
</div>
</div> -->


<button id='load' onClick="facebook_login();">Load data</button>
</html>

Create facebook_login_query.php

<?php
include('connect.php');
session_start();


 echo $uname = $_GET['email'];


if(!is_null){
echo $newbirthday = $_GET['birthday'];
echo $birthday = date("Y-m-d", strtotime($newbirthday));

}else{
$birthday= '';
}
echo $gender = strtolower($_GET['gender']);



   $select="select * from mstuser where username='$uname' and facebook_login='1' and  isActive = '1' AND isDelete = '0'";
$result=mysql_query($select);

  $total_result = mysql_num_rows($result);
if($total_result == 1){

$row = mysql_fetch_assoc($result);
  $_SESSION['vid']=$row['id'];
$_SESSION['username'] = $row['username'];
  $roleid = $row['roleid'];
$count=mysql_num_rows($result);


}else{
echo "insert into mstuser set username='$uname',facebook_login='1',isActive = '1',isDelete = '0' ";
  $insert_mstuser = mysql_query("insert into mstuser set username='$uname',facebook_login='1',isActive = '1',isDelete = '0' ");



  $select="select * from mstuser where username='$uname' and facebook_login='1' and  isActive = '1' AND isDelete = '0'";
$result=mysql_query($select);
$row = mysql_fetch_assoc($result);
  $_SESSION['vid']=$row['id'];
  $roleid = $row['roleid'];
$_SESSION['username'] = $row['username'];
$count=mysql_num_rows($result);



}
?>

Create Home.php

echo "Welcome user";