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
|
|||
130 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
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?
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.)
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
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.)
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.
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.
What is channel url?
sir, how get fbuid, first name and last name in asp.net c#
nice article but how to insert this into database can ne one help me this please
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?
Really amazing work that is working exactly....!
Thank you very much.....
Thankss buddy..it helps me so much..
Hi suresh,how to set schedule for facebook to post the wall?
It is not working with other facebook accounts, its working for only the account from which app has been created.
nice article
thanks..! it works well but i want user info such as personal information ,education etc.
Please guide me how to get it .
what shall i do if at all i want to redirect to my homepage just after the user do the login with facebook
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
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.
thanks a lot... it worked... just wanted to know the code that facebook developers link is providing, is it the same as that one?
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 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
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
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
How to get a Comment and like of post which post above way?
thanks
Thank you for your article! It's very helpful for me.
just great :)
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
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
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
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
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
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 ?
Hello, I wonder as assigned to the user facebook, in user de membership.
Hello suresh,how to get user access token facebook graph api please help me as soon as possible
Thanks
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.
will you give me css of above code? "Login with Facebook" this is not clickable..
please reply
very helpful for study
good article suresh
good
Hi Suresh,
Very helpful.
I need to post Link , Photo , title and Message on FaceBook Page using C#
Note: Only a member of this blog may post a comment.