Asp.net get facebook logged in user details
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
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>
|
No comments :
Post a Comment