Example of Angular JS SPA using ADAL.JS for calling a secure, Azure Active Directory authenticated ASP.Net Web API

*Update from 3/10/2015: I've added support for POST and PUT as folks told me they had problems enabling them. Also changed the audience setting to match the client id of the called app as some people also had problems in that area. This should make the sample smoother when you run it.

Step 1: Setup Azure AD

Go to your Azure subscription, Azure Active Directory, and create two web applications (Not native clients. Both these apps are web apps, but from the OAuth perspective, one calls another, that's all).
The first app is the client and the second is the server (give them names that won't confuse you later)

Step 2: Change the manifest of the server application

Go to the server application on Azure AD and download the manifest. Replace the oauth2permissions part with the sample below (remember to use the client ID from the client application you created)

"oauth2Permissions": [
{
"adminConsentDescription": "Allow the application full access to the service on behalf of the signed-in user",
"adminConsentDisplayName": "Have full access to the service",
"id": "69a9f159-0771-4d0e-a1c9-25a343b5cd0c",
"isEnabled": true,
"origin": "Application",
"type": "User",
"userConsentDescription": "Allow the application full access to the service on your behalf",
"userConsentDisplayName": "Have full access to the service",
"value": "user_impersonation"
}
]

Upload the manifest back.

Step 3: Update the client app permissions

Go to the client app settings on Azure AD and in the permissions area, add the server app you just configured (that's why you did step 2, so it will show up).

Step 4: Enable implicit flow for the client app

Still at the client app settings on Azure AD, download the app manifest and update the oauth2AllowImplicitFlow property to true. This is not surfaced in the portal UI so has to be done via the manifest as well. Upload the manifest back to the application at the portal.

Step 5: Update client ID and URLs

On both the client and the server, update the client IDs and URLs so they match your client IDs and URLs. There are //TODO comments at the points that need changes.

Step 6: Upload the client and server to separate azure websites

After uploading them, make sure the URLs match what you have in the files (always use HTTPS for the URLs).

Step 7: Set endpoints on ADAL.js initialization

For every resource you access, you need a different access token. Turns out ADAL.js does that for you. Look at the app.js and how it sets an array of endpoints so ADAL knows these will require access tokens and handle that for you.

Things you should NOT do:

1-There are many ways you can enable CORS on Web API, from manually adding the headers on web.config to use OWIN cors Nuget or even the Web API one. Pick one, but only one. If you enable it in multiple ways, multiple repeated headers will be generated and it will break JavaScript.

2-Azure Websites have now a new option in the portal in the configuration tab named "authentication/authorization" with a button saying "configure". DON'T ENABLE THIS. It will force all requests to be authenticated and the problem with CORS is that all the preflight requests (method=OPTIONS) will also be redirected to logon which will never work.

3-Don't trust the browser. Clear all cache between attempts or you will never know if your code is working.

4-Don't ever end an allowed origin URL with "/"

5-The current version of ADAL is blended into Angular JS. Don't fight it. Use Angular and setup the routes accordingly.

6-*Edited: Make sure you use HTTPS on both endpoints, the client and the server. We've got some people stuck at this. Defaulting everything to SSL makes it easier to configure, test and keeps you clear from some potential errors.