Blank screen with Mobile Web App and Facebook Connect

Question

I am building a web app that can open full-screen on iPhone and am following the code for Facebook mobile web, which can be found at: https://developers.facebook.com/docs/guides/mobile/web/

When I try to login using the Facebook login page, 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 the web app, I check the login status and try to get some user info, and it works fine.

I have seen others with the same here: blank white screen after FB login via web app?

It seems that somebody has identified a workaround, but I cannot get it to work. The code I am using is:

   function loginUser() {    
     FB.login(function(response) { }, {scope:'email'});    
     }

Others have indicated that I need to utilize the workaround here:

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

Does anyone know how to merge these pieces of code to get it to work?

Thanks!

Answer 1

The problem lies in the fact that the login window normally opens as a pop-up window. However, in (iOS) web apps this is not properly supported for some reason.

By providing a normal link instead of FB's own login btn script, the login process stays within the same window (including the redirect process!)

I hope this helps anyone...

<a href="https://www.facebook.com/dialog/oauth/?client_id=YOUR_APP_ID&redirect_uri=YOUR_REDIRECT_URL&state=YOUR_STATE_VALUE&scope=COMMA_SEPARATED_LIST_OF_PERMISSION_NAMES">LOGIN!</a>