Why facebook login not working with phonegap on android?

Question

UPDATE:

I almost got it working. I needed to change js.src assignment from js.src = "//connect.facebook.net/en_US/sdk.js"; to: js.src="https://connect.facebook.net/en_US/all.js";

But now when I enter the login screen I have this error:

Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this url, add all domains and subdomains of your app to the App Domains field in your app settings.

I did just that but the same error is given. Any ideas?

I have an app where I made a facebook login using JavaScript SDK. The code works great on mobile browser and on desktop or laptop browsers, but when I install the app using phonegap I have the next error:

Uncaught ReferenceError: FB is not defined

Can anyone please help me with this?

I've read multiple threads on stack about this, but none of them seemed to make some light.

My code is this:

$(document).ready(function() {
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {
      return;
    }
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

  window.fbAsyncInit = function() {
    FB.init({
      appId: 'app_id_secret',
      xfbml: true,
      version: 'v2.7'
    });
  };
  // This is called with the results from from FB.getLoginStatus().
  function statusChangeCallback(response) {
    if (response.status === 'connected') {
      // Logged into your app and Facebook.
      getUserData();
    } else if (response.status === 'not_authorized') {
      // The person is logged into Facebook, but not your app.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this app.';
    } else {
      // The person is not logged into Facebook, so we're not sure if
      // they are logged into this app or not.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into Facebook.';
    }
  }

  function checkLoginState() {
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
  }

  $('.fb_login').on('click', function(e) {
    e.preventDefault();
    FB.login(function(response) {
      if (response.authResponse) {
        FB.api('/me', {
          fields: 'name, email, first_name, last_name'
        }, function(response) {});
      }
    }, {
      scope: 'email,public_profile',
      return_scopes: true
    });
  });
});

I've also found this link Can Facebook JS SDK work with Phonegap / Cordova? where someone asks almost the same question. There is suggested to use an cordova plugin. Is this a solution? If yes, which one of them is best?

Answer 1

There is a plugin called phonegap.facebook.inappbrowser, that I think it might help you.

You can find the plugin here.

First add the plugin script in your file head like this:

<script type="text/javascript" src="js/phonegap.facebook.inappbrowser.js"></script>

Then call it using your own custom parameters for app id, redirect url and permissions:

// Settings
FacebookInAppBrowser.settings.appId = '123456789';
FacebookInAppBrowser.settings.redirectUrl = 'http://example.com';
FacebookInAppBrowser.settings.permissions = 'email';

// Login(accessToken will be stored trough localStorage in 'accessToken');
FacebookInAppBrowser.login({
    send: function() {
        console.log('login opened');
    },
    success: function(access_token) {
        console.log('done, access token: ' + access_token);
    },
    denied: function() {
        console.log('user denied');
    },
    timeout: function(){
        console.log('a timeout has occurred, probably a bad internet connection');
    },
    complete: function(access_token) {
        console.log('window closed');
        if(access_token) {
            console.log(access_token);
        } else {
            console.log('no access token');
        }
    },
    userInfo: function(userInfo) {
        if(userInfo) {
            console.log(JSON.stringify(userInfo));
        } else {
            console.log('no user info');
        }
    }
});

Also, I saw that you want to get the first_name and last_name of the logged in user. The plugin doesn't have those set by default after login. But you can modify a variable in the plugin file called get_url. Change it from this:

var get_url  = "https://graph.facebook.com/me?fields=email,name,gender&access_token=" + window.localStorage.getItem('facebookAccessToken');

To this:

var get_url  = "https://graph.facebook.com/me?fields=email,first_name,last_name,name,gender&access_token=" + window.localStorage.getItem('facebookAccessToken');