AngularJS SPA access CORS WebAPI secured on Azure AD

Question

I followed the example SinglePageApp-DotNet and it worked fine.

Then I want to make the single page application to call a CORS enable web api. Both applications are secured by AAD and deployed to Azure websites, I can't make it work. I followed the examples of https://github.com/omercs/corsapisample and https://github.com/matvelloso/AngularJSCORS to every words, but I got 'Authorization has been denied for this request' error.

When I disabled the [Authorize] attribute for the controller action, it worked. So I think the CORS setting is correct. From the log I can see that the CORS preflight (OPTION call) was successful.

Any idea how to solve the problem? Thanks very much for your help.

Answer 1

If you see 401 response code from your CORS api endpoint, it means token is not accepted at your service. You need to match the audience in the token and audience in the cors api project config.

1. Register CORS API project at Azure AD- project 1
2. Find the app key ida:Tenant and replace the value with your AAD tenant name
3. Find the app key ida:Audience and replace the value with the App ID URI you copied from the Azure portal.
4. Enable cors as in the sample
5. Register single page app at Azure AD- project 2
6. Give permission to project1
7. In the "Permissions to Other Applications" section, click "Add Application." Select "Other" in the "Show" dropdown, and click the upper check mark. Locate & click on the To Go API, and click the bottom check mark to add the application. Select "Access To Go API" from the "Delegated Permissions" dropdown, and save the configuration.

Enable for Oauth2 implicit:

By default, applications provisioned in Azure AD are not enabled to use the OAuth2 implicit grant. Using the Manage Manifest button at the app config inside Azure AD section, download the manifest file for the application and save it to disk. 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. Using the Manage Manifest button, upload the updated manifest file. Save the configuration of the app.

You can use Fiddler to get the tokens and inspect them if there is any issues. If permission settings are right, CORS API endpoint will accept the token.

Answer 2

FYI. We now have an official sample demonstrating how to use CORS with ADAL JS and Angular. You can find code and detailed instructions in https://github.com/AzureADSamples/SinglePageApp-WebAPI-AngularJS-DotNet