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 requestpermissions 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
 |
No comments:
Post a Comment