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>