I have to make a website to login with Facebook. Makes sense to be able to send them an email, but I can't get the email address from Facebook.
I followed exactly the instructions from https://developers.facebook.com/docs/facebook-login/getting-started-web/
I add it {scope:email} in FB.login.
How can I get the email address with Facebook API?
My code by now:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'app', // App ID
channelUrl : '//domain.COM/channel.php', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
FB.api('/me', function(response) {
console.log(response);
});
} else if (response.status === 'not_authorized') {
FB.login(function(response) {},{scope: 'email'});
} else {
FB.login(function(response) {}, {scope: 'email'});
}
});
};
// 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));
</script>
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
I ran into the same issue. Deauthorize the app from the fb account. Then authorize the app again through your test page
I found that it didn't hit the below block once I authorized the app the first time. (adding the scope:email into FB.login once the app has been authorized does no good... i think)
} else if (response.status === 'not_authorized') {
FB.login(function(response) {},{scope: 'email'});
} else {
FB.login(function(response) {}, {scope: 'email'});
}
hope that helps
If you have logged in successfully, calling response.email will return the user's email address.
Related
I have created a Facebook app which will share a link to users wall
but the issue is the link is posted on my wall but not on any other user's wall
i have put on live link Link to post on wall app
the code of app that will post on users wall is given below is there anything i need to approve it from the facebook or is there any mistake in my code please i need a real help any one could do ?
waiting for your kind response i am new to the Facebook API
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId: '763390233734216', // App ID from the app dashboard
//channelUrl : '//local.facebook-test/channel.html', // Channel file for x-domain comms
status: true, // Check Facebook Login status
xfbml: true, // Look for social plugins on the page
oauth: true // Enable oauth authentication
});
// Additional initialization code such as adding Event Listeners goes here
FB.login(function(response) {
if (response.authResponse) {
console.log(response.authResponse.accessToken);
var params = {};
params['name'] = 'Seasons Canola';
params['description'] = 'Description';
params['link'] = 'http://vimeo.com/99708842';
FB.api('/me/feed', 'post', params, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
} else {
alert('Not logged in');
}
}, {
scope: 'public_profile,email,publish_actions'
});
};
// Load the SDK asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I am making a facebook app for which i need permissions other than the basic permission. I have tried using scope as well as changing in the app settings, still I get only the basic permissions and no more other permissions. Below is the code :
<html>
<head></head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxx',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login(function(response) {
// handle the response
}, {scope:'user_photos,user_friends,friends_photos,user_status,publish_stream,user_photo_video_tags'});
} else {
FB.login(function(response) {
// handle the response
}, {scope:'user_photos,user_friends,friends_photos,user_status,publish_stream,user_photo_video_tags'});
}
});
};
// 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));
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
});
</script>
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
</body>
</html>
I understand that it takes some time for app permissions to propagate, but I have waited for hours. Any hint on whats going wrong here?
Thanks.
Not sure why your code is not working and I am yet to try running it on my machine by I am posting a working code here. Please try using this code after following steps mentioned below
Create a new app on facebook.
In Permissions tab, select the user permissions that you want from user.
In code mentioned below, input your app id and try running it.
Code below is taken from http://hayageek.com/examples/oauth/facebook/oauth-javascript/index.php and is basic implementation of Javascript SDK.
<html>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXX', // App ID
channelUrl : 'http://192.168.1.146/facebook/index.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.authResponseChange', function(response)
{
if (response.status === 'connected')
{
document.getElementById("message").innerHTML += "<br>Connected to Facebook";
//SUCCESS
}
else if (response.status === 'not_authorized')
{
document.getElementById("message").innerHTML += "<br>Failed to Connect";
//FAILED
} else
{
document.getElementById("message").innerHTML += "<br>Logged Out";
//UNKNOWN ERROR
}
});
};
function Login()
{
FB.login(function(response) {
if (response.authResponse)
{
getUserInfo();
} else
{
console.log('User cancelled login or did not fully authorize.');
}
},{scope: 'user_photos'});
}
function getUserInfo() {
FB.api('/me', function(response) {
var str="<b>Name</b> : "+response.name+"<br>";
str +="<b>Link: </b>"+response.link+"<br>";
str +="<b>Username:</b> "+response.username+"<br>";
str +="<b>id: </b>"+response.id+"<br>";
str +="<b>Email:</b> "+response.email+"<br>";
str +="<input type='button' value='Get Photo' onclick='getPhoto();'/>";
str +="<input type='button' value='Logout' onclick='Logout();'/>";
document.getElementById("status").innerHTML=str;
});
}
function getPhoto()
{
FB.api('/me/picture?type=normal', function(response) {
var str="<br/><b>Pic</b> : <img src='"+response.data.url+"'/>";
document.getElementById("status").innerHTML+=str;
});
}
function Logout()
{
FB.logout(function(){document.location.reload();});
}
// 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));
</script>
</div>
</body>
</html>
Update: Hope this solves your problem, I will have a look at your tonight and explain what is going wrong with it.
I already use this code,i get user name but i can't get email address please some example how to get email address in face api .but many user give some example it does n't work so give valuable code
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '64530546436364535', // App ID
channelUrl : '//WWW.loginhire.com', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login();
} else {
FB.login();
}
});
};
// 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));
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
testAPI();
} else {
// cancelled
}
}, { scope: 'email' });
}
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.' + ' Email: ' + response.email + ' Facebook ID: ' + response.id);
//console.log('Good to see you, ' + response.name + '.');
console.log(' Email: ' + response.email+'.' );
});
}
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '645304363653fghdfg', // App ID
channelUrl : '//WWW.channelUrl .com', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
// for any authentication related change, such as login, logout or session refresh. This means that
// whenever someone who was previously logged out tries to log in again, the correct case below
// will be handled.
FB.Event.subscribe('auth.authResponseChange', function(response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
// The response object is returned with a status field that lets the app know the current
// login status of the person. In this case, we're handling the situation where they
// have logged in to the app.
testAPI();
} else if (response.status === 'not_authorized') {
// In this case, the person is logged into Facebook, but not into the app, so we call
// FB.login() to prompt them to do so.
// In real-life usage, you wouldn't want to immediately prompt someone to login
// like this, for two reasons:
// (1) JavaScript created popup windows are blocked by most browsers unless they
// result from direct interaction from people using the app (such as a mouse click)
// (2) it is a bad experience to be continually prompted to login upon page load.
FB.login();
} else {
// In this case, the person is not logged into Facebook, so we call the login()
// function to prompt them to do so. Note that at this stage there is no indication
// of whether they are logged into the app. If they aren't then they'll see the Login
// dialog right after they log in to Facebook.
// The same caveats as above apply to the FB.login() call here.
FB.login();
}
});
};
// 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));
// Here we run a very simple test of the Graph API after login is successful.
// This testAPI() function is only called in those cases.
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
testAPI();
} else {
// cancelled
}
}, { scope: 'email'/'phone' });
}
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.' + ' Email: ' + response.email + ' Facebook ID: ' + response.id);
//console.log('Good to see you, ' + response.name + '.');
});
}
</script>
<fb:login-button show-faces="false" width="200" max-rows="1" scope="email" onclick="testAPI();" onlogin="Log.info('onlogin callback')">
Login with Facebook
</fb:login-button>
</span>
i have a login page where i will give link for facebook login but unfortunately the facebook oauth dialog opens up as soon as i land on the the login page .I want it on click of the link and not on page load.Can any help?
<p><a onclick='login(); return false;'>Login</a></p>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : '3423243443', // App ID
status: true, // check login status
cookie: true, // enable cookies to allow server to access session,
xfbml: true, // enable XFBML and social plugins
oauth: true // enable OAuth 2.0
// channelUrl: 'http://www.yourdomain.com/channel.html' //custom channel
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connected
alert("connected1"+response.authResponse.expiresIn);
} else if (response.status === 'not_authorized') {
// not_authorized
login();
} else {
// not_logged_in
alert("not logged in");
login();
}
},true);
};
(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));
/*function login() {
FB.login(function(response) {
if (response.authResponse) {
testAPI(response)
// connected
alert("connected2 "+response.authResponse);
} else {
// cancelled
alert("cancelled");
alert("cancelled"+response.authResponse);
}
});
} ;
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.email + '.');
});
} ;*/
</script>
Because you inserted the FB.getLoginStatus, which calls your login function, in window.fbAsyncInit on every page's loads.
You should fire FB.getLoginStatus only though a button, with an onclick trigger.
Here is a little example: http://facebook.stackoverflow.com/a/15720747/2212966
I have mine wrapped with a jquery button click event handler. Here is a snippet from my code:
window.fbAsyncInit = function() {
FB.init({
appId : 'my-app-id',//use your facebook appId in here
status : false,
cookie : true,
xfbml : true,
version : 'v2.2'
});
jQuery('#signUpWithFacebookButtonId').click(function(){
FB.login(function(response) {
if (response.status === 'connected') {
console.log('Logged into your app and Facebook.');
} else if (response.status === 'not_authorized') {
console.log('The person is logged into Facebook, but not your app.');
} else {
console.log('The person is not logged into Facebook, so we are not sure if they are logged into this app or not.');
}
}, {scope: 'public_profile, email'});
});
};//end window.fbAsyncInit function
I had setup
<div id="fb-root"></div><div class="fb-login-button" data-show-faces="true" data-width="400" data-max-rows="1" scope="email, publish_stream"></div><script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({
appId: 'xxx', // App ID
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true, // parse XFBML,
oauth : true
});
FB.Event.subscribe('auth.authResponseChange', function (response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
// TODO: Handle the access token
$.post('/facebook/login', { accessToken: accessToken }, function (response) { if(response) {alert('Logged in')} });
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook.
}
});
};
// 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));
The problem is when user click on Login button and Accept my app, the login dialog is closed and no event is fired so my post $.post('/facebook/login') also never fired unless I press F5.
How can I fire event right after login dialog box closed?
Just sharing.
Run in to a possible solution while reading Facebook documentation for answers.
http://facebook.stackoverflow.com/questions/3548493/how-to-detect-when-facebooks-fb-init-is-complete
You could run your $.post('/facebook/login') inside fbEnsureInit(); <-- referring to serg's answer.
Using an interval callback to check for login status might be a way to do it.
You can reload the page with: window.location.reload(); so you don't need to press F5,
An FB.login example:
FB.login(function(response) {
if (response.authResponse) {
console.log('Application authorized.');
window.location.reload();
} else {
console.log('You cancelled login or you did not fully authorize the app.');
}
}, { scope: 'email' });
or you can use a subscribe event:
FB.Event.subscribe('auth.authResponseChange', function(response) {
console.log('The status of the session changed to: '+response.status);
window.location.reload();
});