blank white screen after FB login via web app?

Question

I have tried following the FB mobile web "getting started guide" at: https://developers.facebook.com/docs/guides/mobile/web/ for a web app that I open full-screen on my iphone.

but when I try to login using the fb login page that opens up, I get a blank white screen after I click the "login" button. The user IS logged in though.. I know this because if I close and reopen my web app, I check the login status and try to get some user info, and it works fine...

When I try the same web app in my desktop's chrome or my iphone's safari, the login process is ok... it break only from within the full screen web app.

any ideas?? I'm merely following the sample code from FB :-(

thanks.

Answer 1

All you need to do is adding " display:'touch' " and redirect_uri parameters to the login as :

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 + '.');
       FB.logout(function(response) {
         console.log('Logged out.');
       });
     });
  } else {
    console.log('User cancelled login or did not fully authorize.');
  }
}, {scope: 'email,publish_stream' , redirect_uri: 'YOUR_REDIRECT_URL' , display : 'touch'});

Answer 2

I found a better answer on this post: FB.login broken flow for iOS WebApp

var permissions = 'email,publish_stream,manage_pages,read_stream';
var permissionUrl = "https://m.facebook.com/dialog/oauth?client_id=" + m_appId + "&response_type=code&redirect_uri=" + encodeURIComponent(m_appUrl) + "&scope=" + permissions;
window.location = permissionUrl;

Mark's answer above doesn't work anymore... Facebook tend to break things often like this. Showing the login page using window.location does the trick.

My app required a refresh after my login, so it worked out great. So you might have to rethink your flow if you don't want refresh.

Answer 3

I have found a workaround to the issue... seems there is an undocumented 'redirect_uri' attribute I can use in the login() method, eg

login({scope:'email', redirect_uri:'where_to_go_when_login_ends'})

It IS documented for fb desktop SDKs, so I gave it a go and it sort of works. When I say "sort of", I mean that on web mobile, it seems ok, but if you try to run it in a desktop browser, the login popup will redirect to the given url within the login popup - not within its parent window.

I hope this is good enough and does not cause any side effects, I really can't tell. But this is what I'll use in the meantime for lack of other options :^)

Answer 4

This could be a bug in facebooks API. I don't think they've tested their API in iPhone web app mode. Issue can be followed here: https://developers.facebook.com/bugs/317323871621290