Facebook login on mobile via Cordova/Angular/Ionic

Question

I'm working in a hybrid app to report potholes in our city. The user can register to the app in a classic way (fill forms) or via one of the social networks (facebook, gmail, twitter).

The system works through a server on rails and a mobile app as a client(ionic/angular)

On the server side we have solved this, the user can make sign up / sign in to the page in the way that they want.

But with have several problems with the app, the app does nothing when you make click to the button of "sign in via facebook"

this is the style it is organized.

app/
plugins/
    InAppBrowser
www/
    css/
    js/
        controllers/
            splash.js
            map.js
            tabs.js
        services/
            users.js
            notifications.js
        app.js
        utils.js
    lib/
        angular/
        ng-cordova-oauth/
        ngCordova/
        ionic/
    templates/
        map.html
        splash.html
        tabs.html
    index.html

The splash.js controller is in charge of making the login function.

angular.module('app')
.controller('SplashCtrl', function($scope, User, $state, $ionicPopup, $auth, $cordovaOauth) {
$scope.session_id = User.session_id;

$scope.facebookLogin = function() {
     alert("flag1");
    User.fbSignIn().then(function() {
         alert("flag2");
        User.fbGetData().then(function() {
             alert("flag3");
            User.fbAuth().then(function() {
                 alert("flag4");
                // Detect if it is a sign in or sign up
                if (User.username) {
                    console.log('Controller reports successfull social login.');
                    $state.go('tab.map');
                } else {
                    // Open finish signup modal
                    console.log('Contorller reports this is a new user');
                    $state.go('finish_signup');
                }
            }, function() {
                 alert("flag5");
                $ionicPopup.alert({
                    title: '<b>App</b>',
                    template: 'Credenciales no válidas, vuelve a intentar.',
                    okText: 'Aceptar',
                    okType: 'button-energized'
                })
            });
        }, function() {
             alert("flag6");
            // alert('Could not get your Facebook data...');
        });
    }, function() {
         alert("flag7");
        // alert('Could not sign you into Facebook...');
    });
}
})

I put some alert flags through the functions to see where the app get stuck. I can only see the 'flag1' alert on the phone.Then nothing happens

the controller communicates with the service users.js I put the code on pastebin because it's too long users.js service

The client must request an access token to the server and then compare in SplashCtrl if they got the token access the app redirects the user to tabs.html template that would be the main page.

The console server shows nothing. So the request application never communicates to the server. Eventhough the 'CLIENTS' and 'SERVER' variables are already declared in app.js

.constant('SERVER', {

url: 'https://rails-tutorial-denialtorres.c9.io'
  })
.constant('CLIENTS', {
  facebook: 'fb Api'
  });

I can only logging of the server if I put a username and password in a traditional way preview

I hope you can help me with this guys

regards and thanks!!

Answer 1

you try this ? http://ngcordova.com/docs/plugins/oauth/

I tested and work very well, easy to implement, and also you can parse the json with token (and use server side if you need)

Remember this work ONLY with real device, not with Ionic Serve.

In case you looking for custom facebook login (javascript), try this code :

facebookStatus = function() {

    var dfd = new jQuery.Deferred();

    FB.getLoginStatus(function(response) {

      if (response.status === 'connected') {
        dfd.resolve({status: response.status, token: response.authResponse.accessToken});
      } else if (response.status === 'not_authorized') {
        // the user is logged in to Facebook, //but not connected to the app
        dfd.resolve({status: response.status, token: false});
      } else {
        // the user isn't even logged in to Facebook.
        FB.login(function(response) {
          if (response.status=="connected"){
            var token = response.authResponse.accessToken;
            dfd.resolve({status: response.status, token: response.authResponse.accessToken});
          }
        }, {scope:'YOUR SCOPE HERE'});
      }

    });
    return dfd.promise();
  };

*Remember if you use this code, to add on index page the standard Facebook App details (something like)

<div id="fb-root"></div>
<script>

    window.fbAsyncInit = function() {
        FB.init({
            appId      : 'YOUR APP ID',
            status     : true, // check login status
            cookie     : false, // enable cookies to allow the server to access the session
            xfbml      : true  // parse XFBML
        });

    };

    // Load the SDK asynchronously
    (function(d){
        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        ref.parentNode.insertBefore(js, ref);
    }(document));

</script>

Answer 2

When I install the cordova plugin with add org.apache.cordova.inappbrowser The id for the plugin is cordova-plugin-inappbrowser and the ngcordova.js library is looking for org.apache.cordova.inappbrowser

Changing those lines on ngcordova.js solves the issue.