I have a list of fb permissions that I want to select / deselect and then I want to submit the changes to facebook with this logic with just one user action ( one click ):
1) login to FB;
2) delete ( revoke ) all permissions;
3) request the new ( selected ) permissions.
<button onclick="changePermissions()">Change permissions</button>
function changePermissions() {
FB.login((response) => {
FB.api('/me/permissions', 'DELETE', () => {
FB.login(() => {}, {
scope: 'email,publish_pages', // the new selected permissions
auth_type: 'rerequest'
});
});
});
}
Step 1) and 2) works as expected, but step 3) fails. ( the new login pop-up with the new permissions is blocked by the browser ). Facebook js sdk says that "FB.logion() must be called from button event handler".
How can I achieve this scenario with just one user action ( 1 click ). I don't want to force the user to interact multiple times with the UI in order to change his permissions ?
If the user authorized your App already, you can just delete the permissins BEFORE FB.login. FB.getLoginStatus re-authorizes the user anyway. So the first FB.login is not needed, but the API call for deleting permissions is ansynchronous, that is why browser block the second FB.login call.
Just delete the permissions right after FB.getLoginStatus and only do FB.login in the changePermissions function.
Example with FB.getLoginStatus: https://www.devils-heaven.com/facebook-javascript-sdk-login/
Related
I know how to use custom button as Facebook login.
Now I'd like to bind onlogin event to customized button, but I don't know how to do.
Original code
<fb:login-button scope="public_profile,email" onlogin="afterLogin();">
</fb:login-button>
<script>
/* Assume that Facebook SDK loaded asyncronously and initilized */
function afterLogin() {
// Do stuff
}
</script>
My code
<button id="cusomized-button" onclick="fbLogin();" onlogin="afterLogin();">
Customized button
</button>
<script>
/* Assume that Facebook SDK loaded asynchronously and initialized */
// Show facebook login modal
function fbLogin() {
FB.login(function() {}, {
scope: 'email,public_profile'
});
};
function afterLogin() {
// Do stuff
}
</script>
Assuming you use version 2.4 of the Graph API, you are able to subscribe to an event called auth.login which is fired whenever the login status changes.
So, if you want to react to when the user logs in, you can do this and your function named afterLogin would be called once the user logs in to your app:
FB.Event.subscribe('auth.login', afterLogin);
Do note that Facebook recommends everyone to listen to auth.statusChange instead, otherwise your application will not know if the user has logged out or deauthorized the application, which would invalidate the token.
Here's an example using auth.statusChange, the response argument passed to the function contains a response object which is detailed here:
FB.Event.subscribe('auth.statusChange', function(response) {
if(response.status === 'connected') {
// `connected` means that the user is logged in and that your app is authorized to do requests on the behalf of the user
afterLogin();
} else if(response.status === 'not_authorized') {
// The user is logged in on Facebook, but has not authorized your app
} else {
// The user is not logged in on Facebook
}
});
As an alternative, the first argument to FB.login is a function which is called after the user returns from Facebook, so you could do something like this:
FB.login(function(response) {
if (response.authResponse) {
afterLogin();
} else {
// The user cancelled the login or did not authorize your app
}
}, {
scope: 'email,public_profile'
});
Here's an alternative using onlogin() in the way you originally wanted.
There's a subtle reason why you may need this:
You are using Facebook login just as a way to login to your own website
User is already connected (has previously connected to your FB)
User is NOT logged into your website.
You don't want to magically log someone in just because they're 'connected' It's not a good user experience.
So you show them the 'Login' button and once clicked you log the user in locally (provided you've established a linkage before).
In that case you do the following in the button code.
onlogin="window.fbOnLogin()"
Then depending upon your environment, somewhere in your code you would need to create a function on window. I'm using an Angular service and doing the following. This is typescript, so omit the <any> part if you're using pure JS.
constructor()
{
// Pure JS
// window.fbOnLogin = this.onLogin;
// Typescript (use lambda to keep 'this')
(<any>window).fbOnLogin = () => this.onLogin();
}
onLogin() {
call_my_server_to_login(token);
alert('Thanks for logging in with Facebook');
}
Now you can display the button to the user (and you secretly already know they're a user because the auto.authResponseChange event (or FB.getLoginStatus()) has told you they are "connected".
Note: None of the events, including auth.login will actually get triggered if you just click the button.
Once they click it FB returns immediately (becuase you're already logged in and connected) and calls your function. You then login the user your own website (you have to do a server side lookup to make sure they already logged in before). If you don't know who the user is then you have to do one of those 'associate your username' pages.
I want to pull the list of pages from an account by using my App. I took reference from https://developers.facebook.com/docs/facebook-login/login-flow-for-web/v2.2
I have added few scopes "manage_pages, publish_stream, read_stream, publish_actions, publish_pages" to fb:login-button so that I can pull pages. I have added one more function
function getFacebookPages() {
FB.api('/me/accounts', function( apiResponse ) {
if( apiResponse && !apiResponse.error ) {
console.log('For Facebook pages');
console.log(apiResponse);
}
});
}
to pull pages, but it not pulling pages.
Please help me.
For permissions that aren't the default ones ( email, public_profile, user_friends ) you need in 'Status & Review'(from the menu in your app dashboard) to make a submission for them.
Until your review is completed you could create in your app a TEST app at 'Test Apps' ( again, from the menu in your app dashboard ). If you code using the ids of an test app you don't need the submission for permissions, just specify them in the scope.
This must work, please give more details if doesn't works
I'm developing a pure-html/js web application (actually I'm using AngularJS; with "pure" I mean: I'm not using any server side technology) which uses a Facebook-Connect button like this:
<fb:login-button max_rows="1" size="xlarge" scope="email,public_profile,ads_management" show_faces="false" auto_logout_link="false"></fb:login-button>
Such button asks for permission: ads_management and basic user data. I'm testing ad-management functionality.
However, I ask two queries to facebook inside a controller:
$scope.fetchData = function() {
FB.api('/me', function(response){
$scope.$apply(function(){
console.log("InApp::fetchData()");
console.log(response);
console.log("~InApp::fetchData()")
});
});
};
$scope.fetchAccounts = function() {
FB.api('/me/adaccounts', function(response){
$scope.$apply(function(){
console.log("InApp::fetchAccounts()");
console.log(response);
console.log("~InApp::fetchAccounts()");
});
});
};
$scope.fetchAccountData = function(account_id) {
};
$scope.fetchData();
$scope.fetchAccounts();
For narrow-purposes I just printed the contents of a controller. Assume such controller exists, requires the person is logged in Facebook, and the user is currently logged in.
My Issues are:
The Login button does not update the page when I login. This is because no onlogin= was put. Question: How can I assign such attribute in an Angular way? (i.e. the handler coming from the scope).
$scope.fetchData is successfully executed. However, $scope.fetchAccounts is not. I'm asking this because I included the ads_management permission in the button. Question: What am I missing? (error: code: 10
message: "(#10) You do not have sufficient permissions to perform this action"
type: "OAuthException"). Edit - Additional notes: I deauthorized the application in my account, and reauthorized it: It never asks me the ads_management permission in the popup dialog.
The first question, no idea. The second question, your app is not whitelisted for Ads API usage. Look into the Ads APi documentation on how to request access.
I have created a custom story to be posted on facebook timeline when user clicks on a share button.
While i was logged into facebook, I could successfully post on timeline using the following code
function postLike() {
FB.api(
'https://graph.facebook.com/me/og_pricepan:compared',
'post',
{ product: objectToLike,
privacy: { 'value': 'SELF'}
},
function (response) {
if (!response) {
alert('Error occurred.');
} else if (response.error) {
document.getElementById('result').innerHTML =
'Error: ' + response.error.message;
} else {
document.getElementById('result').innerHTML =
'<a href=\"https://www.facebook.com/me/activity/' +
response.id + '\">' +
'Story created. ID is ' +
response.id + '</a>';
}
}
);
Now, when the user is not logged into facebook, I get the following error:
Error: An active access token must be used to query information about the current user.
Shouldn't the login window get open by itself asking the user to login into facebook or I need to do something on my end to handle this situation?
Also, do i need to submit my application for review before users can create custom stories from my website to their timeline?
Shouldn't the login window get open by itself asking the user to login into facebook or I need to do something on my end to handle this situation?
No. You need to explicitly login the user by following the Facebook Login Flow to request an access token
Also, do i need to submit my application for review before users can create custom stories from my website to their timeline?
Yes and No. No, because it's not like you will have someone from Facebook Support Team going through your app to make sure your app ticks all the boxes. Yes, because you will need to register your app with Facebook. So, technically all you need to do is register with Facebook as a developer and register your app in order to get an app secret and API key. You can have your app in "Sandbox mode", create test users and test your integration with Facebook before you publish it live. There's few requirements you need to meet before publishing it, such as providing set of logos of a specific size, etc. Here's a blog explaining part of the process, but really, the process is very straight-forward and you should be able to get through easily by yourself.
Now, the error you are getting says it all. There's no user logged in to facebook. The endpoint you are trying to post to, requires a active valid access token, if it doesn't exist then there's no context, no user authenticated and you need to explicitly authenticate the user by invoking the login dialog...
FB.login(function(response) {
if (response.authResponse) {
// The person logged into your app
} else {
// The person cancelled the login dialog
}
});
If you need to know whether a user is logged in or not, you can follow to simple approaches:
1.By invoking the FB.getLoginStatus function
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
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.
}
});
2.Or, by subscribing to the auth.authResponseChange event when initializing the framework and setting the status option to true
There's a full-legged tutorial on Facebook Developers Site for Javascript SDK explaining both approaches.
Hope it makes sense
In my Facebook application, I am requesting 3 scopes: email,publish_stream,publish_action
I am using the FB.login function. These 2 steps pop up.
When the user clicks "Cancel" in the first step, FB.login will show "status: unknown" as the response object.
However, when user clicks cancel in the second step, FB.login shows it as "status:connected" and treats it as if the user accepted everything.
I recently learned that you can check if the user allowed the 2nd step using
FB.api('/me/permissions', function (response) {
console.log(response);
} );
My question is...knowing that the user denied the open graph step, how can I pop that dialog up again?
You are correct, the 2nd stage of the Auth Dialog is optional, the user does not have to accept all of the extended permissions you ask for, or any of them, as it states in the Permissions sections of the auth dialog documentation:
The user will be able to remove any of these permissions, or skip this
stage entirely, which results in rejecting every extended permission
you've requested. Your app should be able to handle revocation of any
subset of extended permissions for installed users.
The best approach I think is to have your app manage with what the user accepts, but if you HAVE to have the permission(s) in the optional stage (extended permissions) then this is what you can do:
FB.init({
....
});
var requiredPermissions = ["email", "publish_stream", "publish_action"];
function checkPermissions(response) {
var ok = true;
if (!response.data || response.data.length != 1)
ok = false;
else for (var perm in requiredPermissions) {
if (!(perm in response.data[0])) {
ok = false;
break;
}
}
if (!ok)
login();
else
console.log("Hey there user who granted all the required permissions");
}
function loginCallback(response) {
if (response.authResponse) {
FB.api("/me/permissions", checkPermissions);
}
else {
console.log("User cancelled login or did not fully authorize.");
}
}
functoin login() {
FB.login(loginCallback, { scope: requiredPermissions.join(",") });
}
I haven't tested this code, it's a nudge in the right direction though.
Also, this code will go on forever until the user accepts all permissions or just gives up, you should somehow let him know that you need those permissions and about to send him for the auth dialog again.
Edit
I keep forgetting to include this with my answers:
Calling FB.login opens a new pop-up window, and browsers usually blocks that unless it's a result of a user action, as it says in the docs:
Calling FB.login results in the JS SDK attempting to open a popup
window. As such, this method should only be called after a user click
event, otherwise the popup window will be blocked by most browsers.
It also says there:
If you need to collect more permissions from users who have already
authenticated with your application, call FB.login again with the
permissions you want the user to grant. In the authentication dialog,
the user will only ever be asked for permissions they have not already
granted.
Which means that it's a way to do what you want, the popup probably did not open because it was blocked by your browser.
You need to modify the code I gave you so that every time you call the login function it's after the user interacted with your page, i.e.: display a message saying "the application needs this and that permissions, please click this button to continue" which then will call the login function.