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:

user: guest@softwarejc.onmicrosoft.com
pass: Softwarejc123

Agenda

• 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

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 →