Calling the Office 365 Unified API from JavaScript using ADAL.js
The goal of this post is to provide very basic ‘hello world’ example of how to call the Office 365 Unified API (aka Graph API) using JavaScript and the ADAL.js library. This has recently become possible (May 2015) now that CORS is supported by the Office 365 APIs (most of the individual endpoints support it as well as the unified API).
The ADAL library simplifies the process of obtaining and caching the authentication tokens required to retrieve data from Office 365. It is possible to avoid the ADAL library and handle this yourself, although I would recommend doing so as a learning exercise only.
I failed to find a simple example of how to achieve this, my search results often filled with examples of calling the APIs from server-side code or else utilising the Angular.js framework. This example is based on a more complex example.
The following snippet will log to the browser console the results of a call the to files endpoint of the Office 365 unified API, which will return a JSON object containing information about the files in the current users’ OD4B.
Register an Azure Active Directory App. Note that *every* Office 365 subscriptions comes with AAD and supports the creation of an app
Associate the required ‘permissions to other services’, in this case ‘Read users files’ via the Office 365 Unified API
Allow implicit flow
Not covered explicitly in the above article but also critical are the following steps:
Get the App’s Client ID and copy it into the snippet
The App Client ID
Get the Azure Active Directory subscription ID and copy it into the snippet
The subscription ID in Azure Active Directory
Once the above steps have been completed, you can try out the snippet by embedding in a Script Editor web part, or you can run it externally to SharePoint as part of, say, a provider hosted app.
NOTE: I found that the call to files endpoint is failing for certain users. I am still unsure whether this is due to external vs internal users (is working for internal [.onmicrosoft.com] users) or whether it could be licencing issue. The /beta/me endpoint is working in all cases.
Paul.
GLOSSARY
CORS: Cross-Origin Resource Sharing
ADAL: Active Directly Authentication Library
OD4B: OneDrive 4 Business
As a developer my professional interests are technical and tend to be SharePoint focused. I've been working with SharePoint since 2009 and hope my posts will give back a little to the community that's supported me over this time. I'm also a keen runner (half-marathon) and passionate Brompton bicycle owner.
View all posts by Paul Ryan
9 thoughts on “Calling the Office 365 Unified API from JavaScript using ADAL.js”
Nice post, i will try so receive the Azure management credentials. Thanks
Hi Hansen,
I haven’t spent any time with phonegap but I don’t see why it wouldn’t work. Assuming that a user’s first point of contact with SharePoint Online is via the phonegap app, then the app will redirect to the Azure AD sign in page. Upon authorization the user will be redirected back to the app. Not sure how you manage http redirects when using phonegap. ADALjs supports CORS for cross-domain requests.
Hello Paul,
I am having trouble integrating adal.js into my application.
Below is the problem and a link to the code snippet.
Problem:
acquireToken is unable to get token, basically if I inspect element the iframe src has redirect url pointing to localhost, but its never gets redirected to localhost.
I’m trying to use this inside of SharePoint but if I’m not the admin user it will send me to the login page but give me this error:
This application requires application permissions to another application. Consent for application permissions can only be performed by an administrator. Sign out and sign in as an administrator or contact one of your organization’s administrators.
I login in as an Admin, went to the page the API was being called, accepted the permissions. But when I login as a normal user, I get that error.
If the app as been approved by the admin, what’s the problem?
Hi,
I am trying to use similar code in SharePoint App. Instead of graph API, we are trying to PowerBI API.
It works fine if I simply end this code in a sharepoint page but prompts for login to powerbi. But When I embed this into SharePoint AddIn, it is failing.
Nice post, i will try so receive the Azure management credentials. Thanks
Hi, I am trying to do an OAuth from my phonegap app to SharePoint Online. Would the above code work?
Both are on different domains. I have been unsuccessful so far. I would appreciate your help on it.
Thanks
Hi Hansen,
I haven’t spent any time with phonegap but I don’t see why it wouldn’t work. Assuming that a user’s first point of contact with SharePoint Online is via the phonegap app, then the app will redirect to the Azure AD sign in page. Upon authorization the user will be redirected back to the app. Not sure how you manage http redirects when using phonegap. ADALjs supports CORS for cross-domain requests.
Hello Paul,
I am having trouble integrating adal.js into my application.
Below is the problem and a link to the code snippet.
Problem:
acquireToken is unable to get token, basically if I inspect element the iframe src has redirect url pointing to localhost, but its never gets redirected to localhost.
Link: https://gist.github.com/anonymous/ec539c61acd3fa867d7e
I’m trying to use this inside of SharePoint but if I’m not the admin user it will send me to the login page but give me this error:
This application requires application permissions to another application. Consent for application permissions can only be performed by an administrator. Sign out and sign in as an administrator or contact one of your organization’s administrators.
I login in as an Admin, went to the page the API was being called, accepted the permissions. But when I login as a normal user, I get that error.
If the app as been approved by the admin, what’s the problem?
More details here: http://stackoverflow.com/questions/39731303/microsoft-graph-api-permissions-for-non-admins?noredirect=1#comment66762724_39731303
Hi,
I am trying to use similar code in SharePoint App. Instead of graph API, we are trying to PowerBI API.
It works fine if I simply end this code in a sharepoint page but prompts for login to powerbi. But When I embed this into SharePoint AddIn, it is failing.
Any help you could offer?
Regards,
Yasotha
How is it failing? What error messages are there on the page or in the console?