Example of Angular JS SPA using ADAL.JS for calling a secure, Azure Active Directory authenticated ASP.Net Web API
What is this:
This project contains two Visual Studio Soluitions:
WebAPISPAClient: An Angular JS Single Page Application project that uses ADAL.js in order to authenticate against Azure Active Directory.
CorsEnabled3: A Asp.Net Web API project that requires an access token from Azure Active Directory, having enabled CORS for the client project to be able to make calls to it.
*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.
How do I make this work for me?
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)
"adminConsentDescription": "Allow the application full access to the service on behalf of the signed-in user",
"adminConsentDisplayName": "Have full access to the service",
"userConsentDescription": "Allow the application full access to the service on your behalf",
"userConsentDisplayName": "Have full access to the service",
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:
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.