How to use ADAL.js and enable a secure CORS call to Web API and Azure AD - azure

Question

I have a single page application needs to call a CORS enable web api. Both applications are secured by AAD. I found a sample done by Mat Velloso at https://github.com/matvelloso/AngularJSCORS
I've followed the steps in the readme file, only thing not sure was "remember to use the class ID from the client application you created" in step 2, I used a newly generate GUID. But I'm keep getting: XMLHttpRequest cannot load http://localhost:63918/api/values. The request was redirected to 'https://login.windows.net/devazureadnrw.onmicrosoft.com/wsfed?wa=wsignin1.0…3d0%26id%3dpassive%26ru%3d%252fapi%252fvalues&wct=2015-01-09T11%3a37%3a19Z', which is disallowed for cross-origin requests that require preflight.
Follwing is the Chrome console out:
renewToken is called for resource:http://localhost:63918/
adal.js:959 Add adal frame to document:adalRenewFrame
adal.js:959 Renew token Expected state: 9964340c-3c3b-4a2a-b710-f0d44f58655a|http://localhost:63918/
adal.js:755 Navigate url:https://login.windows.net/devazureadnrw.onmicrosoft.com/oauth2
authorize?re…e=9964340c-3c3b-4a2a-b710-f0d44f58655a%7Chttp%3A%2F%2Flocalhost%3A63918%2F
adal.js:959 Navigate to:https://login.windows.net/devazureadnrw.onmicrosoft.com/oauth2
authorize?re….onmicrosoft.com&domain_hint=devazureadnrw.onmicrosoft.com&nonce=undefined
adal.js:959 Add adal frame to document:adalRenewFrame
adal.js:959 State: 9964340c-3c3b-4a2a-b710-f0d44f58655a|http://localhost:63918/
adal.js:959 State status:true
adal.js:959 State is right
adal.js:959 Fragment has access token
adal.js:959 State: 9964340c-3c3b-4a2a-b710-f0d44f58655a|http://localhost:63918/
adal.js:959 State status:true
adal.js:959 State is right
adal.js:959 Fragment has access token
adal.js:959 Add adal frame to document:undefined
(index):1 XMLHttpRequest cannot load http://localhost:63918/api/values. The request was redirected to https://login.windows.net/devazureadnrw.onmicrosoft.com/wsfed?wa=wsignin1.0…3d0%26id%3dpassive%26ru%3d%252fapi%252fvalues&wct=2015-01-09T11%3a37%3a19Z', which is disallowed for cross-origin requests that require preflight.
adal.js:959 Add adal frame to document:undefined
adal.js:959 State: 9964340c-3c3b-4a2a-b710-f0d44f58655a|http://localhost:63918/
adal.js:959 State status:true
adal.js:959 State is right
adal.js:959 Fragment has access token
adal.js:959 State: 9964340c-3c3b-4a2a-b710-f0d44f58655a|http://localhost:63918/
adal.js:959 State status:true
adal.js:959 State is right
adal.js:959 Fragment has access token
The CORS pre flight request was made with 200 status code:
> values/api OPTIONS 200 OK text/plain angular.js:8560 Script 461 B 0 B
> 5 ms 4 ms
> authorize?response_type=token&client_id=1208eac1-f4dd-42f5-be33-886075f81be2&resource=http%3A%2F%2Flocalhost%3A63918%2F&redirect_uri=http%3A%2F%2Flocalhost%3A44302%2F&state=9964340c-3c3b-4a2a-b710-f0d44f58655a%7Chttp%3A%2F%2Flocalhost%3A63918%2F&prompt=none&login_hint=binjie%40devazureadnrw.onmicrosoft.com&domain_hint=devazureadnrw.onmicrosoft.com&nonce=undefined
> login.windows.net/devazureadnrw.onmicrosoft.com/oauth2 GET 302 Found
> text/html adal.js:297 Script
> 3.6 KB 0 B
> 1.30 s
> 1.29 s values/api GET 302 Found application/json Other 677 B 0 B 13 ms 13 ms
I'm stuck since this is the only sample I found. Any suggestions please? Many thanks.

Answer 1

This is Mat Velloso, I created that sample so you can shoot me :)
Here's what's going on: You are doing the CORS call, but the server is refusing it and asking you to authenticate. This can be for either of these three reasons (unless I'm missing something):
1-Either the Web API hasn't been properly configured to allow CORS (check my sample and the notes, I had exactly the same error at first because I didn't configure my Web API for it
2-Either you don't have a valid access token (which could be because the apps in AAD haven't been configured so one is allowed to call another, or just because you don't really have a valid access token)
3-Or either ADAL is not fetching the right access token for you because you didn't configure the endpoints collection (check how I initialize that in my app JavaScript, clearing out the right URLs)
Let me know if this helps, feel free to ping me for more info.
Regards,
Mat

Answer 2

sorry for the delay. I think I'mt not getting notifications so I missed it. Answering your questions:
1-The Guid is generated when you go to Azure Active Directory and create an app. It then assigns a new Guid as the client ID which identifies that's your app. Don't create a new Guid yourself, use the one identified as Client ID there.
2-Whether the app is deployed on Azure or running locally (or running anywhere else) is irrelevant. As long as you configure the reply URI correctly so the redirection falls where it is, you're good to go.
3-Once your user authenticates and you get a token back, whatever you do with that token is already on behalf of that user. So for example you can query the Azure Graph API and check in which groups that user is. The graph API is a REST api that lets you talk to Azure Active Directory. In order for that to work, keep in mind you need to give the app permissions to call Azure Graph API and read this sort of settings. Also remember that for every endpoint you call you need a specific access token (the one you get out of the authentication is only good for going back to AAD and asking for specific access tokens for specific things you want to access).
Perhaps a good way for you to start is taking a look at this: http://azure.microsoft.com/en-us/documentation/articles/mobile-services-how-to-register-active-directory-authentication/