Node API - How to link Facebook login to Angular front end?

Question

Rewriting this question to be clearer.

I've used passport-facebook to handle login with facebook on my site.

My front end is in Angular so I know now need to understand whats the correct way of calling that api route. I already have several calls using Angular's $http service - however as this login with facebook actually re-routes the facebook page can i still use the usual:

self.loginFacebook = function )() {
        var deferred = $q.defer();
            var theReq = {
             method: 'GET',
             url: API + '/login/facebook'
            };

            $http(theReq)
            .then(function(data){
              deferred.resolve(data);
            })

            return deferred.promise;
}

or is it perfectly ok/secure/correct procedure to directly hit that URL in a window location:

self.loginFacebook = function (){
    $window.location.href = API + '/login/facebook';
}

Furthermore, from this how do I then send a token back from the API? I can't seem to modify the callback function to do that?

router.get('/login/facebook/callback',
   passport.authenticate('facebook', {
      successRedirect : 'http://localhost:3000/#/',
      failureRedirect : 'http://localhost:3000/#/login'
   })
);

Thanks.

Answer 1

I was stacked on the same problem.

First part:

I allow in backend using cors and in frontend i use $httpProvider, like this:

angular.module('core', [
    'ui.router',
    'user'
    ]).config(config);

    function config($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        $httpProvider.defaults.headers.common['X-Requested-With'];
        $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
    };

The second part:

  <a href="/api/auth/facebook" target="_self" class=""><span class="fa fa-facebook"></span> Login with facebook</a>

This call my auth/facebook route that use passport to redirect to facebook page allowing a user to be authenticated.

If the user grant access, the callback /api/auth/facebook/callback is called and the facebook.strategy save the user with the profile data.

After saving the user, i create a special token with facebook token, id and email. This info is used to validate every time the user access to private states in the front.

My routes are something like this:

router.get('/facebook', passport.authenticate('facebook', 
    { session: false, scope : 'email' }));

// handle the callback after facebook has authenticated the user
router.get('/facebook/callback',
    passport.authenticate('facebook', 
        {session: false, failureRedirect: '/error' }), 
            function(req, res, next) {
                var token = jwt.encode(req.user.facebook, config.secret);
                res.redirect("/fb/"+token);
});

In frontend i catch the /fb/:token using a state and assign the token to my local storage, then every time the user go to a private section, the token is sent to backend and validate, if the validation pass, then the validate function return the token with the decoded data.

The only bad thing is that i don't know how to redirect to the previous state that was when the user click on login with facebook.

Also, i don't know how you are using the callback, but you need to have domain name to allow the redirect from facebook. I have created a server droplet in digitalocean to test this facebook strategy. In the strategy you have to put the real domain in the callback function, like this:

callbackURL: "http://yourdomain.com/api/auth/facebook/callback"

In the same object where you put the secretId and clientSecret. Then, in your application in facebook developers you have to allow this domain.

Sorry for my english, i hope this info help you.

Answer 2

Depending on your front-end, you will need some logic that actually makes that call to your node/express API. Your HTML element could look like

 <a class='btn' href='login/facebook'>Login</a>

Clicking on this element will make a call to your Express router using the endpoint of /login/facebook. Simple at that.