Tuesday 22 October 2013

Facebook login using javascript SDK

 FACEBOOK Login Example

index.html  /// 




<html><body>








<div id="fb-root"></div>








<script>







  window.fbAsyncInit = function() {







  FB.init({







      appId: '490986011016528', // App ID







      channelUrl: 'http://localhost:8000/', // Channel File







      status: true, // check login status







      cookie: true, // enable cookies to allow the server to access the session







      xfbml: true  // parse XFBML







  });







        








 FB.Event.subscribe('auth.authResponseChange', function(response) 







 {








   if (response.status === 'connected') 



   {




    document.getElementById("message").innerHTML +=  "<br>Connected to Facebook";



    //SUCCESS




        }  







 else if (response.status === 'not_authorized') 



   {




     document.getElementById("message").innerHTML +=  "<br>Failed to Connect";



     //FAILED




        } 

else 



  {   document.getElementById("message").innerHTML +=  "<br>Logged Out";




       //UNKNOWN ERROR







      }








 }); 
















    };







    








    function Login(){
















  FB.login(function(response) {








     if (response.authResponse) 



  {




       getUserInfo();







      }

 else 



  {




         console.log('User cancelled login or did not fully authorize.');







      }







   },

   {scope: 'email,user_photos,user_videos'});







 }







  function getUserInfo() {







     FB.api('/me', function(response) {







   var str="<b>Name</b> : "+response.name+"<br>";







      str +="<b>Link: </b>"+response.link+"<br>";







      str +="<b>Username:</b> "+response.username+"<br>";







      str +="<b>id: </b>"+response.id+"<br>";







      str +="<b>Email:</b> "+response.email+"<br>";







      str +="<input type='button' value='Get Photo' onclick='getPhoto();'/>";







      str +="<input type='button' value='Logout' onclick='Logout();'/>";







      document.getElementById("status").innerHTML=str;          







    });







    }







 function getPhoto()



{




   FB.api('/me/picture?type=normal', function(response) {







    var str="<br/><b>Pic</b> : <img src='"+response.data.url+"'/>";







      document.getElementById("status").innerHTML+=str;







    });







 }







 function Logout()



{




  FB.logout(function(){document.location.reload();});







 }







  // Load the SDK asynchronously







  (function(d){







     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];







     if (d.getElementById(id)) {return;}







     js = d.createElement('script'); js.id = id; js.async = true;







     js.src = "//connect.facebook.net/en_US/all.js";







     ref.parentNode.insertBefore(js, ref);







   }(document));







</script>








<div align="center">








<h2>Facebook OAuth Javascript Demo</h2>








<div id="status">








 Click on Below Image to start the demo: <br/>








<img src="http://hayageek.com/examples/oauth/facebook/oauth-javascript/LoginWithFacebook.png" style="cursor:pointer;" onclick="Login()"/>








</div>








<br/><br/><br/><br/><br/>








<div id="message">








Logs:<br/>








</div>








</div>








</body>








</html>




 
channel.html  /// 
 
<script src="//connect.facebook.net/en_US/all.js"></script>

 


Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)