Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Asp.net Refresh page after facebook login/logout or fb.login/logout examples

Apr 22, 2012
Introduction: 

In this article how to refresh webpage after facebook login or logout in asp.net or examples of FB.login(), FB.logout() options in asp.net.
Description:
  
In previous post I explained
how to integrate facebook login to asp.net website and get user details from facebook in asp.net. During working with these concepts I got problem to refresh webpage after facebook login or logout to get updated details of user.

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’;
});
To implement this one first create app in facebook  and write the below code in your aspx page


<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



If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

8 comments :

Help said...

Greate example,
But in my form after login my page can't showing logout option

Sankar Ramamurthy said...

nice.
Bute after login my page not showing logout option and user details.
Anwser Plz ?

Anonymous said...

nice Artical

ROCKER said...

showing error window...

ROCKER said...

if i use this code to connect my asp.net application .it shows error window.. pls check your code ...

Suma said...

Hi Nice post but after login to FB it not shows LogOut option

please give me reply............

Anonymous said...

In my application after login face book it can't shoe the user details

blr said...

can we use customized image in place of the default fb login image ?

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.