background preloader

Cookies vs Tokens. Getting auth right with Angular.JS

Cookies vs Tokens. Getting auth right with Angular.JS
Introduction There are basically two different ways of implementing server side authentication for apps with a frontend and an API: The most adopted one, is Cookie-Based Authentication (you can find an example here) that uses server side cookies to authenticate the user on every request.A newer approach, Token-Based Authentication, relies on a signed token that is sent to the server on each request. Token based vs. The following diagram explains how both of these methods work. What are the benefits of using a token-based approach? Cross-domain / CORS: cookies + CORS don't play well across different domains. What's JSON Web Token? Asuming you have a node.js app, below you can find the components of this architecture. Server Side Let's start by installing express-jwt and jsonwebtoken: $ npm install express-jwt jsonwebtoken Configure the express middleware to protect every call to /api. The angular app will perform a POST through AJAX with the user's credentials: Angular Side What's next? Bottom Line

ryanfitz/hapi-auth-jwt Yeoman - Modern workflows for modern webapps Token-based Authentication with Socket.IO Introduction Authentication in realtime frameworks can be challenging. Perhaps this is because the way these systems work is quite different from a regular web app. This first diagram shows this common misconception: It is a common misconception that a user who is authenticated in the hosting web appliction, is also authenticated in the socket stream. Cookie-based and Token-based Auth There are two ways of solving this problem: the traditional cookie-based approach or a token-based approach. In our previous article, we wrote about the benefits of a token-based architecture: Cookies vs Tokens. Coupling: the first issue when using cookies is that you have to couple the web application authentication mechanism with the socket server authentication. Authenticating Sockets using Tokens By now you should not be surprised if we proposed a different alternative to cookies: using tokens. Server Side Code speaks by itself. Then the socket.io server Client Side

EaselJS | A Javascript library that makes working with the HTML5 Canvas element easy. Recent Updates Follow @CreateJS November 2014 Updates in preparation for next release (coming soon).New class model, with big performance increases October 2014 Lots of bug fixes and pull requests.New 'Extras' folder in GitHub with useful tools and classes July 2014 Major overhaul of Graphics to include a useful command pattern, and a big performance increase.Added Graphics.store() / unstore() The Story Why we built EaselJS About EaselJS EaselJS provides straight forward solutions for working with rich graphics and interactivity with HTML5 Canvas. Featured Projects Community Show & Tell. Ion Drift A port of the Flash game Ion Drift, b10b was able to build a CreateJS version in less than a day that hit target framerates on even the lowest devices, and outperformed ports to other libraries. By b10b b10b

10 Things You Should Know about Tokens Couple weeks ago we published a short article about cookies vs tokens in the context of single page applications, in particular applied to AngularJs apps. It seems the community is interested in this topic, so we published a second article on token based authentication in realtime frameworks like socket.io. There is a great interest in this subject so we decided to continue with an article that explores in more detail some of the most common questions around token-based authentication. 1. In the context of tokens being used on single page applications, some people have brought up the issue about refreshing the browser, and what happens with the token. If you are wondering "but if I store the token in the cookie I'm back to square one". 2. Tokens have an expiration (in JSON Web Tokens is represented by exp property), otherwise someone could authenticate forever to the API once they logged in at least once. Cookies can be destroyed after the browser is closed (session cookies). 3. 4. 5.

Jason Dobry : Building large apps with AngularJS New to AngularJS? Confused by directive mumbo-jumbo? Giddy over Angular's magic and your new productivity? Jaded by gotchas you didn't see coming? Check out my presentation on building large apps with AngularJS Whatever your experience with Angular and whatever size of project you're working on, there will come a day when you encounter Angular in the wild being used on a large project. If you have needed to: Organize your filesName your filesLazy-load your codeSerialize application state to the URLDerive application state from the URLManage a Model layerDo smart cachingWork with a RESTful interface (for real)Use a 3rd-party lib with Angular Then you've already met the beast. Angular is not the framework to end all frameworks, however, never before have I derived so much pleasure from web development. My first few weeks with AngularJS I was like a kid on Christmas morning, unwrapping presents as fast as I could and running around showing everybody. Your services own your data: $scope. $scope.

Easily index your Single Page Application thanks to PhantomJS ยค Vickev Google provides a way to index your Single Page Application (SPA), built with Angular.js, Backbone.js, or other Javascript framework (ember.js, knockout.js, and others). In this article, we will first see together how it proceeds, the amount of work that the webmaster has to do, and then we will come up with an automatic solution. All along this article, I will introduce tools and examples of this website, vickev.com (which is built with Angular.js and Node.js), to prove the relevance of the method. The magic of Google crawl Google perfectly indexes websites, but without executing any javascript code. If the website is well-done, it should display the information, no matter if the javascript is enabled or not. However, in the case of SPA, the foundation is based on Javascript. So, Google came up with a solution for developers. If it is not clear (I'm not sure it is, actually), please consult the official guide, which is pretty clear in my opinion. Try it yourself! We will have this result:

AngularJS ngAnimate: Tutorial - How to make Animations with AngularJS Closure Tools What is the Closure Compiler? The Closure Compiler is a tool for making JavaScript download and run faster. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. How can I use the Closure Compiler? You can use the Closure Compiler as: An open source Java application that you can run from the command line. To get started with the compiler, see "How do I start" below. What are the benefits of using Closure Compiler? Efficiency.

Related: