Facebook login on mobile throwing error screen instead of login screen

Question

I'm registering users to my site via Facebook and have come across an issue on mobile. I'll start by saying i'm fairly new to the Facebook user login processes. The journey goes like so:

Firstly I call the fb.login function on click of a button to launch the facebook popup window for them to login like so:

jQuery(".welcome-cta-facebook span").on("click",function(){     
    FB.login(function(response) {
        if (response.authResponse) {
            getFbUserDetails();
        } else {
            console.log('User cancelled login or did not fully authorize.');
        }
    });
});

I then call the getFbUserDetails function once they have signed in and accepted the app like so:

function getFbUserDetails(){
    FB.api(
      '/me',
      'GET',
      {"fields":"id,name,picture{url},email"},
      function(response) {
          console.log(response);
          fbParameters = "?facebookID=" + response.id + "&facebookName=" + response.name + "&facebookEmail=" + response.email + "&facebookProfilePictureURL=" + response.picture.url;

          /* then send the fb parameters to my DB */
      }
    );
};

This journey works exactly as it should for desktop which is great but I encounter some problems with mobile which i'm unsure how to resolve:

• if the user is not logged into their mobile browser I get the following error:

not logged in: You are not logged in. Please login and try again

• if the user is logged in through their mobile browser I get the following error:

"URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings. Make sure Client and Web OAuth Login are on and add all your app domains as Valid OAuth Redirect URIs."

Not sure why i'm seeing these errors if it works fine on desktop. How can I get a smooth journey for collecting someone's details on mobile? I am correct in using this approach? Worth noting I am NOT using a facebook login button.

Thanks and appreciate the help I can get!

Answer 1

You need to add all URI in whitelisted fied for you Facebook App

Facebook Developers -> Settings -> Advanced -> Security

In Security block you will see 'IP allowed server'

Add all URI in this field