I am trying to figure if there is any way to notify the parent page when user either closes or clicks on cancel button on Facebook permissions window during oauth flow. Its the window where user authorizes an app. The window with url: https://www.facebook.com/dialog/oauth?api_key=..... and with "Login with Facebook" and "Cancel" buttons. What I am trying to accomplish is-- If user cancels or closes the oauth permissions window, I would like to open Facebook simple sharing window where they can post status without authorizing the app.
I am using JS SDK for Facebook connect.
This code is taken from the documentation for the FB.login method:
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
As you can see, the if (response.authResponse) part checks rather the login process was finished successfully, that is, the user allowed the application and he is logged in to facebook.
If the user clicked "cancel" or closed the popup then there won't a authResponse parameter in the response.
Observe the url as user cancel the authorization the oauth url changes, it will now contain number of fields to describe user action
YOUR_REDIRECT_URI?
error_reason=user_denied
&error=access_denied
&error_description=The+user+denied+your+request.
&state=YOUR_STATE_VALUE
This will be the value after user cancel the authentication
error_reason=user_denied
&error=access_denied
&error_description=The user denied your request
After user cancel's the authentication dialog page will be redirected to the parent page where you can check these error parameters.
Related
We are developing a website at www.bodecanada.com. One of the login methods we provide is facebook. We also try to keep track of whether the user is logged into facebook or not when refreshing the page or opening the site in a new tab. We do this by calling FB.getLoginStatus() (from the Facebook js sdk). However, we are finding that in a few cases--for example, when opening the site in a new tab in Safari--the response status that comes back from FB.getLoginStatus is 'unknown'. The Facebook SDK documentation says this about the 'unknown' status:
FB.getLoginStatus() allows you to determine if a user is logged in to
Facebook and has authenticated your app. There are three possible
states for a user:
The user is logged into Facebook and has authorized your application. (connected)
The user is logged into Facebook but has not authorized your application.(not_authorized)
The user is either not logged into Facebook or explicitly logged out of your application so it doesn't attempt to connect to Facebook
and thus, we don't know if they've authenticated your application or
not. (unknown)
We are dealing with #3 in this case. However, when I visit facebook, I find I am not logged out. But at the same time, I am not "explicitly logged out" (meaning FB.logout() is called) from my site. So why is it returning 'unknown'?
One solution I found on google says to add cookies: true to FB.init() in order to enable 3rd party cookies, so I did so:
FB.init({
appId : process.env.FB_APP_ID,
cookie : true,
xfbml : true,
version : 'v2.2'
});
But this doesn't change anything.
So why does FB.getLoginStatus() return 'unknown' for the response status when I open the site in a new tab?
Thanks.
I had the same issue when I closed and reopened the browser again. What I did is put the fb.login function if the status is unknown. But, emergent windows must be enabled in the browser:
function statusChangeCallback(response) {
if (response.status === 'connected') {
userId = response.authResponse.userID;
accessToken = response.authResponse.accessToken;
var userinfo = getUserInfo(userId);
} else if (response.status === 'unknown') {
FB.login(function(response) {
statusChangeCallback(response)
}, {scope: 'public_profile,email'});
}
}
I'm getting the same issue, also using "cookie: true". But.. if I put the call to FB.login into the "status === 'unknown'" block, I get a blocked FB oauth popup - that is an empty window. I know I'm logged into Facebook (it's in the next tab over), I just don't understand why FB.loginStatus always returns "unknown".
I have a FB app which need to be integrated in a FB page tab. In app I want to provide a "Signup with FB login" option. This button when clicked should prompt the user to login into FB login dialog. On successful login it should prompt the user to authenticate and allow the app to use his details. Once the user allows the app to access the user details it should then post the details to my website in a new window.
This process works fine when I test the app independently. However when I add the app to the fb page, chrome blocks the Fb login dialog. Before opening the Fb login dialog I check if the user is already logged in FB and has accepted the app. For that I use FB.getLoginStatus(checkLoginStatus); I figured due to this check the context moves to script execution and hence Chrome blocks the login dialog.
Is there a work around for this issue? Help would be highly appreciated.
My code is as follows:
The facebook button is created using span and the id fbc-login-button is given to an a tag.
$("#fbc-login-button").click(function(){
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log('Logged in.');
if (response.authResponse) {
fbAppSignup(response);
}
}
else {
FB.login(function(response) {
if (response.authResponse) {
fbAppSignup(response);
}
},{scope: "email, user_friends",display:"popup"});
}
});
function fbAppSignup(response,myPopup){
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
FB.api("/me", function(response) {
$("#social_media_data").val(JSON.stringify(response));
$("#medium").val("facebook");
$("#accessToken").val(accessToken);
$("#socialClickSource").val("fbapp_facebook_signup");
$("#fbSignUp").submit();
return true;
});
}
The example in the Facebook docs is a bit misleading, you should never use FB.login in an asynchronous callback function - and that is exactly what you are doing right now, because FB.getLoginStatus is asynchronous. Always call FB.login on user interaction (mouse click) or it will get blocked by intelligent browsers.
FB.getLoginStatus: on page load, for refreshing the user session and
checking if the user is authorized already
FB.login: on user interaction
Other threads i´ve answered about that problem:
Facebook login popup blocked
FB.api response callback async popup blocked
Sign In with FB issue: FB popup window with the Login dialog is blocked by a web browser
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
I have added an fblogin button to my website
it is working fine
a button is placed and when user clicks on it a dialogue box opens for login.
But i don't know how to get response after a successful login.
Please suggest
You can use the JS SDK to subscribe to events of that type. Take a look at the facebook javascript documentation, the method you are looking for is 'auth.authResponseChange' :
FB.Event.subscribe('auth.authResponseChange', function(response) {
alert('The status of the session is: ' + response.status);
});
When I ask for user authentication of my app, I use this dialog:
FB.login(function(response)
{
if (response.authResponse)
{ ...}
else
{...}
},
{scope: 'publish_stream' });
My question is if the dialog is supposed to ask the user to login first and then ask for app authorization? Can i make the authorizarion dialog not to ask for login first? Since the user is already logged in to facebook?
If the user has already logged in, FB will handle it and directly show the auth dialog instead of the login dialog