In a previous example I showed how to secure an HTML5 application with Azure AD using JavaScript as the target programming language. However, the imminent release of AngularJS 2 also means that TypeScript is going to become more mainstream IMO. So if you have not tried TypeScript yet or are still on the fence about it then I suggest you continue to keep an open mind and try it out. The advantages of using a strongly typed language that transpiles to JavaScript are quite  compelling, especially as your code base gets larger and larger.

With that said, I wanted to see what it would take to secure a simple application using HTML5, TypeScript and Azure AD. As you will see, it is simpler than expected.

Setup

Folder Structure

I put together a basic sample app file structure that simply allows a user to login and logout using Azure AD:

Installing TypeScript

In order to compile TypeScript, you will first have to install it. If you have Visual Studio 2015 on your machine then you already have TypeScript installed. if not then installing TypeScript can simply be done by running the following, you guessed it, npm command:

npm install –g typescript

Once you have TypeScript installed, in order to “trasnpile” your code into JavaScript  in your application you have to add a tsconfig.json file to the root of your project. Inside the file the minimum configuration you need is this:

This just tells Visual Studio Code to transpile your TypeScript code into JavaScript by targeting the ECMAScript 5 specification. You can change this setting to target different versions of ES, but ES5 is what most modern browsers currently support, so it’s a safe bet.

Type Definitions

Since AngularJS 1.5+ was written in JavaScript, we need to provide TypeScript with the definition files for AngularJS. We do this by installing the Type Definition Manager using the following command:

npm install typings –-global

Once you have the Type Definition Manager installed, you run the following commands to install all of the type definitions you will need to run simple app using TypeScript:

tsd install angular —resolve —save

tsd install angular-route —resolve —save

tsd install adal-angular –resolve –save

The –resolve command argument will ensure that any dependencies for that library are also installed. In this case you will have dependencies installed by previous commands that satisfy the requirements for the rest of the libraries. So I am indicating that these are the commands to run just so it is more explicit on what is needed, however, any redundant dependencies will be ignored so running all of the above commands won’t hurt anything.

Configuring App For TypeScript

Now you just need to add a new file to configure your AngularJS file. Because of the specific syntax required to set this up, it is simpler to do this using JavaScript while keeping the changes in an app.tsd file, and since JavaScript is valid TypeScript this approach works perfectly:

Creating The Controller In TypeScript

The Home Controller will contain the simple logic needed to log in and out of the application using Azure AD by leveraging the ADAL JS angular library. This is the code that goes into the AngularJS/TypeScript home controller:

Following is the break down of this code file.

Dependency Injection

We inject the dependencies into the TypeScript class:

Exposing Methods To The View

We exposed the ADAL library’s functions to the view by simple adding methods:

Finish The Class Registration

We close the class registration with AngularJS by adding the following snippet at the bottom of the class:

It’s important to note that using the TypeScript extension (.tsd) and the type definitions gives us some nice intellisense which is much better than just simple word completion since we get access to actual things that exist in that library:

What is more, you can actually navigate to the type definitions and see the actual code implementation:

Pretty neat, don’t you think?

Running The App And Authenticating

Toggling Authentication

In order to test that the authentication is working, I added simple toggling logic so when the application starts and the user has not been authenticated yet, they will simply be greeted as a guest. However, if the user logs in and is authenticated, they will see a message that also displays their name as posted in their Azure AD domain:

Starting the Server

As you may recall, we can run the site locally by using the simple http-server  so now you can just right click on the index.html file from within Visual Studio Code and launch a command prompt and type this command to start the http-server:

http-server -S -C C:\Path_To_Your_Code\cert.pem -K C:\Path_To_Your_Code\key.pem -P [https://localhost/](https://localhost/) -p 44326

Running the App

When the app first launches, if the user is not authenticated then they will simply see a message like the following:

When the user clicks on the login button, this will in turn call the ADAL JS library behind the scenes and trigger the authentication dance with Azure AD. Once the user authenticates with Azure AD they will be redirected to the home page to be welcomed with a custom message:

Summary

Thanks to the ADAL JS library and type definition files, you can write a simple app to authenticate to Azure AD using TypeScript.

Until next time, happy TypeScripting!

Update:

I have uploaded the source code on GitHub, you can get it from here