Parse Facebook Login not working in Ionic View

Question

I'm trying to get Parse.FacebookUtils.logIn to work on Ionic view, I have successfully been able to make it work when I hit ionic serve in my browser, but the problem is when I try to login using the Ionic View emulator, basically the authentication Facebook window doesn't pop up and I have no idea why.

I followed this documentation: https://www.parse.com/docs/js/guide#users-facebook-users

Everything works great in the browser just trying to make it work in Ionic view.

Any ideas ?

Answer 1

I gave up on Parse sdk with Ionic and started using another another plug-in using the documentation below:

http://ngcordova.com/docs/plugins/oauth/

https://github.com/nraboy/ng-cordova-facebook-example/blob/master/www/js/app.js

Here is the code I did to make it work with Parse:

$scope.fbLogin = function() {
            var result;
            $cordovaOauth.facebook('987971754588010', ['public_profile, user_birthday, email']).then(function(success) {

                $http.get("https://graph.facebook.com/v2.2/me", { params: { access_token: success.access_token, fields: "id,name,birthday,last_name,first_name,email,gender,picture.type(large)", format: "json" }}).then(function(result) {

                    $localstorage.setObject('fbData', result.data);

                    var expiration_date = new Date();
                    expiration_date.setSeconds(expiration_date.getSeconds() + success.expires_in);
                    expiration_date = expiration_date.toISOString();

                    var facebookAuthData = {
                        "id": result.data.id,
                        "access_token": success.access_token,
                        "expiration_date": expiration_date
                    };

                    Parse.FacebookUtils.logIn(facebookAuthData, {
                        success: function(user) {
                            if (!user.existed()) {
                                alert("User signed up and logged in through Facebook!");
                                $scope.openModal();
                            } else {
                                alert("User logged in through Facebook!");
                                $scope.syncFbData(null);
                            }
                        },
                        error: function(user, error) {
                            console.log('ERROR: ' + error);
                            var alertPopup = $ionicPopup.alert({
                                title: 'Error de autenticación de usuario',
                                template: 'El usuario canceló autenticación con Facebook o no autorizó permisos. '
                            });
                        }
                    });
                }, function(error) {
                    console.log('ERROR: ' + error);
                    var alertPopup = $ionicPopup.alert({
                        title: 'Error de conexión',
                        template: 'No se ha logrado establecer conexión con Facebook.'
                    });
                });
            }, function(error) {
                console.log('ERROR: ' + error);
                var alertPopup = $ionicPopup.alert({
                    title: 'Error de conexión',
                    template: 'No se ha logrado establecer conexión con Facebook.'
                });
            });
        };

        $scope.syncFbData = function (newUsername) {
            var fbData = $localstorage.getObject('fbData')
            var currentUser = Parse.User.current();
            if (newUsername) {
                currentUser.set('username', newUsername);
            }
            currentUser.set('nombre', fbData.first_name);
            currentUser.set('apellidos', fbData.last_name);
            currentUser.set('email',fbData.email);
            currentUser.set('fechaNacimiento', new Date(fbData.birthday));
            currentUser.set('imagenUrl',fbData.picture.data.url);
            currentUser.set('genero',((fbData.gender === 'male') ? 'Hombre' : 'Mujer') );
            currentUser.save(null, {
                success: function (response) {
                    $scope.closeModal();
                    $state.go('app.lista-cervezas');
                },
                error: function (response, error) {
                    console.log('ERROR: ' + error);
                    var alertPopup = $ionicPopup.alert({
                        title: 'Nombre de usuario invalido',
                        template: 'El nombre de usuario ingresado ya se encuentra en uso!'
                    });
                }
            });
        };