SPA AngularJS Authentication using Microsoft Azure Active Directory (ADAL)

The goal of this post is to add authentication to a single page application using a free subscription of Microsoft Azure Active Directory , for that we will use the Active Directory Authentication Library (ADAL) for JavaScript.

Microsoft also offers other versions of this library for Windows Phone, Android and iOS applications – all of them also open source.

You can find all the code of the sample application that we will write on my git hub. You can also see a running demo here.

To use the demo you can login with a guest account:

pass: Softwarejc123


  • Some details about our sample application
  • Azure: Create a Microsoft Azure Active Directory and add an Application to it
  • How to use ADAL to add Authorization to a AngularJS state
  • How to use ADAL to add Authorization to a WebAPI controller
  • Conslusion

Some details about our sample application

We will add authentication to a very simple application – a list of tasks to do. This application uses SignalR to notify all connected clients when a note was added/removed.

ToDO list - Application architecture

ToDO list – Application architecture

The user will be asked for his user and password when he tries to open a restricted section of the application and all request to the “Authorized” WebAPI controller will return a “401 Unauthorized” error if the user was not identified.

Azure: Create a Microsoft Azure Active Directory and Add an Application to it

We need a Microsoft Azure Active Directory, by default you should have one on your azure account. If you want to create a new one just open Azure > Active Directory and add it. Continue reading

AngularJS and SignalR

The goal of this post is to connect and use SignalR from AngularJS. All the code is available in GitHub.

All code is available here: GitHub Link

The application used in this post allows to add tasks to a collaborative list of tasks to do. The application displays a list with all the tasks pending to do and also allows to remove them from the list. SignalR will push the notification “newTask” and “taskDone” to all connected users.

Feel free to get the code from github and run the application in more than one place (different tabs in your explorer) to see how SignalR synchronizes all of them.

The simplicity of the application allows to focus on the goal of this post: SignalR and AngularJS.

This is a screenshot of the running application.

Screenshot of the signalR and angularJS app.

SignalR Hub

The first thing that we need is to configure the OWIN startup, we need this class in our project:

[assembly: OwinStartup(typeof(Startup))]
namespace AngularJS_SignalR
    public class Startup
        public void Configuration(IAppBuilder app)
            // SignalR

The signalR hub type is “INotesCallbacks”, this interface defines the callbacks that the hub can make to the connected clients.

    // Client callbacks
    public interface INotesCallbacks
        // Notify note added
        Task BroadcastNewNote(Note newNote);
        // Notify note removed
        Task BroadcastRemoveNote(int noteId);

The hub also implement the interface “INotesCalls” this interfaces defines the hub methods that clients can call.

    // Client calls
    public interface INotesCalls
        // Add note
        Task AddNote(string note);
        // Get all notes
        IEnumerable<Note> GetAllNotes();
        // Remove note
        Task RemoveNote(int roomId);

This is the implementation of the hub:
Continue reading

AngularJS – CRUD Data Grid III

The goal of this post is to extend the AngularJS CRUD Grid that we created in previous posts:

We will add now the following requirements:

  • # 1 Filter items.
  • # 2 Custom buttons: This will allow us to add button columns that will call the parent controller with the id of the button clicked and the associated item as parameter.


Code is available on github: Feel free to play with it, find errors and write improvements.

You can see a live demo here: AngularJS CRUD Grid III demo.


All items


Items containing the letter ‘c’


Custom buttons:


Button click, callback that shows a popup:



Continue reading

AngularJS – CRUD Data Grid II

The goal of this post is to extend the AngularJS CRUD Grid that we created in a previous post:  AngularJS – CRUD Grid I UPDATE:


Code is available on github: Feel free to play with it, find errors and write improvements. You can see a live demo here: AngularJS CRUD Grid III demo.

In that post we wrote a single page application (SPA) to display a list of items inside a grid. The grid allows all the CRUD operations: CreateRead, Update and Delete items. We will add now the following requirements:

  • # 1 Confirmation dialog before deleting an item.
  • # 2 Column ordering.
  • # 3 CRUD Grid as a directive
    • # 3.1 Dynamic columns generation.
    • # 3.2 Column options: Type, visibility, header, mandatory.
  • # 4 Cell editor directive, text and date mode. Use AngularJS date picker in date format columns


You can see a demo here: AngularJS CRUD Grid II demo. I will share the interesting code of the application in this post and one of my next steps will be to upload all the code to GitHub.

Running application

Angular JS CRUD Grid. Dynamic columns

Delete confirmation

Angular JS CRUD Grid. Delete confirmation

Date picker

Angular JS CRUD Grid. Date picker.


Continue reading

AngularJS – Controller code structure

The goal of this post is to define a structure to write AngularJS controllers.

I identify three different parts inside the controller:

  • Public methods and variables: On top of the code and just the definition of the methods, the implementation will be inside the private area.
  • Code that run when the controller is created. Right after the public methods.
  • Private methods and variables. Prefixed with ‘_’.

This is the structure schema of my controllers:

app.controller("myController", myController);
function myController() {
    'use strict';
    var self = this;
    //// ---------------- PUBLIC ----------------
    //// PUBLIC fields
    //// PUBLIC Methods
    //// ---------------- CODE TO RUN -----------
    //// ---------------- PRIVATE ---------------
    //// PRIVATE fields
    //// PRIVATE Functions - Public Methods Implementation	
    //// PRIVATE Functions

This is one of my controllers, a lot of code but someone interested only in its use and not in its implementation can easily read the ‘public’ area only : Continue reading