In facebook we have two functions FB.Login() and FB.logout()
FB.Login():
This function is used to allow users login with facebook account and this function will refresh our webpage after login with facebook account then we have a chance to display updated user details in our webpage.
FB.Logout():
This function is used to logout the current user session from facebook but it won’t refresh the page because of that we don’t have a chance to show updated userdetails on webpage.
To solve this problem we need to write FB.Logout function like this
FB.logout(function() {
window.location.reload();
});
|
Or
FB.logout(function() {
window.location=’path/url here’;
});
|
<html>
<head>
<title>Facebook Login Authentication Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script>
// 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));
// Init the SDK upon load
window.fbAsyncInit = function() {
FB.init({
appId: '198191300293654', // App ID
channelUrl: '//' + window.location.hostname + '/channel', // Path to your Channel File
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
// listen for and handle auth.statusChange events
FB.Event.subscribe('auth.statusChange', function(response) {
if (response.authResponse) {
// user has auth'd your app and is logged into Facebook
FB.api('/me', function(me) {
if (me.name) {
document.getElementById('auth-displayname').innerHTML = me.name;
}
})
document.getElementById('auth-loggedout').style.display = 'none';
document.getElementById('auth-loggedin').style.display = 'block';
} else {
// user has not auth'd your app, or is not logged into Facebook
document.getElementById('auth-loggedout').style.display = 'block';
document.getElementById('auth-loggedin').style.display = 'none';
}
});
$("#auth-loginlink").click(function() { FB.login(); });
$("#auth-logoutlink").click(function() { FB.logout(function() { window.location.reload(); }); });
}
</script>
<h1>
Facebook Login Authentication Example</h1>
<div id="auth-status">
<div id="auth-loggedout">
<a href="#" id="auth-loginlink"> <img src="fb-login-button.png" style=" border:0px"/></a>
</div>
<div id="auth-loggedin" style="display: none">
Hi, <span id="auth-displayname"></span>(<a href="#" id="auth-logoutlink">logout</a>)
</div>
</div>
</body>
</html>
|
If you observe above code I written
$("#auth-loginlink").click(function() { FB.login(); });
$("#auth-logoutlink").click(function() { FB.logout(function() { window.location.reload(); });
|
I am using FB.login and FB.logout functions in click events to handle signin and signout options for our application.
Now run your application and check the output that would be like this
Demo
 |
No comments:
Post a Comment