Authentication and Authorization Architecture in the MEAN Stack

3,731 views
3,397 views

Published on

Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca

Yuri will discuss the challenges of authentication and authorization in the MEAN stack. Topics include architecture, best practices for determining client and server responsibilities, and the importance of sharing authorization context with the client logic in order to build an effective user experience. Angular and Node code samples will be used to illustrate.

Presented live at FITC's Spotlight: MEAN Stack event held on March 28th, 2014

More info at FITC.ca

Published in: Internet
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,731
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
53
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Authentication and Authorization Architecture in the MEAN Stack

  1. 1. 5 Authentication Authorization Architecture in Browser Applications Yuri Takhteyev, rangle.io http://yto.io @qaramazov +
  2. 2. Authenticate, Authorize
  3. 3. Protecting clients from: outsiders each other themselves
  4. 4. Display and capture Authentication Business logic Storage Interaction logic Interaction logic AuthorizationServer Client
  5. 5. Display and capture Authentication Business logic Storage Interaction logic Authorization Business logic Authentication Authorization Authorization
  6. 6. Display and capture Business logic Storage Interaction logic Authorization Business logic Authentication Authorization Authorization :-( Authorization :-)
  7. 7. Who am I? Cookies vs tokens Maintaining the state
  8. 8. Passport Local Social / OAuth
  9. 9. Many Faces of Authorization By role or activity By resource instance Altogether custom
  10. 10. Bottlenecks
  11. 11. Setting Up an API Route var mapper = koast.makeMongoMapper(connection); routes = [ ['get', 'robots', user.any, mapper.get('robots', []) ], ['put', 'robots/:robotNumber', user.any, mapper.put('robots', ['robotNumber']) ] ];
  12. 12. Restricting Access by Object mapper.queryDecorator = function(query, req, res) { query.owner = req.user.username; }; mapper.queryDecorator = function(query, req, res) { query.clientId = req.user.clientId; };
  13. 13. Post-Query Filtering mapper.filter = function(result, req) { if (req.method === 'GET' { return canSee(data, req); } else { return canEdit(data, req); } };
  14. 14. Informing the Client mapper.clientAuthorizer = function(result, req, res) { result.meta.can.edit = canEdit(result.data, req); };
  15. 15. The Client Side angular.module('sampleKoastClientApp', ['koast']) .controller('myCtrl', ['$scope', 'koast', '$log', function($scope, koast, $log) { $scope.login = function(provider) { koast.user.initiateOauthAuthentication( provider); }; ...
  16. 16. The Client Side ... koast.user.getStatusPromise() .then(function() { if (koast.user.isAuthenticated) { return koast.getResource('robots') .then(function(robots) { $scope.robots = robots; }); } }) .then(null, $log.error); }]);
  17. 17. The Template <span ng-if="robot.can.edit"> <button>...</button> </span>
  18. 18. Thank You. Contact: yuri@rangle.io http://yto.io @qaramazov This presentation: http://yto.io/auth Koast: http://yto.io/koast
  19. 19. Image Credits by yewenyi by striatic by bible-history by dunechaser by nikhilverma Distributed under Creative Commons Attribution Share-Alike License, v. 2.0 by psd

×