This sample shows how to create a single page application (SPA) that uses Azure Active Directory (AAD) authentication with adal.js and uses an ASP.NET WebAPI with AAD.

The source code for this sample can be found in the angular2-adaljs-webapi GitHub repository.

Set up the applications

  1. Create an Angular application.
    I’ve started from the Angular QuickStart seed to bootstrap an easy to use SPA.
  2. Create a WebAPI application.
    I’ve started in Visual Studio by creating a new ASP.NET Web Application, using the Empty template with Web API folders and core references added to it.

Implementing the WebAPI

I’ll setup the WebAPI first to provide data to the SPA without any authentication

  1. Create a model 
    public class Message
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Body { get; set; }
    public string Author { get; set; }
    public DateTime PublishedAt { get; set; }
}
  2. Create a WebAPI 2 controller 
    public class MessageController : ApiController
{
    private IList<Message> _messages = new List<Message>()
    {
        new Message { Id = 1, Title = "Lorem ipsum", Body = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", PublishedAt = DateTime.Now},
        new Message { Id = 2, Title = "Pellentesque convallis", Body = "Pellentesque convallis finibus erat, sed lacinia eros mattis quis.", PublishedAt = DateTime.Now},
        new Message { Id = 3, Title = "Maecenas scelerisque", Body = "Maecenas scelerisque pretium risus, eu gravida elit porttitor id.", PublishedAt = DateTime.Now}
    };

    public IHttpActionResult Get(int id)
    {
        var message = _messages.FirstOrDefault(m => m.Id == id);

        if (message == null)
        {
            return NotFound();
        }

        return Ok(message);
    }
}

This result in a WebAPI that can be consumed like this:

Implementing the Angular single page application

The SPA will consume the WebAPI I’ve created before and show the data on the screen. I will try to follow at least a few of the standards and best practices in Angular development. But bear in mind that this application is not meant to serve as a sample application as such.

  1. Create a model to represent your data 
    export class Message {
    Id: number;
    Title: string;
    Body: string;
    Author: string;
    PublishedAt: Date;
}
  2. Create a service that consumes the WebAPI 
    import { Injectable } from '@angular/core';
import 'rxjs/add/operator/toPromise';
import { Http } from '@angular/http';
import { Message } from './message';

@Injectable()
export class MessageService {
    private messageUrl = 'http://localhost:50071/api/';

    constructor(private http: Http) {}

    getMessage(id: number): Promise<Message> { 
        return this.http.get(this.messageUrl + 'message/' + id)
            .toPromise()
            .then(response => response.json() as Message)
            .catch(this.handleError);
    }

    private handleError(error: any): Promise<any> {
        console.error('An error occurred', error); // for demo purposes only
        return Promise.reject(error.message || error);
    }
}
  3. Create a component to call the service and display the data 
    import { Component } from '@angular/core';
import { Message } from './message'
import { MessageService } from './message.service';

@Component({
    selector: 'message',
    template: `<div *ngIf="message; else noMessage">
        <h2>{{message.Title}}</h2>
        <div>{{message.Body}}</div>
        <br />
        <div><label>Author: </label>{{message.Author}}</div>
        <div>{{message.PublishedAt | date:'fullDate'}}</div>
    </div>
    <button (click)="getMessage()">Get message</button>`
})
export class MessageComponent {
    messageId: number;
    message: Message;

    constructor(private messageService: MessageService) {
        this.messageId = 0;
        this.message = null;
    }

    getMessage() {
        this.messageId = Math.floor((Math.random() * 3) + 1);;
        this.messageService.getMessage(this.messageId).then(m => this.message = m);
    }
}
  4. Add routing and declarations to the Angular app.
    This is what my app.module.ts looks like:

    import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { AppComponent }  from './app.component';
import { MessageComponent } from './message.component';
import { MessageService } from './message.service';

var routeConfig = [
  {
    path: 'messages',
    component: MessageComponent
  }
];

@NgModule({
  imports: [BrowserModule, RouterModule.forRoot(routeConfig), HttpModule ],
  declarations: [ AppComponent, MessageComponent ],
  providers: [ MessageService ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

    And this is what my app.component.ts looks like:

    import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<a routerLink="/">HOME</a> <a routerLink="messages">Messages</a>
    <h1>Hello {{name}}</h1>
    <router-outlet></router-outlet>`
})
export class AppComponent { 
  name = 'Angular'; 
}

Enable CORS to allow cross origin web requests

As the Angular application and the WebAPI are served from different hosts, we need to explicitly allow the SPA to consume data from the WebAPI. We do this by enabling CORS in the WebAPI and allow requests originating from the SPA.

  1. Add the CORS package to the WebAPI 
    Install-Package Microsoft.AspNet.WebApi.Cors
  2. Enalbe CORS in WebApiConfig.cs 
    public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        config.EnableCors();

        // Web API configuration and services

        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}
  3. Allow GET request coming from the SPA to the controller 
    [EnableCors(origins: "http://localhost:3000", headers: "*", methods: "get")]
public class MessageController : ApiController
{

Add Azure Active Directory Authentication to the Angular SPA

I’ve already described how to add AAD authentication to an existing Angular 2 application in a previous blog post Add Azure Active Directory to an existing Angular 2 Single Page Application. I will follow the steps outlined there. This is in short how this is done:

  1. Configure the app to use SSL
  2. Register the application in Azure Active Directory
  3. Configure it to use OAuth2
  4. Implement and configure adal.js
  5. Add login and (optionally) logout functionality to your app that logs in to AAD
  6. Add a route guard to protect routes from unauthorized access and force AAD authentication

I’ve now created an Angular2 SPA that requires Azure Active Directory authentication (in some parts of the application), and that consumes a WebAPI, which not yet requires authentication.

Set up the WebAPI to require authentication

Next step is to set up the ASP.NET WebAPI to require authentication on the service the Angular2 SPA is consuming. This step is also already described in a previous blog post. You can read it here: Add Azure Active Directory to an existing ASP.NET MVC web application.

I am using Visual Studio 2017, so the easiest way for me to add Azure Active Directory authentication is by right-clicking on the Connected Services item in the project

  1. Right-click on the Connected Services item and select Add Connected Service
  2. From the list of connected services select Authentication with Azure Active Directory to configure single sign-on in your application
  3. On the introduction screen of the wizard click Next
  4. On the next screen enter your Domain (tenant) and an App ID URI
    If your WebAPI wasn’t already configured to use SSL, the wizard will do that for you.
  5. Optionally you can click Next to enable Directory access, so the application can read profile information from AAD
  6. Click Finish and the wizard will make the necessary changes to your code like adding Owin middleware, packages the Authorize attribute to the controllers, configure authentication

Tie the ends together

Now with both a WebAPI and a SPA configured to require Azure Active Directory, all I have to do is have them work together. I do this by telling the Angular2 SPA to send a JSON Web Token with every request sent to the WebAPI.

  1. Add the angular2-jwt libraries to the Angular2 SPA
    npm install angular2-jwt --save
  2. Have the route guard acquire the token for the logged in user and store the token in the localStorage. Therefore it needs the App ID URI from the WebAPI service. You can find this in the Azure Portal.
    Add this App ID URI to your AdalJs settings.

    import { Injectable } from '@angular/core';
@Injectable()
export class SecretService {
    public get adalConfig(): any {
        return {
            tenant: '[your tenant]',
            clientId: '[a GUID, the application ID]',
            redirectUri: window.location.origin + '/',
            postLogoutRedirectUri: window.location.origin + '/',
            resourceId: "[App ID URI]]"
        };
    }
}

    Use it to acquire the token in the route guard:

    if (this.adalService.userInfo.isAuthenticated) {
    this.adalService.acquireToken(this.secretService.adalConfig.resourceId)
        .subscribe(tokenOut => localStorage.setItem('id_token', tokenOut));

    return true;
} else {
  3. Change the root URL of the API to its https counterpart and replaced the regular Http provider with the AuthHttp provider in the service 
    import { AuthHttp, AuthConfig, AUTH_PROVIDERS, provideAuth } from 'angular2-jwt/angular2-jwt';
    constructor(private http: AuthHttp) {}
  4. Add the provideAuth configuration in app.module.ts to tell it that it needs to add the token from the adal service (from step 2) to each request to the WebAPI that requires authentication 
    providers: [MessageService, SecretService, AdalService, RouteGuard, provideAuth({
  tokenGetter: (() => localStorage.getItem('id_token'))
}) ],
  5. In the Azure Portal, add API access to the WebAPI application to the SPA application