I have an app in a page tab that uses the facebook javascript sdk. When a new user comes to the app, I get the expected "Log in with facebook" pop-up. I also have some extended permissions that I've put in the scope parameter of FB.Login. After the users logs in with facebook I see the expected extended permissions pop-up. The only problem is if the user skips the extended permissions, the dialogue returns back an access_token, but it's not valid for the extended permissions. Code example below.
window.fbAsyncInit = function () {
FB.Canvas.setAutoGrow();
FB.init({
appId: facebookAppId,
status: true, // check login status
});
function updateFBInfo(response) {
console.log('updateResp:');
if (response.authResponse) {
//user is already logged in and connected
FB.api('/me', function (info) {
displayUserInfo(info, response);
});
}
else {
FB.login(function (loginResponse) {
if (loginResponse.authResponse) {
FB.api('/me', function (info) {
displayUserInfo(info, loginResponse);
});
}
}, { scope: 'email,manage_pages,offline_access,publish_stream' });
}
}
FB.getLoginStatus(updateFBInfo);
};
I guess my question is either, what am I missing (this has got to be something easy), or is there a way to check and see if the returned acces_token is actually valid?
You need to check explicitly for the permission before proceeding. If they haven't provided the necessarily permissions, you need to display FB.login() with the necessary scope again.
Here is the code for checking permissions:
FB.api('/me/permissions', function (response) {
var perms = response.data[0];
// Check for publish_stream permission in this case....
if (perms.publish_stream) {
// User has permission
} else {
// User DOESN'T have permission. Perhaps ask for them again with FB.login?
}
} );
Related
I am using a Facebook app to authenticate my users, but if the user is not logged in to Facebook (I am checking it with FB.getLoginStatus()) I show him a button to log in with. The problem is that the pop-up gets blocked all the time. I have no idea why, since I am registering the Facebook log in action on ng-click.
<button type="button" ng-click="login()">Log in via Facebook</button>
...
$scope.login = function() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
$scope.userId = response.authResponse.userID
loginSuccess()
} else
FB.login(function(response) {
if (response.authResponse) {
$scope.userId = response.authResponse.userID
loginSuccess()
} else {
alert('You need to log in and authorize the app, otherwise you won\'t be able to take the quiz!')
}
})
})
}
Any help?
FB.getLoginStatus should be used on page load to check if the user is authorized and to refresh the User Token. You can use it right after FB.init and store the User ID if he is logged in.
FB.login must be used directly on user interaction, you are using it in the asynchronous (!) callback function of FB.getLoginStatus and not directly when the user clicks on the button.
Example: http://www.devils-heaven.com/facebook-javascript-sdk-login/
I'm trying to use Facebook to log in an Ember application. The login action is working, but I can't find how to check if the user has already logged in when the app is initialized.
I'm calling the auth.authResponseChange event but it blocks the app and it never starts.
App.ApplicationController = Ember.Controller.extend({
fbUser: false,
init: function() {
this.checkFBUser()
},
checkFBUser: function() {
FB.Event.subscribe('auth.authResponseChange', function(response) {
// this is never triggered and the app does not init
console.log(response)
if (response.status === 'connected') {
console.log('Logged in')
}
else {
FB.login()
}
})
},
// this works
actions: {
loginFacebook: function() {
var self = this
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
self.set('fbUser', response)
})
}
})
}
}
})
How am I supposed to do this?
I haven't worked with FB lately, but I'm pretty sure the AuthResponeChange event is for being notified of a change in the AuthResponse status; in this instance you'll probably want to take a look at FB.getLoginStatus instead.
https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus
checkFBUser: function()
{
FB.getLoginStatus(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;
} 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.
}
});
I've found the source of the problem and a solution. I'm not sure this is the best solution so I'm open to other suggestions but if this can help other people, here is the thing:
The issue was that the Facebook library was not loaded yet, so the FB variable was undefined. For some reason if you try to do something with an undefined variable in Ember the app just won't work without even a warning. So the solution is to wait:
App.deferReadiness()
function checkFB() {
if (typeof FB !== 'undefined') {
APp.advanceReadiness()
}
else {
setTimeout(checkFB, 10);
}
}
setTimeout(checkFB, 10);
10 milliseconds is pretty short so the app is still initialized very quick, and in my tests the app starts after ~20 milliseconds. This still feels a bit hacky but in place of a better solution this will do for now.
As Aaron said you need to use fb.getLoginStatus to check if a user is already logged in. To make sure Facebook is loaded before you to make any calls you can use an initializer and defer the app until the SDK has loaded.
http://nerdyworm.com/blog/2013/04/03/ember-initializers/
Ember.Application.initializer({
name: 'init_fb',
initialize: function (container) {
window.App.deferReadiness();
Ember.$.getScript( '//connect.facebook.net/en_UK/all.js', function( ) {
FB.init( {
appId : 'xxxxxxxxxxxxx',
xfbml : true,
version : 'v2.0',
} );
window.App.advanceReadiness();
} );
}
});
I am adding facebook authentication to my website. Is there a way for me to know whether the user checked "stay logged in"?
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
// logged in
KNOW HERE: Did user check 'stay logged in'?
});
}else {
}
});
The answer seems to be that it is not possible to determine.
Let's say I have an facebook application running using the JS SDK.
First user clicks on LINK A, and I do a call to FB.login() asking for the "email" permission.
<a href="#" onclick="doLogin();>LINK A</a>
<script>
function doLogin() {
FB.login(function (res) {
//res contains authResponse, i.e. the user is logged in.
}, { scope : 'email'} });
}
</script>
Then I will do a check on authResponse to check if user logged in or not.
if(res.authResponse) {
//User logged in
} else {
//User NOT logged in
}
NOW let's say that on LINK B, I want to ask for the "user_birthday" permission:
FB.login(function (res) {
//Now res.authResponse is set even if user did NOT grant access to the "user_birthday" permission
}, { scope : 'user_birthday'} });
However when the request for "user_birthday" is made the user is already logged in to the application - and therefore authResponse will be set regardless if user granted access to the additional permission, or clicked cancel.
Is there a way to check if user gave the additional permission?
I know I can do a lookup on the api on /me/permissions - but I wonder if there's a way to do it in the FB.login() callback?
Yes, using that user access token, query me/permissions.
FB.api('me/permissions',function(permsArr){
var canGetBirthday = PermissionExists(permsArr, 'user_birthday'); // write your own PermissionsExists parser....
});
We let users/companies add their facebook accounts to our system, and we let them authenticate those accounts after they are added, so that we can get details which are not public otherwise. so we need tell user which account to authenticate against, is this possible ?
Lets say user is already logged into facebook with account x, then he logins to our app and choose to authenticate account Y, so he will click on the authenticate link for Y and proceed to authenticate, is there anyway to enfore user to authenticate Y.
For me, the solution was, first check if user is already logged into facebook, and logout them using FB.logout. Then open the login dialog (FB.login) so that they can log into the desired account. On successful login, check that the logged in user is same as the link that was clicked on.
The overall code is some thing like this
$('.fb-login').live('click', function() {
var accountName = $(this).attr('id');
//if user is already logged in, logout him so that he can authenticate correct account
FB.getLoginStatus(function(response) {
console.log(response);
if (response.status === 'connected') {
FB.logout(function(resp) {
console.log("Logged out of facebook")
});
}
}, true);
FB.login(function(response) {
if (response.authResponse) {
var accessToken = response.authResponse.accessToken;
console.log(response);
console.log('Fetching FB account information.... ');
FB.api('/me', function(response) {
console.log('Account name, ' + response.username + '.');
//validate that user authenticated the same account as the link he clicked on
if(accountName == response.username || accountName == response.id) {
//save token
} else {
//show error
}
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'perms'});
});
Yes, you will want to have logout functionality on your page. Since it's unclear as to how you've implemented your login button, I'll give one example:
Do a server-side 302 redirect the user to https://www.facebook.com/logout.php?next=YOUR_URL&access_token=ACCESS_TOKEN
The next= will be the location where the user can click to log into account Y
For your specific needs you can research here: https://developers.facebook.com/docs/authentication/