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.
I put together a basic sample app file structure that simply allows a user to login and logout using Azure AD:
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
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
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.
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
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:
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!
I have uploaded the source code on GitHub, you can get it from here