Develop Reference

PWA blank page Facebook

I have a PWA app where one of the options you have to sign-in is Facebook, everything goes well and if you're in the browser the login works really well. The problem happens when you add the website to your mobile and it opens in PWA and you click log-in from Facebook it opens a blank page and it doesn't redirect to the app, if you close the page, go back to the app and click again facebook the user is logged in, but does anyone has any idea how to get rid of the white/blank page?
I have tried 'redirect_uri' and 'display: touch,' but none of this seems to be working anymore.

A blank page after login is a common problem when using Facebook as a sign-in method, especially when we’re in development mode.
It happens because you already logged in and authorized the app, so when it tries to log-in again, it goes blank.
The most straightforward way to fix this is first to check if the user has already logged in and authorized your app before calling the .login() function.
Luckily, Facebook provides a function to do it, where they handle (almost) everything for you.
The getLoginStatus() function
The getLoginStatus() functions determines 1) if a user is signed into Facebook and 2) if the user has already authorized your app.
There are three possible states for a user:
The user is logged into Facebook and has authorized your app, in this case, the function will return: connected.
The user is logged into Facebook but has not authenticated your application, in this case, the function will return: not_authorized.
The user is either not logged into Facebook or explicitly logged out of your application, in this case, we don’t know which one is it, that’s why it returns: unknown.
For example:
When we call getLoginStatus() we’ll get an object similar to this:
{
authResponse: {
userID: '12345678912345',
accessToken: 'kgkh3h4gkh3g4k2h4gk23h4gk2h34gk234gk2h34AndSoOn',
session_Key: true,
expiresIn: '5183738',
sig: '...'
},
status: 'connected'
}
There you can see there’s an authResponse object and a status object. We’ll focus on the status object first, checking for each of the three possible responses.
this.facebookProvider.getLoginStatus(response => {
if (response.status === 'connected') {
// User Authenticated and your App is authorized
} else if (response.status === 'not_authorized') {
// User authenticated but your app isn't authorized yet.
} else {
// the user isn't logged in to Facebook.
}
});
Try this and try to logout first from Facebook before you make call from PWA.

Facebook login is not working In-app browser for iOS

I'm using following script for login using Facebook JavaScript API.
var permissions = [
'email',
'user_friends'
].join(',');
FB.login(function (response) {
// if login was successful, execute the following code
if (response.authResponse) {
//Perform next set of methods
}
}, {scope: permissions});
This is working in all browsers and in Android (this script is rendering inside an iframe).
But when a user open the login page in Facebook In-app browser for iOS, then the login is not working. Popup is not showing.
After spending some time to fix this, the issue is happening only when I include the login page in an iframe.
Anyone experienced the same issue?

I experienced this issue. You need to use FB.getLoginStatus then if the user is not logged in, use FB.login. Just make sure to call FB.login after user click or else you will get a popup blocked.

Facebook Graph API won't return email address

Edit: Not Duplicate, because:
I have the permission
Debugged the token
Code works with test user
Please don't mark as duplicate without reading.
I'm trying to get the user e-mail address, but i don't get it. On graph api explorer, when i hit send, email field becomes grayed and says that:
field is empty or disallowed by access token
But when I debug the token it has email permission granted
My profile has an e-mail address.
Update: I tried https://developers.facebook.com/tools/console/ . My profile returns nothing, even on another computer. But the same code returns the email, name and uid of another account.
Code:
<fb:login-button scope="email">
Grant Permissions to make more examples work
</fb:login-button>
<button onclick="doPost()">Post to Stream</button>
<script>
function userData() {
FB.api('/me?fields=name,email', Log.info.bind('/me callback'));
};
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
userData();
}
});
</script>
It is possible to lockdown you e-mail so no one can has it? Even when i grant permission?

