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.

Solution 1

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

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 :^)

Solution 2

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'});

Solution 3

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.

Comments

[fancy]

sagimann I LOVE YOU SO MUCH! It's hacky, and a work around but works for now!!!! Thank you so so much for finding/posting this bug has been killing me!

[fancy]

So this means I shouldn't use the login callback to handle the response. Since the page reloads it will always go to FB.getLoginStatus? I'm trying to do this now and it's not working out, FB.getLoginStatus never fires it's callback.

[fancy]

this lib makes me want to cry

[fancy]

Finally figured it out, FB.getLoginStatus is really really flakey for some reason. Thanks again!

[Jayson Ragasa]

also need a way to determin if the web application is running on desktop or mobile so you know when to use redirect_uri. ask google about it.. detectmobilebrowsers.com

[prakashapkota]

Not working on Chrome of IOS bug :stackoverflow.com/questions/16843116/…