ADAL angular

ADAL JS provides a wrapper for AngularJS applications packaged as adal-angular. Most of the core ADAL JS API and functionality described in the other sections are also surfaced through the wrapper. In addition, the wrapper provides two main features designed to work with AngularJS framework.

Route protection

AngularJS provides the framework to define and configure routes for your SPA. Using ADAL Angular, you can control which routes require authentication. To do this, all you need to do is add the requireADLogin flag to each route definition as follows:

$routeProvider.
    when("/todoList", {
        controller: "todoListController",
        templateUrl: "/App/Views/todoList.html",
        requireADLogin: true
    });

If this flag is set on the route and a user visits the route, ADAL will internally invoke the login method and the user will be redirected to Azure AD for authentication. You can also choose to secure all of the routes, by setting this flag in the global config at the time of initializing the ADAL service provider:

adalAuthenticationServiceProvider.init({
        clientId: "e9a5a8b6-8af7-4719-9821-0deef255f68e",
        requireADLogin: true
    },
    $httpProvider
);

HTTP interception

AngularJS provides the capability to intercept HTTP requests and ADAL Angular leverages this to attach bearer tokens obtained from Azure AD to API requests.

As the developer of your Angular JS SPA, you can choose to take advantage of this feature in ADAL Angular by passing $httpProvider when initializing the ADAL service provider:

adalAuthenticationServiceProvider.init({
        clientId: "e9a5a8b6-8af7-4719-9821-0deef255f68e"
    },
    $httpProvider // pass http provider to inject request interceptor to attach tokens
);

When the $httpProvider is given and an API call is made, ADAL Angular intercepts the request and attempts to acquire a token silently for the API. Once it successfully obtains the token, it is added as a bearer token to the authorization header of the API request. If you do not use the HTTP interception or in cases where ADAL Angular fails to acquire the token during interception, you will need to explicitly set the bearer token in the HTTP request as shown in Using the token to call API.

The HTTP interception approach above works by default for API calls to your app's own backend API. This feature can also be used to attach tokens to requests to other external APIs. In order for ADAL Angular to know which APIs need HTTP interception, you will need to add the API endpoints mapping to the endpoints collection when initializing the ADAL service provider. This is shown below:

// endpoint to resource mapping
var endpoints = {
    "https://graph.microsoft.com/": "00000002-0000-0000-c000-000000000000",
    "https://somehost/api": "b6a68585-5287-45b2-ba82-383ba1f60932"
};

adalAuthenticationServiceProvider.init(
    {
        clientId: "e9a5a8b6-8af7-4719-9821-0deef255f68e", 
        endpoints: endpoints  
    },
    $httpProvider   // pass http provider to inject request interceptor to attach tokens
);