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.
First things first
Make sure your Office 365 tenant is associated with your Azure AD tenant. When your tenants are associated you need to sign in to the Azure management portal and register your application principal in the Azure AD tenant. The next step is to enable the OAuth 2 implicit grant for your application principal. Make sure the application principal has at least Read user files and Read items in all site collections permissions for the Office 365 SharePoint Online application.
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.
Don’t forget to checkout the complete code on GitHub.
Hi, Nick I ‘m trying to make it work adalJs oauth + onedrive.
Oauth login works perfect for me, but then I want to make onedrive api call I get 401.
Also I try to use acquireToken function and I get “Token in cache” message.
I’ m using adal.js & adal-angular.js libraries.
Hi Nicolás,
Sorry, for the late reply, did you solve it in the meantime? If not, does the token retrieved from the cache belong to the resource “https://graph.microsoft.com” (assuming you use the OneDrive API in Microsoft Graph)? The 401 error could mean you got the wrong token. Also the token could be expired. Did you test the token with a manual request in an application like Postman?
Great Article Nick
I would like to know if I can use the same approach for obtaining the access token to further access the power BI report while I am already on the O365 Site ?
Hey Nick…
Thanks for the write up. I am having an issue where the first time I authenticate the AcquireToken runs twice and so does the AJAX call…resulting in the response returning twice. Have you experienced this before?
HI Nick,
I am trying to connect to Sharepoint online site for reading List items using REST URL(end point).But in above code you are using the Client id of the Azure AD Principal .Please guide me how to get the ClientId of Azure AD application principal form portal.azure.com.
Hi Nick, I have created 1 Azure webapi App and enabled implicit grant, with default permission (delegated) i.e. windows Azure AD sing in and read profile And mentioned my SharePoint online site URL in reply URL. I’m able to get the id_token.
I have registered one more native app in Azure with delegated permission using powebi API.
Im passing id_token as userassertion in authcontext inside my custom webapi which
will access powerbi resources using native app. I’m getting invalid jwt token. Any idea how to approach on this?
Good article, I guess it is unavoidable to have a dependency on one-drive for this to work.
Hi Nick,
Is it possible to use this construction for a JS app that redirects to a SharePoint Sitepage or News post without the hassle of a manual login? Or are is this approach only for APU like assets and not for the visual parts of Sharepoint?