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 get facebook logged in user details(Username,email,profile image)

Apr 22, 2012
Introduction:

In this article I will explain how to access or get Username, email, profile image of facebook logged in user using asp.net.
Description:
  
In previous post I explained
how to integrate facebook login to asp.net website. In that I explained clearly how to create app in facebook and integrate facebook login in website. After create and integrate facebook login I got requirement like get facebook logged in user details those are name, email, profile image etc.

To implement this one first create app and integrate facebook login in website based on previous post. Once set up is completed check your aspx page and observe script in your page in that we have function

FB.api('/me', function(me) {
if (me.name) {
document.getElementById('auth-displayname').innerHTML = me.name;
}
})
FB.api function is used to get basic details (Name, profile image, gender, user id, friends list, any information we shared publically) of logged in user from facebook.

If you need access to more information, such as the user's email address, etc. you must request permissions for this information. For that we need to add permission to scope attribute of the Login Button and our FB.api function will be like this

var uid = "http://graph.facebook.com/" + response.authResponse.userID + "/picture";
FB.api('/me', function(me) {
document.getElementById('auth-displayname').innerHTML = me.name;
document.getElementById('Email').innerHTML = me.email;
document.getElementById('profileImg').src = uid;
})
By using above method we can get name, email, profile image for that Our scope attribute of login button will be like this

<div class="fb-login-button" autologoutlink="true" scope="email,user_checkins">Login with Facebook</div>
</div>
Here I am getting only user email address if you want more information then you need to get permission for other objects for that check this link scope permission reference.

After make all our code modifications that would be like this


<html>
<head>
<title>Facebook Get Logged in User Details UserName,Email,Profile Image</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
var uid = "http://graph.facebook.com/" + response.authResponse.userID + "/picture";
FB.api('/me', function(me) {
document.getElementById('auth-displayname').innerHTML = me.name;
document.getElementById('Email').innerHTML = me.email;
document.getElementById('profileImg').src = uid;
})
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">
Name: <b><span id="auth-displayname"></span></b>(<a href="#" id="auth-logoutlink">logout</a>)<br />
Email: <b><span id="Email"></span></b><br />
Profile Image: <img id="profileImg" />
</div>
</div>
</body>
</html>
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

57 comments :

Anonymous said...

This is really good, thanks helped me lot.

can we put user information in my site data base, to access other login protected pages from my site.

Mahesh said...

This is really a nice article.
How can we get user information like mobile or phone number and some other basic information of the user?

Please help me! I required this in my application..

Suresh Dasari said...

@Mahesh
if you observe above post i explained clearly if you want to get more objects from facebook use this link
https://developers.facebook.com/docs/authentication/permissions/

Pat Patterson said...

Your first version with log in/ log out reloading worked great right away. But this version doesn't work at all for me. The div class="fb-login-button" autologoutlink="true" scope="email,user_checkins" throws warnings as autologoutlink is not a property of a div. And it doesn't work because it's not a clickable element. What's missing?

Suresh Dasari said...

@Pat Patterson...
autologoutlink is not a property of a div it is id of hyper link. Please check the code and implement in your application. For your information it's latest code which is working perfectly.

RAJESH said...

hi suresh can you pls tell how to import contacts from facebook

Ved Prakash said...

Really supeb post, i had wasted alot of my time here and there and nothing exactly worked. I got the post at 9 page of google result which just worked magically by simply changing the app_id and no alot of efforts. Once thanks alot.....

Parveen Rathi said...

Its working fine for me, but I want to get date of birth and city of user. So please tell me how it is possible

Amit sarwara said...

hello thanks this is really nice tutorial....
i just want to ask
how could we get larger image from Facebook Profile of the user...

rajesh said...

hi

this method working good for my website,and also not working for (internet explorer-7) plz help me...

rajesh kumar said...

hi,

this is really good one,small help for me this concept not displayed(user details) in (IE-7). please tell an solutions for me...

Thanks,
rajesh kumar.n

Ajay said...

This is really good, thanks helped me lot.
i want take emailid in text box,if it is possible then please help me

Anonymous said...

Sir how to logout on othe page after Login on login pgae

Mayank Sharma said...

Sir how Asp.net get Twitter logged in user details(Username,email,profile image) Plz Plz Plz Plz Plz Plz Tell me

Suresh Dasari said...

@Mayank Sharma...
Check this article tog et twitter loggied in user details
http://www.aspdotnet-suresh.com/2012/05/add-twitter-login-authentication-to.html

Mayank Sharma said...

FB.api('/me', function (me) {

document.getElementById('Email').innerHTML = me.email;
document.getElementById('auth-displayname').innerHTML = me.first_name;
document.getElementById('last-name').innerHTML = me.last_name;
document.getElementById('ID').innerHTML = me.id;
document.getElementById('profileImg').src = uid;
window.location = 'Home.aspx';
});


sir in this Code i redirect to Home Pge and here i want to be logout button.if i click it then i want to be redirect to login page.

Plz suggest me as soon as possible.. Thnx

Mayank Sharma said...

Sir how can i Post the status from my ASP project to the Facebook and after post how it will redirect to my Project..
Thnx

Anurag Soni said...
This comment has been removed by the author.
Anurag Soni said...

Sir how can i save fb detail in database. when i click on button click event in we get a null value, means hw we get all detail on server side.

thanx..

jatin said...

