Introduction:
Here I will explain how to add facebook login website in asp.net or integrate facebook login button to website in asp.net and how to create application in facebook.
Description:
In previous post I explained many articles relating to Asp.net, JQuery, and SQLServer etc. Now I will explain how to allow users to login with facebook accounts in website using asp.net.
Here I will explain how to add facebook login website in asp.net or integrate facebook login button to website in asp.net and how to create application in facebook.
Description:
In previous post I explained many articles relating to Asp.net, JQuery, and SQLServer etc. Now I will explain how to allow users to login with facebook accounts in website using asp.net.
Before implement facebook login
authentication we need to create the facebook application for that open this
link http://developers.facebook.com/setup/ once open that will
display window like this
|
In this enter Application Name and
click Continue here App Namespace and web hosting both are optional. After enter
details and click Continue to display Security Check required screen like this
 |
Enter security text and click submit
button once we click it will create application in facebook that would be like
this
 |
Once our app created on facebook that
will be like as shown above image now we can change logo of our app and icon of
our application. After that we need to add Site URL, Canvas URL that would be
the url of your site (Ex: http://aspdotnet-suresh.com) which
site you are going to integrated login button. Actually facebook has stopped
support for localhost
sites (ex: http://localhost/Default.aspx) because of that we need to give hosted domain site url.
If you
want to test this with your local application no worries check this post how host website in IIS with custom URL
After we made all the changes that
would be like this
 |
Once you entered all the details click save changes button. Now create new
application using visual studio and write following code 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-logoutlink").click(function() { FB.logout(function()
{ window.location.reload(); }); });
}
</script>
<h1>
Facebook Login Authentication Example</h1>
<div id="auth-status">
<div id="auth-loggedout">
<div class="fb-login-button"
autologoutlink="true"
scope="email,user_checkins">Login
with Facebook</div>
</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 header section I added
one script file that is used to handle click function using JQuery and in body I
written another script in that
FB.init: This function is used to set authentication
statuses.
FB.api: This function is used to get authenticated user
details.
In above code you need to make small
modification that is need to give your appId in FB.init function (appId: ‘YOUR
APP ID’).
(Note:
Script function should be under <body> tag only)
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 Email
|
|||
|
|
|
91 comments :
hey dude u r post are superb but u wont attach samples thats the only problems. please try to attach samples with every post. bcoz in code u will add some .js files we have no idea what u wrote in that. so attach sample if possible
dude i will attach the sample for the posts whenever required you can check it in other posts. Actually here no need of attach sample code that's why i didn't attached it. Regarding.js files in above code you just open url i mentioned in script you will see what is there in js file. Anyway i will attach the sample....
U Alwayzz Rockzz Man Wid U'r new Tutorials..
Thanks you!!!
how to get user information from our fb acc on our aaplication
Really Nice Efoorts By U Dude.
I appreiciate u.
Hi suresh,
Can you develop and give me a simple facebook app using .net and integrate with that with facebook fanpage.My page is getting reloading many times.
Great post,,,,,,well presented
http://techterabyte.blogspot.in
following your code I have made many asp.net sites virtualshoppingmall.com.pk and some are others which is password secured thanks suresh
Hi suresh ,
I have an question ...
i am unable put this code ..
that is in body section..below script.
will u please help me it's very urgent .
by above code i am unable to get Design that is in your demo
and which URL i put in connect to facebook button ?
please help me as soon as possible
thanks in advance
Asif Qureshi
hello suresh,
plz attach sample
thx in advance
Hi suresh,
How to get this user name in asp.net pageload.
Thanks in advance
good
Logout button and user details are not showing.
Hi this code not working in IE
How to get this user name and email in asp.net pageload.
Hi Suresh, Is it possible to use this method in Masterpage?
great tutorial. So helpful.
means my website is still not launch ...so without it can i do this?
How to save the name, gender, birthday and email into sql database
Nice articles suresh will be useful and bost up for the .Net developers
Regards,
Omprakash.S
how to redirect to user homepage after login ??
nice post
how set if user loged show page else redirect on home?
tnx
nice presentation of this post.....
in ur site u implement facebook tab on right side
how to do it?
i need same code,to login into gmail and yahoo
nice article
can u plz tell me how to do without using FBML using C# ??
good job bro carry on.....
in between your code alert dialog not working and also window.location not working
Great WORK...happy Coding :)
how can i get my application to redirect to another page upon a successful login?
thnx in advance!!
very nice.....
Thank you...
please provide sample code in attachment,that get user information from fb..
and redirect to my page ...
thankx in advance
advеrtising
my pagе - white bathroom Vanities 36 inch
I constantly spent my half an hour to read this weblog's articles or reviews daily along with a mug of coffee.
Feel free to surf to my site :: top online us casino
hello suresh, i tried your code and login works fine but i can't see logout option.
Can u help?
suresh sir u r realy great...........
its not working IE8. Error like closed is null or not an object.then,object does not not support this property or methods
Hi suresh,
How to post wall without open dialog?
Any idea about that?
thanks
Hello,
In My application,there is Login page for user.
So, How to open that by using same Facebook Loging.
Hello suresh,
The code is amazing. Thanks
Now if I want to update or write status from my website then how we will do this?
Hello;
In My application,there is Login page for user.
So, How to open that by using same Facebook Loging.
Beautiful post .
This is my first time i visit here. I found so many entertaining stuff in your blog, especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! Keep up the good work.
hi suresh
i have been using this example,
but the problem i am facing is that only i am being able to login and and fetch user details.
for other users its shows the error.
user details are not showing.
Suresh you are a hero. God bless you.
Hi Sir, This article is very nice. Can you please post an article for integration of gmail authentication to a website, to check the login using gmail username & password. Thank You.
Hi Suresh Sir
I'm Darshan i want develop app like status of facebook and if any one post text or image other can comment on thet post how can i do plz tell me sir..
darshan.dek@gmail.com
Hello,
i am using a membership in asp.net website
now i am also want to add facebook login
but my site all thing like saleing and other details manage by UserID of membership
when i lgin from facebook then i how all thing manage i am not getting plz give me any idea how i manage membership with facebook login
thanks
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains
sir this error always come help me out
sir i am waiting for ur reply
This is kind of old post but good info , new javascript api is out and it's simple too , visit Facebook and read documentation with out hesitation
You will every possible solution for all problem there , and @ athiqathiq
just check your app domain url that you configured in App , facebook is unable to redirect to your url , give a url that can be accessed from out side of lan or configure to localhost
Getting the following error while login using the facebook login button:
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
Please let me know what could be the issue. I am using application hosted on my IIS with custom URL.
sir i am using that code and application be run but also given error
configure to web.config
what we configure can you tell me.
and my given error is:
(Given URL is not allowed by the Application configuration.:
One or more of the given URLs is not allowed by the App's settings.
It must match the Website URL or Canvas URL, or the domain must be a
subdomain of one of the App's domains.)