Facebook Auth from within AngularJS Cordova/Phonegap app

[Chregan O'Flynn]

Hey

I have previously built an AngularJS mobile site that makes use the Strongloop Passport features to allow for Facebook login. That solution involved a browser redirect, which then redirected back to the mobi site when done.

I am now trying to get this working from within a Cordova mobile app, in which I obviously cant redirect back to a webpage?

Are there any examples of this process/flow?

If anyone could point me in the right direction here, I would very much appreciate it.

thanks

take care

Chregan

[Chregan O'Flynn]

Hey

I just thought I would post what I ended up doing:

in server.js:

app.get('/auth/account', ensureLoggedIn('/profile'), function(req, res, next) {
    // check if the user has a complete profile
    if(req.user != undefined && (req.user.mobile == undefined || req.user.mobile === "" || req.user.mobile == null)){

        // redirect them to the complete profile interface and pass the access token and user id
        res.redirect('/profile/#/register/fbcomplete/?access_token='+req.accessToken.id+"&user_id="+req.accessToken.userId);
    }else{
        // redirect them to the profile dashboard and pass the access token and user id

        res.redirect('/profile/?access_token='+req.accessToken.id+"&user_id="+req.accessToken.userId);
    }
});

Then on the client side (Cordova/AngularJs/Ionic Mobile App), I open the auth/facebook URL in an inappbrowser, and then setup an event listener for each of the possible final URLs

var socialLoginWindow = window.open('http://xxxxxxxxx/auth/facebook', "_blank", 'location=no,toolbar=yes');

// listen to page load events

socialLoginWindow.addEventListener('loadstart', function (event) {

    var url = event.url;

    var general_fail_url = "http://xxxxxxxxx/profile";

    var profile_url = "http://xxxxxxxxx/profile/?access_token=";

    var complete_registration_url = "http://xxxxxxxxx/profile/#/register/fbcomplete";

    var facebook_fail_url = "http://xxxxxxxxx/profile/#/login/?error=fblogin";

    if (url.substring(0, complete_registration_url.length) == complete_registration_url) {

        // .... get params from event.url ... //

        socialLoginWindow.close();

        // user has registered but needs to finish their profile

        if (params.access_token && params.user_id) {

            AppAuth.setTokenAndID(params.access_token, params.user_id.replace("#_", ""));

            $state.go('register-user', {step: 1});

        }

    } else if (url.substring(0, facebook_fail_url.length) == facebook_fail_url) {

        socialLoginWindow.close();

        $ionicPopup.alert({

            title: 'Sorry!',

            template: 'Login failed, please try again'

        });

    } else if (url.substring(0, profile_url.length) == profile_url) {

        // .... get params from event.url ... //

        socialLoginWindow.close();

        // user has registered successfully... get the user profile

        if (params.access_token && params.user_id) {

            AppAuth.setTokenAndID(params.access_token, params.user_id.replace("#_", ""));

            AppAuth.ensureHasCurrentUser(function (UserObj) {

                if (!UserObj || UserObj.firstName === undefined) {

                    $ionicPopup.alert({

                        title: 'Sorry!',

                        template: 'Login failed, please try again'

                    });

                } else {

                    $state.go('app.dashboard');

                }

            });

        } else {

            $ionicPopup.alert({

                title: 'Sorry!',

                template: 'Login failed, please try again'

            });

        }

    } else if (url.substring(0, general_fail_url.length) == general_fail_url) {

        $ionicPopup.alert({

            title: 'Sorry!',

            template: 'Login failed, please try again'

        });

    }

});

I am not sure if this is the correct way to do it at all. But it works for me :)

Hope this helps someone

take care

Chregan