AngularSDK + Loopback-Passport

[Carlo di Celico]

Has anyone successfully wired up lbServices.js (generated by the AngularSDK) with Loopback-Passport? I'm wondering specifically if it's possible to authenticate users using third-party services via REST calls through lbServices the way you can with regular e-mail-based logins/signups or if I would need to create my own REST endpoints like I would in vanilla Express?

[Michael Lee]

I am also struggling with this. Since the facebook/google login is not done by REST calls, how can Angular pick up the authentication state? It would be great if somebody can update the loopback-example-access-control with loopback-passport support.

[Sven Woldt]

I agree on that point something should be done about that 

Op zaterdag 28 juni 2014 18:15:35 UTC+2 schreef Carlo di Celico:

[Damien Galan]

It works well with Loopback-passport, follow the instructions. i did it for twitter, facebook, google.

[Michael Lee]

The loopback-example-passport currently doesn't use Angular.

I have figured out how to use Angular with loopback-component-passport. I borrowed the good bits from loopback-example-passport and loopback-example-access-control. You won't need any other REST endpoints. You can simply continue to use the '/auth/facebook', '/auth/google', '/auth/twitter' links. 

First, on your server side, set up '/auth/account' to simply return the json of the user+social profile. 

var ensureLoggedIn = require('connect-ensure-login').ensureLoggedIn;

app.get('/auth/account', ensureLoggedIn('/'), function(req, res, next) {

  res.send(req.user);

});

The above assumes single page app. So the login page is at '/'. 

Upon successful social login, Loopback will return you a cookie "access_token". So the idea is to have Angular check for the cookie, retrieve the Loopback user id from '/auth/account', and set the AppAuth and LoopBackAuth structures as in loopback-example-access-control.

Modify your Angular controller like this:

angular.module('starter.controllers', ['starter.services'])

.controller('AppCtrl', function($scope, User, $location, AppAuth, $cookies) {

    if (AppAuth.currentUser === null) {

      if ($cookies.access_token) {

        $scope.currentUser =

          AppAuth.currentUser = { id: 'social' };

      }

    }

    AppAuth.ensureHasCurrentUser(User);

    $scope.currentUser = AppAuth.currentUser;

Then modify your ensureHasCurrentUser function like this:

angular.module('starter.services', ['lbServices'])

  .factory('AppAuth', function() {

    return {

      currentUser: null,

      ensureHasCurrentUser: function(User) {

        if (this.currentUser) {

          if (this.currentUser.id === 'social') {

            this.currentUser = User.getAccount(function() {

              // success

            }, function () {

              console.log('User.getAccount() err', arguments);

            });

          } else {

            console.log('Using cached current user.');

          }

        } else {

          console.log('Fetching current user from the server.');

          this.currentUser = User.getCurrent(function() {

            // success

          }, function(response) {

            console.log('User.getCurrent() err', arguments);

          });

        }

      }

    };

  });

Finally, modify your lb-services.js to add the User.getAccount method:

        "getAccount": {

          url: "/auth/account",

          method: "GET",

          interceptor: {

            response: function(response) {

              if (response.data.id) {

                LoopBackAuth.currentUserId = response.data.id;

                LoopBackAuth.accessTokenId = $cookies.access_token.substring(2, 66);

              }

              if (LoopBackAuth.currentUserId === null) {

                delete $cookies["access_token"];

                LoopBackAuth.accessTokenId = null;

              }

              LoopBackAuth.save();

              return response.data;

            }

          }

        },

The above should set up for Angular to continue using the access_token for subsequent Loopback REST API requests.

To logout properly, also modify the User.logout method in lb-services.js to delete the cookie:

        "logout": {

          url: urlBase + "/users/logout",

          method: "POST",

          interceptor: {

            response: function(response) {

              LoopBackAuth.currentUserId = null;

              LoopBackAuth.accessTokenId = null;

              LoopBackAuth.save();

              delete $cookies["access_token"];

              return response.resource;

            }

          }

        },

Hope the above info helps someone.

On Saturday, June 28, 2014 9:15:35 AM UTC-7, Carlo di Celico wrote:

[Martin Alix]

FYI I created a git repo to test all this out:

https://github.com/malixsys/ionic-loopback-example

[Raymond Feng]

Martin, thank you for sharing.

Thanks,

---

Raymond Feng

Co-Founder and Architect @ StrongLoop, Inc.

StrongLoop makes it easy to develop APIs in Node, plus get DevOps capabilities like monitoring, debugging and clustering.

--
You received this message because you are subscribed to the Google Groups "LoopbackJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to loopbackjs+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Johannes M]

That's super helpful. Thanks sharing Michael and Martin!

[Simon Šander]

Michael thanks for this: $cookies.access_token.substring(2, 66); helped me a lot!

[Gian Olivieri]

Great!... this is working like a charm.

Have someone succefully linked the account to an authorized user?

as in using the /link/twitter???

don't really know what I have to modify... :(

[Gian Olivieri]

Ok, I think I know where is the error,

in passport-configurator.js... around line 306

    case 'oauth':

    case 'oauth1':

    case 'oauth 1.0':

      passport.use(name, new AuthStrategy(_.defaults({

          consumerKey: options.consumerKey,

          consumerSecret: options.consumerSecret,

          callbackURL: callbackURL,

          passReqToCallback: true

        }, options),

        function(req, token, tokenSecret, profile, done) {

          if (link) {

            if (req.user) {

req.user is empty :(

[Gian Olivieri]

Ok, I think I getting somewhere (also... I'm really new to node, sorry)

If I do a call to User.login() then /auth/account would give me 401.

But if I do a POST to /auth/local outside of the angular app /auth/account would work as expected 

[Alex Megalokonomos]

Is there a working example of this anywhere?

I've been trying to implement it based on Michael's code snippets but I can't quite get it right.