The Marcus' answer leads me to the real problem I was facing.
Debugging with the Facebook Explorer tool I was able to figure out that I should set the email scope at the FB.api() method after a successful login.
FB.login(function(response) {
if (response.status === 'connected'){
FB.api('/me?fields=id,email,name', function(data) {
console.log( data.email ) // it will not be null ;)
})
}, {scope: 'email'});
It is not quite clear at the Quickstart guide and I hope it helps someone else, too.

I had the same problem and I think I found out why:
If the user has an unconfirmed email in Facebook (i.e. Facebook sent him a validation mail to his email address but he didn't respond) Facebook WILL NOT pass that email to your app even if he gave you the email permissions (!!!).
So what I did is use his Facebook email if he has a user name (i.e. userName#facebook.com).

After i got my bug report marked as duplicate, and i read all posts and links there, i got what caused this problem for me and how to fix.
The Problem
Facebook seems to sometimes forget what your primary e-mail is on the graph API (But it still there in the preferences.)
Solution
The user affected must remove the e-mail, save settings, then re-add the address, re-confirm, then make it primary. This fixed my account both on my sandbox app, and other apps where Facebook login don't used to work.

New facebook graph requires scopes added in the /me request as follow:
/me?fields=email,birthday,location,locale,age_range,currency,first_name,last_name,name_format,gender&access_token=

I had the same issue while I was developing the fb login button for my site. I had even setup permissions for my app here:
https://developers.facebook.com/apps/<my-app-ID>/permissions
and it was working fine for certain initial cases, that is, it was giving email (i tested it on my own account and it was giving my email). Then suddenly it started to reflect no email at all. After two hours of browsing, I figured it out that there was an issue with the access token as when I went on this link:
https://developers.facebook.com/tools/explorer/<your-fb-id>/?method=GET&path=100002451127858%3Ffields%3Did%2Cemail
Update your-fb-id with your id and go to the above link. Click on 'Get Access Token'. In the tab that opens up, click on 'Extended Permissions' and in that, choose 'email' and submit. Now, test your query again. It'll definitely work, on the console as well as your website. Cheers! :)

This is a known bug. If the user does not have any email address set to primary, the query will return null for email. Set the email address for your account to primary https://www.facebook.com/settings?tab=account&section=email&view and then try.
Source: https://developers.facebook.com/bugs/298946933534016/

How to get facebook cookie? (javascript)

I'm using javascript for the facebook login, and for posting action.
The problem is, if I login on facebook on the page A, I cannot post on a page B because I lost all the facebook information and I have to re-init and to re-log on facebook for posting on a other...
and I would like have a login page, and after the user could navigate on the website and post from any page.
Is there a way to fix that by using the cookie? or anything else? I looked for getting back but cookie but I still not find out how...
Thanks

You'll want to persist the Facebook authentication token somewhere, such as a database. Then, using the javascript API to check if the user is logged in:
window.fbAsyncInit = ->
FB.init(appId: '<%= ENV["FACEBOOK_APP_ID"] %>', cookie: true)
$('#sign_in').click (e) ->
e.preventDefault()
FB.login (response) ->
window.location = '/auth/facebook/callback' if response.authResponse
There are several moving parts to a Facebook web app, including client and server authentication. You should check out this Railscast which very thoroughly describes the process:
http://railscasts.com/episodes/360-facebook-authentication
and you can even pull source code: http://media.railscasts.com/assets/episodes/sources/360-facebook-authentication.zip

Facebook login without pop-up?

I'm trying to make a simple facebook app, but for the authorization, it seems that it's always blocked by a popup-blocker. My code is thus:
FB.init({
appId : THEAPPPIDDDD,
status : true,
cookie : true,
xfbml : true,
});
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
FB.logout(function(response) {
console.log('Logged out.');
});
});
} else {
console.log('User did not authorize.');
}
});
Any help would be greatly appreciated... thanks

I aware that this question is a possible duplicate of another question: Stop the facebook popup blocker I am reposting this to help Dave Zhang. I have adapted this code for one of my site. In the following code, replace the YOUR_APP_ID and your website url, then the Facebook login will be popup-less.
//Javascript
var uri = encodeURI('http://example.com');
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
window.location.href=uri;
} else {
window.location = encodeURI("https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri="+uri+"&response_type=token");
}
});
This will just redirect directly instead of opening a pop-up.

You should initiate your login code on click of some button. As a good practice while dealing with FB, the login process should always be initiated by user.
Call your code on click of a button and it should FIX your problem.

to avoid doing the login via a popup, you should kick off the authentication at the server side

Small update for this old question which I found very useful, I was keep getting error which the domain is not allowed and it was allowed:
Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings.
so, after small research I discovered you have to change your facebook app setting to allow such navigation:
enforce HTTPS
Use Strict Mode for redirect URIs
Embedded Browser OAuth Login (In case you use app webview)

The popup blocker will always initiate if the Popup action did not originate in an event caused by a user. For example, if you try and do a popup on a load event, the browser will most likely use the popup blocker. On the other hand, if you trigger the popup on a click event or keydown event, it is less likely that the popup blocker will be triggered.
You could also employ a method that has your application detect whether or not the popup was blocked. You can read more about that here.
As mentioned in other answers, if you'd rather do the authentication process without popups at all, you would need to handle this at the server side using OAuth.