Sunday 24 February 2019

Facebook login on mobile throwing error screen instead of login screen

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!



from Facebook login on mobile throwing error screen instead of login screen

No comments:

Post a Comment