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 integrate Facebook login authentication to website

Apr 21, 2012
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.

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 RSS subscribe by email Subscribe by Email

109 comments :

Anonymous said...

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

Suresh Dasari said...

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....

Anonymous said...

U Alwayzz Rockzz Man Wid U'r new Tutorials..

Anonymous said...

Thanks you!!!

Anonymous said...

how to get user information from our fb acc on our aaplication

Anonymous said...

Really Nice Efoorts By U Dude.
I appreiciate u.

Anonymous said...

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.

Akhil Dave said...

Great post,,,,,,well presented

http://techterabyte.blogspot.in

Imtiaz said...

following your code I have made many asp.net sites virtualshoppingmall.com.pk and some are others which is password secured thanks suresh

Asif Qureshi said...

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

Anonymous said...

hello suresh,
plz attach sample

thx in advance

Karthik Keyan said...

Hi suresh,

How to get this user name in asp.net pageload.

Thanks in advance

Anonymous said...

good

Anonymous said...

Logout button and user details are not showing.

Karthi keyan said...

Hi this code not working in IE

Anonymous said...

How to get this user name and email in asp.net pageload.

Sujith said...

Hi Suresh, Is it possible to use this method in Masterpage?

Anonymous said...

great tutorial. So helpful.

xyz said...

means my website is still not launch ...so without it can i do this?

Anonymous said...

How to save the name, gender, birthday and email into sql database

Omprakash said...

Nice articles suresh will be useful and bost up for the .Net developers

Regards,
Omprakash.S

tejas bhatt said...

how to redirect to user homepage after login ??

Anonymous said...

nice post

how set if user loged show page else redirect on home?

tnx

sushanta kumar said...

nice presentation of this post.....

Anonymous said...

in ur site u implement facebook tab on right side
how to do it?

tg techgarner said...

i need same code,to login into gmail and yahoo

Anonymous said...

nice article

Anonymous said...

can u plz tell me how to do without using FBML using C# ??

Anonymous said...

good job bro carry on.....

Anonymous said...

in between your code alert dialog not working and also window.location not working

Anonymous said...

Great WORK...happy Coding :)

Anonymous said...

how can i get my application to redirect to another page upon a successful login?
thnx in advance!!

Anonymous said...

very nice.....

Anonymous said...

Thank you...

Satyendra Kumar said...

please provide sample code in attachment,that get user information from fb..
and redirect to my page ...
thankx in advance

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...

advŠµrtising

my pagŠµ - white bathroom Vanities 36 inch

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...

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

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...

hello suresh, i tried your code and login works fine but i can't see logout option.
Can u help?

Anonymous said...

suresh sir u r realy great...........

Anonymous said...

its not working IE8. Error like closed is null or not an object.then,object does not not support this property or methods

Akhilesh Tripathi said...

Hi suresh,

How to post wall without open dialog?

Any idea about that?

kiran said...

thanks

kiran said...

Hello,

In My application,there is Login page for user.
So, How to open that by using same Facebook Loging.

Ashwini Bachanpalliwar said...

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?

Karthikeyan said...

Hello;

In My application,there is Login page for user.
So, How to open that by using same Facebook Loging.

Naveen Naghel said...

Beautiful post .

Elliptical Waveguide said...

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.

sunny tiwari said...
This comment has been removed by the author.
sunny tiwari said...

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.

Mudit Dubey said...

user details are not showing.

Jangu Phelix said...

Suresh you are a hero. God bless you.

Anonymous said...

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.

Darshan Kshirasagar said...

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

Ds software said...

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

athiq athiq said...

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

athiq athiq said...

sir i am waiting for ur reply

mynameeesram said...

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

Anonymous said...

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.

avnish kumar singh said...

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.)

athiq athiq said...

sir i a have website ....i have integrated fb login ...www.xoxotees.com but the problem is that even if i login in fb still my website is asking for user and password ....can u tell how do i intergrate fb login details in my database ....so that fb details is enough to login in my website

Nigam Patta said...

Hello Boss i am Getting this Exception From facebook,i tried a lot with different Domains But still i am getting the Same Please check that out and Suggest me

(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.)

santosh panda said...

HI, my issue I can get information From Profile where I have created APP in facebook , when I am trying login using different account I am unable to get the user information

I am using Local Host, I have not hosted the application.

Bhavya Jain said...

Hi Sir, This article is very nice. But I want to change facebook login button. So how to change facebook login button with my custom image.

Sneha Dohale said...

What is channel url?

Lovely Singla said...

sir, how get fbuid, first name and last name in asp.net c#

Anonymous said...

nice article but how to insert this into database can ne one help me this please

Raj Kumar said...

Dear suresh sir,
nice article. But i need to display a confirmation dialog box where it asks "...will receive the following info: your public profile, friend list and email address." how to do it?

Anonymous said...

Really amazing work that is working exactly....!
Thank you very much.....

Anonymous said...

Thankss buddy..it helps me so much..

Siva Krishna said...

Hi suresh,how to set schedule for facebook to post the wall?

Sairam said...

It is not working with other facebook accounts, its working for only the account from which app has been created.

Anonymous said...

nice article

someswara rao Pilla said...

nice article

Kishor Karpe said...

thanks..! it works well but i want user info such as personal information ,education etc.
Please guide me how to get it .

Anonymous said...

what shall i do if at all i want to redirect to my homepage just after the user do the login with facebook

pran jee said...

Hi suresh sir , i am new user ...want to convey that i have created facebook integration as u suggested but when I used it on my web server it shows login page and then Hi message and logout , but not facebook home page like yours ... Please help me .my id is 3011jee@gmail.com
Thanks

joydeep dutta said...

Hey bro,can you tell me why this message "Please use your Personal Account" like this type of message coming after submitting the captcha???I can't create the app.Pls tell me.This is my own account .Though its coming.Pls help me bro.
I got a case id while reporting my problem.But still I didnt get any feedback 4m them.Pls bro how to solve this problem.

Give your Valuable Comments

Other Related Posts

© 2010-2012 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.