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
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'm creating a Login Function using Facebook's SDK. I'm re-using code from a previous project that had a Login button which redirected to a Login Box on the Facebook Domain (i.e. the Login box was not a popup, but redirected the user).
In the previous project when the user would come back to the site after accepting the app, there was a PHP script which created a $_Session:
$user = $facebook->getUser();
if (isset($user)){
$_SESSION['LoggedIn'] = $user;
}
I could then use the 'LoggedIn' session to check if the user was logged in or not, and modify the page based on that (e.g. replace content on the page).
Here's my question - I am now using the JS code that Facebook provides for a popup Login box. I'm guessing after the user Accepted the app from the Login Popup I need to start the session from within JavaScript? The problem is I can't figure out how....
$(".facebookButton").click(function(){
FB.login(function(response) {
if (response.authResponse) {
//User accepted the app -I need to start the SESSION here?
} else {
//User hasn't accepted the app.
}
});
});
Basically what I'm trying to achieve is for the site to know whether the user is logged in or not, even after they've refreshed the page. Thanks for the help!
When the user logs in using the JavaScript SDK, a cookie is immediately dropped on your site with their auth details. The dropped cookie can also be ready by the PHP SDK so all you need to really do is refresh the page for the PHP SDK to detect the user:
$(".facebookButton").click(function(){
FB.login(function(response) {
if (response.authResponse) {
// reload page
location.reload();
} else {
// User hasn't accepted the app.
}
});
});
For our mobile web application using the Facebook Javascript SDK, we want to check the user's login status, and then display the Facebook login dialog if necessary. The following code is run within a click handler for a given button in our web app:
$('#button').click(function() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// do something with the logged in and authorized user
} else if (response.status === 'not authorized') {
// logged in but has not authorized our app
} else {
// not logged in
FB.login();
}
});
});
Ensuring that the user is not logged into Facebook, this works fine and displays the login dialog for desktop web browsers when the button is pressed, but not for the mobile web (at least not for Android on a variety of browsers, I don't have access to an iPhone currently). Nothing appears on the mobile web app, and when I disable the popup blocker, then I get a prompt asking if I want to allow this popup, which works.
Does anyone know why the behavior is different and/or what the known/standard workarounds are? Thanks!
Your code will not work in all desktop browsers. Some browsers (mobile and desktop) block popups unless they are initiated by a user click. For example,
$('#mybutton').click(function() {
FB.login();
});
will work because the FB.login() function is only being called in response to the user's click. So to fix your code, replace the FB.login() call with some code that displays a 'login' button and text encouraging the user to click that button.
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.
On one of my websites, we have implemented the Login with facebook script. It was working fine till yesterday but suddenly there seems to be a problem with the script. If I am already logged in facebook, my website's page keeps on refreshing. If I log out of facebook then the refresh stops.
If this is facebook's script problem then I think there would be many other people who are facing this problem. Is any one here also facing this problem ?
please share and provide the solution if there is any.
Thanks
Ishan
We had the same issue and we started using Fb.getLoginStatus instead of FB.Login and redirected the users based on their status to the login page manually.
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
FB.api('/me', function (userDetails) {
LoadRegForm(userDetails);
});
} else if (response.status === 'not_authorized') {
Rediret to facebook oauth page
top.location.href = 'https://www.facebook.com/dialog/oauth?client_id=<%= ConfigurationManager.AppSettings["fbappid"] %>&redirect_uri=<%= ConfigurationManager.AppSettings["fbcanvasurl"] %>&scope=email,user_birthday,user_education_history';
} else {
// the user isn't logged in to Facebook.
top.location.href = 'https://www.facebook.com/dialog/oauth?client_id=<%= ConfigurationManager.AppSettings["fbappid"] %>&redirect_uri=<%= ConfigurationManager.AppSettings["fbcanvasurl"] %>&scope=email,user_birthday,user_education_history';
}
You can even call the FB.Login function in the two else blocks instead of the redirect.