in Office 365 API

Office 365 APIs and CORS in Visual Studio

Last week Microsoft announced CORS support for Office 365 APIs, specifically for Files and Sites API (with support for other APIs coming soon). This enables you as a developer to build single page applications (SPA) that purely uses nothing but JavaScript and your choice of JavaScript framework such as AngularJS.

What if you are a Visual Studio developer and want to build SPA?

Visual Studio already provides tools for you to build SPAs and publish them to Windows Azure. Several of the JavaScript frameworks are available as NuGet packages for your convenience or you can choose to simply use the CDNs instead of NuGet packages.

To get started you can download the free Visual Studio 2013 Community Edition.

I would also highly recommend reading Andrew Connell’s blog post on ADAL JS & CORS with Office 365 APIs

We just published a sample to OfficeDev GitHub that shows how to build a AngularJS Single Page Application using Visual Studio and ADAL for JavaScript to demonstrate the Office 365 CORS support. The sample interacts with the Files API to retrieve the user’s files. As Office 365 Discovery Service does not support CORS yet, the sample includes a Web API controller that interacts with the discovery service to obtain the Files API resource Id and service URL.

Make sure you follow the ReadMe to successfully build and run the project.

How do I integrate Office 365 APIs into my SPA?

There are two ways:

Enabling CORS Support

By default, applications provisioned in Azure AD are not enabled to use the OAuth2 implicit grant. To enable CORS support, you will have to download the app manifest from Azure AD and enable CORS support.

Follow the steps below to enable CORS support for your application:

  1. Log in to your Azure Portal and select your Office 365 domain directory.
  2. Click on the Applications tab.
  3. Navigate to your app.
  4. Using the Manage Manifest button in the drawer, download the manifest file for the application and save it to disk.
  5. Open the manifest file with a text editor. Search for the oauth2AllowImplicitFlow property. You will find that it is set to false; change it to true and save the file.
  6. Using the Manage Manifest button, upload the updated manifest file.
  7. Save the configuration of the app.

Authenticating to Azure AD

You can use ADAL.JS library to successfully authenticate and authorize your app to interact with Office 365 APIs.

ADAL.JS is an open source library. For distribution options, source code, and contributions, check out the ADAL JS repo at https://github.com/AzureAD/azure-activedirectory-library-for-js.

Discovery Service and CORS

Office 365 discovery service does not support CORS. If your application relies on the discovery service to get APIs resource Id and endpoint URL, then you will need to build your Web API (which has server code) that interacts with the discovery service to get the info. The SPA can then call this Web API to get the info from discovery service.

With Visual Studio, you can easily build Web APIs controllers and use the Office 365 API Discovery Service Client Library to interact with the discovery service.

Internet Explorer and CORS

Current Internet Explorer versions do not support CORS yet. We are already working on a patch which will be released soon. Until then, you can use the latest versions of Chrome or Firefox to test your SPA.

This post will be updated with the links to the patch once it is available.

Additional Resources to Get Started building SPA in Visual Studio

Visit the API Sandbox to gain hands on experience using the browser-based method to execute snippets of code to show how the API works.

As always, we are listening on all the channels and we encourage you to participate and provide feedback if any!

Write a Comment

Comment

Time limit is exhausted. Please reload the CAPTCHA.