Active Directory Authentication Library (ADAL) for JavaScript

To use ADAL JS in a non-framework JavaScript application, follow these steps:

1. Include scripts: Add adal.js to your HTML before your application scripts.
2. Initialize: Create a global window.config object containing your clientId and instantiate AuthenticationContext.
3. Manage Session: Use the authContext instance to trigger login() and logOut().

Refer to the official sample for a complete implementation.

<!-- 1. Include adal.js before your app scripts -->
<script src="App/Scripts/adal.js"></script>
<script src="App/Scripts/app.js"></script>

<script>
// 2. Initialize ADAL
window.config = {
   clientId: 'g075edef-0efa-453b-997b-de1337c29185'
};
var authContext = new AuthenticationContext(config);

// 3. Trigger login/logout
$signInButton.click(function () {
    authContext.login();
});

$signOutButton.click(function () {
    authContext.logOut();
});
</script>

ADAL provides an AngularJS wrapper (adal-angular.js) to integrate authentication into your Angular lifecycle.

Setup Steps

1. Include Scripts: Load angular.js, angular-route.min.js, adal.js, and adal-angular.js in your HTML. Ensure ADAL is loaded after Angular but before your app scripts.
2. Register Module: Add 'AdalAngular' to your application module dependencies.
3. Configure Hash Prefix: If using HTML5 mode, you must set a $locationProvider.hashPrefix. Without this, the AAD callback URL (which uses #) will be stripped by the browser, causing an infinite login loop.
4. Initialize Service: Use adalAuthenticationServiceProvider.init() passing your config and the $httpProvider to enable automatic token injection for outgoing requests.
5. Secure Routes: Protect specific routes by adding requireADLogin: true to their route definition.

Accessing User Info

You can access the currently signed-in user via the userInfo object (available on $rootScope). Use userInfo.profile to access claims from the ID token.

Handling Events

You can listen to ADAL events using $scope.$on:

• adal:loginSuccess
• adal:loginFailure
• adal:notAuthorized (provides event, rejection, and forResource)

<!-- 1. Script order -->
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/angular-route.min.js"></script>
<script src="/Scripts/adal.js"></script>
<script src="/Scripts/adal-angular.js"></script>
<script src="App/Scripts/app.js"></script>

<script>
// 2. Include module
var app = angular.module('demoApp', ['ngRoute', 'AdalAngular']);

// 3. Configure hashPrefix for HTML5 mode
app.config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true).hashPrefix('!');
}]);

// 4. Initialize ADAL
adalAuthenticationServiceProvider.init({
    clientId: "e9a5a8b6-8af7-4719-9821-0deef255f68e"
}, $httpProvider);

// 5. Secure routes
$routeProvider.when("/todoList", {
    controller: "todoListController",
    templateUrl: "/App/Views/todoList.html",
    requireADLogin: true
});
</script>

To make CORS API calls, you must map your endpoints in the ADAL configuration. ADAL uses an Iframe to acquire tokens for these endpoints.

Important for Internet Explorer (IE):

• IE cannot access cookies in an IFrame for localhost. You must use a fully qualified domain (e.g., http://yoursite.azurewebsites.com).
• If your site is in the Trusted Sites list, cookies may not be accessible for IFrame requests. You may need to remove 'Protected Mode' for the Internet zone or add the authority URL to the trusted sites.

Implementation in AngularJS: When making calls via $http, ensure useXDomain is set to true and remove the X-Requested-With header.

// 1. Map endpoints in config
var endpoints = {
    "https://yourhost/api": "b6a68585-5287-45b2-ba82-383ba1f60932",
};

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

// 2. Use $http with XDomain for the service call
app.factory('contactService', ['$http', function ($http) {
    return {
        getItems: function () {
            $http.defaults.useXDomain = true;
            delete $http.defaults.headers.common['X-Requested-With'];
            return $http.get('http://adaljscors.azurewebsites.net/api/contacts');
        }
    };
}]);

When initializing ADAL (either via AuthenticationContext or adalAuthenticationServiceProvider), you can provide several configuration options:

• clientId (Required): The identifier assigned to your app by Azure Active Directory.
• tenant (Optional): The Azure AD tenant ID. If omitted, ADAL defaults to 'common', enabling multi-tenant support (allowing any Microsoft account).
• cacheLocation (Optional): Where to store tokens. Options are 'sessionStorage' (default) or 'localStorage'.
• endpoints (Optional): A mapping of resource URIs to client IDs, required if you need to make CORS API requests.

// Example configuration object
window.config = {
    clientId: 'g075edef-0efa-453b-997b-de1337c29185',
    tenant: '52d4b072-9470-49fb-8721-bc3a1c9912a1',
    cacheLocation: 'localStorage',
    endpoints: {
        "https://yourhost/api": "b6a68585-5287-45b2-ba82-383ba1f60932"
    }
};