What if you are a Visual Studio developer and want to build SPA?
To get started you can download the free Visual Studio 2013 Community Edition.
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:
- As with any other project in Visual Studio, you can use the Office 365 API Tools to integrate your SPA with Office 365 APIs.
- You can refer to the GitHub CORS Sample for the steps.
- You can use the Azure AD portal directly to register the app, configure the required APIs & permissions, and copy the details into your SPA project to interact with the Office 365 APIs.
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:
- Log in to your Azure Portal and select your Office 365 domain directory.
- Click on the Applications tab.
- Navigate to your app.
- Using the Manage Manifest button in the drawer, download the manifest file for the application and save it to disk.
- Open the manifest file with a text editor. Search for the
oauth2AllowImplicitFlowproperty. You will find that it is set to
false; change it to
trueand save the file.
- Using the Manage Manifest button, upload the updated manifest file.
- 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
- Create web apps using CORS to access files in Office 365.
- Browse Office 365 API CORS Code Samples
- Learn About ASP.NET Single Page Application
- Getting Started with SPA Templates by John Papa
- John Papa – The SPA Guy
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!