sir plz tell me ho can i sabe fb detail in database..?

neeraj(lilu) said...

sir i got your twitter(whole appn with code) integration and now i am integrating facebook please can u send me whole appn like twitter as soon as possible.

neeraj

venkat said...

Hello sir, can you put the code for download ?i am not getting the my names and profile images ,i didn't placed any channel files and is there any mandatory thing with channel ?

Anonymous said...

Sir, Though the tutorial works perfect when i login for the first time and giving app id , but when i am in debug mode and running the website next time without logging out, it shows a javascript error "Object doesn't support this property or method" below the head section. Am i doing something wrong??

Anonymous said...

Asp.net integrate Facebook login authentication to website

Anonymous said...


How to pass the name, gender, birthday and email to server side?
how to save the name, gender, birthday and email into sql database?

ravi said...

hello sureshbhai..i done login..but now i want to save user data in our database when he/she login ..plz help..

Rakesh Protihar said...

hello sir...
I have getting some problem to access this code. when I run this code to log in throw Facebook if I enter my Facebook id & password it fetch my name, email id which I need, but the problem is when I tried to log in throw another Facebook ID & password its not working & shows an error message. As I think though I am the admin of my app its shows my data properly but in case of others its not working...
Please help me out

Divya Eficaz said...

Hello sir,
Can you please provide me the code to get the friends list and friends of friends list in this way. I have take the authentication access token for taking the friend of friends list..

Anonymous said...

hello,

This is very nice. helped me a lot.
but i am facing one problem. The code in the script is running on page load. means if i am already logged in with Facebook account and then comes to my page in which i write this code then it automatically display my information.
I want it should display my information after i click on login with Facebook button.??
plz help me in this

DINI BULLS EYE said...

once it accessed to facebook account..emaild and picture is not displaying...

Anonymous said...

once it accessed to facebook account..emaild and picture is not displaying..

Anonymous said...

Hi , This one is good post but here am getting a problem of accessing emailid and picture details in my page once fb account is accessed ,can u pls help me on this

Anonymous said...

Hi Suresh it is a very good post helped me a lot ..Thnx...one more thing ,It Worked when i give my local host as URL and Canvas URL ...

DPS said...

Hi Suresh...I wanna hug you man..!

This post saved me a lot. Finally I did it for my website.

Only thing now I wanted to know is how to access phone no. of User?

Please reply as soon as possible.

Naresh P said...

hi suresh, can you please share the source code

Shweta Bharti said...

this code is working but not showing anything after login command. .. what should I do??

Anonymous said...

i wanna save those user details in my database ...pls help me

Anonymous said...

how to get all this details at server side
plz reply

Anonymous said...

is it possible to get all the friends email ids ..

Anonymous said...

Couldn't get the value of username and email id
in the page load in .cs page..is there any solution?

Anonymous said...

Facebook login logout work for the single user which user create api inside facebook but It's not work for other user they have not any API id ?So kinldy reply for this issue,I am new to develop sharing data in facebook with login and logout features.

Suma said...

Hi suresh,

Your post is very useful for me. But when i login with faceBook it does not dispaly the name and profile image.
It displayed:
Facebook Login Authentication Example
"login with facebook"
please help me.........

Anonymous said...

How to get page name which is created by user in facebook account to asp.net website

Anonymous said...

Hi Suresh,

your post is well and good. but i have a problem to display my facebook account. while i execute this code i have an issue like 'Closed' is null or not an object.This error raise in javascript.
how can i fix it?can you give some suggestion.please urgent..This is my mailid : psathya@topazts.com

Anonymous said...

Hi Suresh,

To redirect user after logged in Im using the below function, issue is, this is not redirecting me to my desired page. Please help with this, thanks.
Fb.Event.subscribe('auth.login', function () {
window.location = 'http://google.com';
});

Krishna Tiwari said...

this is good

Anonymous said...

This works for me in FF & Chrome, but in IE it does not display anything, is there any trick?

ASHISH SRIVASTAVA said...

why this coding is not working
window.fbAsyncInit = function() {
FB.init({

in this section

Shakir Baksh said...

Sir your post is to good and working on local server.when i was deploy it on server ,facebook login is working but not getting value on our own page ,alert are not working and i want to redirect to other page but not working..pls help i spend last 2 days to solve this problem pls sir or any buddy help me....


thanks

Shakir Baksh said...

Sir give me link of google plus login button to our website with getting all user details..
thanks

Jonathon Cowley said...

This all worked great. But one thing I'm struggling with; how do I pass the email address of user id to the page's VB.Net? I need to run SQL queries on a database using the facebook userid displayed as the WHERE predicate. Any advice would be greatly appreciated.

Anonymous said...

where exactly the permission in this code has to be set...
i broke my head setting the permissions but nothing works

Amit Varma said...

hi..sir, i want to set the city of user,than what is code for this...please send me code for this.

naidu said...

sir,it is working fine for only app_id user.BUT didn't get the other accounts details.Could please tell me solution ASAP.

Ruggers Gear said...

Hi, Ruggers here. This is a nice article which you have explained. I've implemented in my project. :) Could you please let me know, is there any way to avoid the "Login" button click and show the login window in the screen after the page load itself inside an iframe or something like that?

rohit sharma said...

simply awesome...

Urvi Patel said...

Hello sir,
I'm unable to get user data in code file, as i want to add some code on user login.

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.