Use OAuth with Cross-Origin Resource Sharing to connect a Single-Page Application
CORS support is only provided when using the Web API. You cannot use the organization service or the deprecated organization data service.
SPAs and Same-Origin policy
Use CORS with Dataverse
A future version of this topic will be updated to describe use of MSAL.js for SPA instead of ADAL.js, which is deprecated.
How adal.js works
The core library is
adal.js. You can access the minimized version of this library at https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/adal.min.js. The Github project and documentation is at https://github.com/AzureAD/azure-activedirectory-library-for-js.
The adal.js library contains the low-level capabilities to authenticate using OAuth2. Adal.js is designed so that it can be used with other frameworks, for example there is an
adal-angular.js library that is designed to be used with the Angular framework.The way you work with this library is to set certain configuration properties and then it will wait until events occur that trigger the interaction flow. This could be simply calling the
login function or if your application has routing behaviors, the authentication can be initiated by how the controller for that route is configured.
When authentication is required, the user is taken to the sign-in page where they can enter their credentials. After they successfully authenticate, they are re-directed back to the calling page with the token information attached as a fragment (using
#) to the URL. This allows the SPA to acquire the token and cache it in local or session storage in the browser. This means that the entire page is re-loaded after authentication, but this time the information about the authorized user is available and the application can proceed to make calls the Dataverse Web API or other resources.
When calling the Dataverse Web API, you must include the token value in an Authorization header with your XMLHTPPRequest. However, because tokens have an expiration you want to be sure that it doesn't expire while people are using your SPA. Remember, entering new credentials requires that the entire content of your SPA page is transferred to the sign-in page. This would cause a very bad user experience if it were to happen while people are in the middle of doing something. In order to ensure this doesn't happen, you wrap your Web API calls within an
acquireToken function so that the validity of the token can be checked and refreshed if necessary without taking the user to a sign-in page.
Preparing to use ADAL.js with a SPA
In order to configure your SPA to work with adal.js you will need to :
Register your application with the Azure Active Directory tenant
Export your registered application manifest and edit it to allow OAuth2 Implicit Flow, and then import the JSON file back to your application registration.
Set configuration variables in your SPA with information from that registration.
You will need to include the following:
- The URL to your Dataverse organization
- The name of the Active Directory tenant your organization uses to authenticate
- The client ID you get when you register your application
- The URL to where the SPA will be deployed or debugged during development
The set of steps required are described in Walkthrough: Registering and configuring a SPA application with adal.js.
Submit and view feedback for