Showing posts with label Facebook Login With Javascript SDK. Show all posts
Showing posts with label Facebook Login With Javascript SDK. Show all posts

Monday, 16 November 2015

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";