background preloader

Deal with users authentication in an AngularJS web app

Deal with users authentication in an AngularJS web app
This post is meant to share some thought about the main issues related to the user’s authentication in an AngularJS web app. This post is about how to maintain, and recognize, the status of authentication of an user (that is, if he’s logged in, or not) between the different routes of a web application. Moreover it also explains how to handle the case of a not authenticated user, who is trying to access to a page, that requires the user to be logged in. Before going into the details of my approach, it is very important to clarify that, because the user has full controll of the browser, each control implemented with front end technologies, must (!) be repeated also in the backend. Recognize an authenticated user There are probably several ways to recognize an authenticated user; infact it’s possible to set a global variable, or create a cookie… but my favourite way to reach the objective is to use an AngularJS service. Are you wondering about how to use this service? Related:  AngularJS

Why does Angular.js rock? Let’s see if we can discover why :) Angular.js is a MV* (Model – View – Whatever) Javascript framework which is maintained by Google which excels in the creation of single-page-applications or even for adding some “magic” to our classic web applications. I could spend all the day writing about why you should try Angular.js in your new project, but I feel that it would be better if we see it in action. Data binding and scopes The first question that usually comes to mind is: Does it support data binding? Let’s see an example of Angular.js’ way of data binding: In this little piece of code, there are a few things to explain but before that, I want you to get familiarized with the code: Try it Insert your name: Echo: NOTE: Don’t worry too much about the ng-app thing at this moment. As you see, what we write in the input, is echoed after it. Ok, but where are we saving that user.name? Alright alright, that wasn’t hard, but…. The idea is something like: Let’s see a complex example: See it Hello, World

Form Validation: The AngularJS Way Good news first! Recently I started develop my first real AngularJS web app; it shouldn’t be nothing too complicated… I’m just planning to replace my old excel for family budget with a brand new AngularJS app. The registration view was one of the first views I made, when I started to work on this little project. This gave me the opportunity to learn a lot of thing about AngularJS, and in particular how AngularJS handles client side form validation (one of the topic that I usually less appreciate). In this post I will show how perform client side data validation with AngularJS. I will use both built-in directives, both custom directives. Client and Server side validation Before to start, just a question for you: How many times have you heard that client side validation is useless without server side validation? AngularJS directives for form validation AngularJS has many directives to run form validation. The simplest example Fullscreen demo. myForm.username1. myForm.email1. Fullscreen demo.

service or factory ? tl;dr is at the end In various AngularJS tutorials and documentation, the authors choose to use service or factory but don't explain why you would use one or the other. Few mention that value and constant are also options. Let's see why you would use one over the other. provider Here's the source for the provider method: function provider(name, provider_) { if (isFunction(provider_) || isArray(provider_)) { provider_ = providerInjector.instantiate(provider_); } if (! name is a string. provider_ can be one of three things: function If a function is passed in, the function is called with dependency injection and should return an object with a $get method. Whatever the second arg to provider is, you eventually end up with an object that has a $get method. // You can run this // Create a modulevar hippo = angular.module('hippo', []); // Get the injector (this happens behind the scenes in angular apps)var injector = angular.injector(['hippo', 'ng']); factory Here's the source: service value constant

Authentication with AngularJS Managing authentication within your AngularJS application is extremely important, initially I found it quite difficult to find some examples of how to do it the right way for my startup keeping the logic clean, and as automated as possible. Initially I just rolled some convoluted solution using the $rootScope to store variables, and then access those variables within my controllers, but it was messy, and created a lot of duplicate code. So I was pointed to an article on the subject (thanks @gdi2290) that had a better example of how to do this, but it wasn’t setup for ui-router, so I had to adapt it a little to work with it. First of all I adjusted my routes to the following: (note the addition of the authenticate property) Then, within my run function, I’m listening to the $stateChangeStart event, which fires each time you move within your application. angular.module("myApp") .run(function ($rootScope, $state, AuthService) { $rootScope.

Daniel Studds » Blog Archive Basic Angular front-end for authentication (SPA Part 3) » Daniel Studds Posted: May 7th, 2013 | Author: Studds | Filed under: Uncategorized | No Comments » This is the third part of a series of blog posts that will walk step-by-step through the process of creating a secure Single Page App (SPA) using node.js, passport.js, and Angular. If you’re new here, you should start at Part 1, where we set up Passport.js. Today, we’re going to get started with Angular. We’re just going to ease in to it: this is deliberately simplified. The complete series of posts will cover: Getting started with passport.jsAdding in usersHandling login, logout, and registration from a single page appAdding in robust remember-me functionalityProtecting against CSRFProtecting against XSSAdding a reasonably robust remember-me to passport jsEnhancing security by adding some simple HTTP headersSetting up to always redirect to SSLPushing our app to HerokuThrottling login attempts Let’s get started The code for this part is at: git clone node app.js

witoldsz/angular-http-auth Angular JS: Validating Form Elements in a Repeat How do I use Angular's form validation on these dynamically created elements? The common scenario is this, you have some ng-repeat creating inputs of some sort, and you need to validate them individually. The knee-jerk reaction is to try to dynamically add names to the input like name="test{{$index}}"... but that won't really work. So now what? ngForm directive! The ng-form directive allows for nesting forms that can be used for things like partial validation. <! So that's the idea in a nutshell.

Services Improve this doc While Angular offers several useful services, for any nontrivial application you'll find it useful to write your own custom services. To do this you begin by registering a service factory function with a module either via the Module#factory api or directly via the $provide api inside of module config function. All Angular services participate in dependency injection (DI) by registering themselves with Angular's DI system (injector) under a name (id) as well as by declaring dependencies which need to be provided for the factory function of the registered service. To register a service, you must have a module that this service will be part of. Using the angular.Module api: var myModule = angular . module ( 'myModule' , []); myModule . factory ( 'serviceId' , function () { var shinyNewServiceInstance ; //factory function body that constructs shinyNewServiceInstance return shinyNewServiceInstance ; }); Using the $provide service: Angular Service API

Google Maps for AngularJS

Related: