In single page applications (SPAs) you consume REST endpoints to retrieve and change data. With Web API you can secure these endpoints using Azure AD and authenticate to these endpoints with OAuth 2.0. Active Directory Authentication Library for JavaScript (ADAL JS) helps you to use Azure AD for handling authentication in your SPAs. The sources can be found on GitHub. In this blog post I describe how to authenticate an Office 365 user (which is an Azure AD user) to a Web API endpoint with ADAL JS.

Basics to authenticate to an endpoint with ADAL JS

When using ADAL JS, the library will first create an authentication context based on a configuration object in the constructor. Next ADAL JS will check if the user is authenticated. If the user is not yet authenticated, ADAL JS will redirect the user to the Azure AD login page. When the user is authenticated (within the right Azure AD tenant), ADAL JS provides a function to acquire an access token for an endpoint defined in the configuration object. Within this function you use this access token to authenticate to the endpoint.

Using ADAL JS to authenticate with Office 365 user

An Office 365 user is also a Azure AD user. To get a better understanding of how to authenticate an Office 365 user to multiple endpoints with ADAL JS, I will demonstrate how to get the OneDrive documents of the current user and a list of items within a given SharePoint list.

First we create the configuration object as input for the authentication context. This object specifies the Azure AD tenant, ClientId of the application principal we registered earlier in Azure AD, the URL to which the user should be redirected after login, the endpoints you want to connect to and the cache location.

When the authentication context is created, we make sure the user is authenticated.

If the user is authenticated, we acquire the access token for OneDrive to access the OneDrive files of the current user. The acquireToken function returns an access token for the given endpoint. Since we passed in the endpoint of OneDrive, we can use this token in the REST call to OneDrive. Now the REST call will return a list of all items in the OneDrive root folder.

To obtain an access token for SharePoint, we just use the acquireToken function again with the SharePoint endpoint as input. The function returns an access token which we use in the call to get the titles of all files in a given SharePoint list. Probably you will receive a CORS error the first time you open the page. Refreshing the page should solve this.

Conclusion

You have seen that with ADAL JS you can authenticate an Office 365 user to the endpoints of multiple Office 365 applications. This is not limited to only Office 365 applications. You can authenticate to the endpoints of any other application when the application principal in Azure has received the required permission.