FB.login broken flow for iOS WebApp

Question

I'm making an iOS Webapp (i.e. an HTML page that runs in standalone mode - none of the Safari chrome - when the bookmark of the page is added to the homescreen).

I have a button that onclick calls FB.login(). When in standalone mode, the webapp redirects to the facebook login page (as expected), however afterwards, I get stuck on a white screen (I don't get asked to authenticate since I already have, but I imagine that the authentication screen would happen before the white screen) and don't get put back into the webapp.

The same flow within the Safari app works as expected. Clicking login calls FB.login(), which opens a new page where you are asked to login to Facebook, once you login and authenticate the app, that page closes and you are put back into the original page.

It seems that in standalone mode, there's a problem with the "second page" with the FB login closing and redirecting back to the app (it doesn't). And the flow is broken.

Is there any sort of workaround for this?

Thanks,
-Esa

Answer 1

You can try the workaround below. It worked for me. In mobile, it redirects to client side authentication url.

var isMobile = false;
try {
    isMobile = (window.location.href == top.location.href && window.location.href.indexOf("/mobile/") != -1);
} catch (e) {}
if (!isMobile) {
    FB.login();
} else {
    var permissionUrl = "https://m.facebook.com/dialog/oauth?client_id=" + appId + "&response_type=code&redirect_uri=" + redirectPage + "&scope=" + permissions;
    window.location = permissionUrl;
    return;
}

Answer 2

I used the following to detect if I'm in home screen mode and do the right thing accordingly:

if ("standalone" in navigator && navigator.standalone) {
  var permissionUrl = "https://m.facebook.com/dialog/oauth?client_id=" + appId + "&response_type=code&redirect_uri=" + window.location + "&scope=" + app_permissions;
  window.location = permissionUrl;
} else {
  FB.login(
    function(response) {
      ...
    },
    {scope: app_permissions}
  );
}