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

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

Unknown 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

Unknown 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

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

Unknown 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

Unknown 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 Sahoo said...

nice presentation of this post.....

Anonymous said...

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

Unknown said...

i need same code,to login into gmail and yahoo

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

Unknown 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

Anonymous said...

Hi suresh,

How to post wall without open dialog?

Any idea about that?

Kiran Pol said...

Hello,

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

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

Unknown said...
This comment has been removed by the author.
Unknown 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.

Unknown 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

Unknown 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

Unknown said...

sir i am waiting for ur reply

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

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

Unknown 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

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

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

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

Anonymous 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

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

AppianBasics 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

Mossad@1962 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

Unknown 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

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

Unknown said...

thanks a lot... it worked... just wanted to know the code that facebook developers link is providing, is it the same as that one?

poker online 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

Unknown said...

sir i need to ask u one thing is there any way in your example we can authenticate user at page load in cs file so i can redirect user after success login to another page

Anonymous said...

Suresh sir,

First time when i implemented this , my site was running fine.

But knw don't knw why it is not working
poblem is 'Login with Facebook' botton is not working

Prev it was showing as button , now showing as only text
I cn't click on this link

Please help me , and if possible pls attach demo file

Unknown said...

Suresh sir,

First time when i implemented this , my site was running fine.

But knw don't knw why it is not working
poblem is 'Login with Facebook' botton is not working

Prev it was showing as button , now showing as only text
I cn't click on this link

Please help me , and if possible pls attach demo file

Anonymous said...

How to get a Comment and like of post which post above way?

Unknown said...
This comment has been removed by the author.
Unknown said...

thanks

Unknown said...

Thank you for your article! It's very helpful for me.

Kashyap said...

just great :)

Unknown said...

Hello suresh i am not able to detting that button while running it is hiding can u please help me how can i visible to that button

Unknown said...

Sub/ question : I want develop a "blog kind of web application" (where admin post question and user can write answer as blog/comment) and that can be integrate in Facebook but developed using c#

Hi, I just need little help and guidance in the subject. I have worked on 3 tier website reservation management system using ASP.NET C# and used AJAX too. I know html and can understand and edit css.and I know how to create web service and use it. In short comfortable working using Dot Net and said technology. But presently i'm trying to see and develop a "blog kind of web application" (where admin post question and user can write answer as blog/comment) and that can be integrate in Facebook but developed using c#. I have found article using php and yahoo query but i have not work on these and also i want full control on back end like sql server. Because it will be easier and will work with client website as it was created in asp.net. Please help me with this i need to find out and start working at earliest.

Thanks

Farah

Anonymous said...

Hello Suresh
I want to zoom an image like
link http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm
in any page not master page and ID of image and path is from database

Anonymous said...

hi suresh,

This facebook login is not support IE bowser other bowsers in working fine..it not showing facebook login button also.
please help me as soon as possible

thanks in advance

Anonymous said...

hi suresh,

This facebook login is not support IE bowser other bowsers in working fine.After login not displaying the name. it showing like as below

Facebook Login Authentication Example

Hi, (logout)

please help me as soon as possible

thanks in advance

Unknown said...

hello suresh.followed the steps as you said..it only works for my appid
if i try to login with other facebook userid .it dont work.throws error.
"App Not Setup: This app is still in development mode, and you don't have access to it. Switch to a registered test user or ask an app admin for permissions"
how can we allow all users to authenticate ?

Anonymous said...

Hello, I wonder as assigned to the user facebook, in user de membership.

Unknown said...

Hello suresh,how to get user access token facebook graph api please help me as soon as possible
Thanks

Saddam Mohd said...

hii sir i have one problem when clik login button then show one popup in this error

Given URL is not whitelisted in Client OAuth Settings: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings. Make sure Client and Web OAuth Login are on and add all your app domains as Valid OAuth Redirect URIs.

Anonymous said...

will you give me css of above code? "Login with Facebook" this is not clickable..
please reply

Anonymous said...

very helpful for study

Anonymous said...

good article suresh

Anonymous said...

good

Unknown said...

Hi Suresh,
Very helpful.
I need to post Link , Photo , title and Message on FaceBook Page using C#

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.