401 - Unauthorized

[shailensukul]

Another Update
Have managed to get rid of the console errors by using this line:
function config(adalProvider, $httpProvider, $locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
...
}

Still not able to call Web API endpoint.
Started a bounty on this at : http://stackoverflow.com/questions/32352325/adal-js-does-not-get-tokens-for-external-api-endpoint-resource
End Update

Update
OK more info

The token for the web API service is not getting populated in localStorage.
** refer to second attachment **
This seems to be related to this issue: AzureAD/azure-activedirectory-library-for-js#42
** refer to third attachment **
I have been noticing similar errors in the developer console which seems to be preventing the service token from being fetched, but the worrying thing is, the above question has been open for almost a year.

End Update

Followed all instructions diligently as per below.

1. Was working when on localhost but does not work when deployed to 2 separate domains:

• shailenclient.azurewebsites.net and shailenservice.azurewebsites.net

WORKS if I remove [Authorize] and leave [EnableCors(origins: "", headers: "", methods: "*")] on the controller

I am pretty sure that it is related to config but cannot figure out what..
If I leave [Authorize] on the controller, I get this message:
"Authorization has been denied for this request"

Fiddler shows that the bearer token is forwarded in the Request header & it passed pre-flight check
(See screenshot)
[Bearer eyJ0eXA....]

Client
web.config, ida:tenant set correctly (check). [tenant].onmicrosoft.com
ida:Audience set to [client id] of client app (check) - '99e60913-xxxx-xxxx-xxxx-xxxxxxxxxxxx'

Azure AD: configured permission to Shailen Service.

JAVASCRIPT
app.js
var endpoints = {
"https://shailenservice.azurewebsites.net/": // service url
"https://[tenant].onmicrosoft.com/Shailen.Service",
};
adalProvider.init(
{
instance: 'https://login.microsoftonline.com/',
tenant: '[tenant].onmicrosoft.com',
clientId: '99e60913-xxxx-xxxx-xxxx-xxxxxxxxxxxx', // client app id
extraQueryParameter: 'nux=1',
endpoints: endpoints,
cacheLocation: 'localStorage'
},
$httpProvider
);

SERVICE

web.config,
ida:tenant set correctly (check). [tenant].onmicrosoft.com
ida:Audience set to audience of service app (check) : https://[tenant].onmicrosoft.com/Shailen.Service
CORS:
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
config.EnableCors();
..}

Controller
[Authorize]
[EnableCors(origins: "", headers: "", methods: "*")]
public class ValuesController : ApiController
{ .. }
[startup.auth.cs]
app.UseWindowsAzureActiveDirectoryBearerAuthentication(
new WindowsAzureActiveDirectoryBearerAuthenticationOptions
{
Tenant = ConfigurationManager.AppSettings["ida:Tenant"],
TokenValidationParameters = new TokenValidationParameters {
ValidAudience = ConfigurationManager.AppSettings["ida:Audience"]
},
AuthenticationMode = AuthenticationMode.Passive
});

Note: For both client and service, ensured that "Enable Organization Authentication" is unchecked when publishing application as I have set it up manually.

[tushargupta51]

@shailensukul Which version of adal are you using? From the images, it seems that the token that you got for https://shailenclient.azurewebsites.net is getting attached to the requests that are being sent to https://shailenservice.azurewebsites.net. Do you receive any error message in the 401 response?

[shailensukul]

@tushargupta51 - thanks for answering.

Re: ADAL version, it is 1.0.8

<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.8/js/adal.min.js"></script>
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.8/js/adal-angular.min.js"></script>

The token for https://shailenclient.azurewebsites.net is being sent with request (see screenshot)

However, the token for the service is still not being fetched (see screenshot below). I have tried specifying both the service App Id and client Id in the endpoints, but both are not returning a token.

I also noticed a few things missing between the instructions and the code:

1. EnableCors is missing in the code but mentioned in the instructions. I have added it to my controller in my sample
2. Some other issue mentioned removing extraQueryParameter: 'nux=1', but some other post mentioned adding extraQueryParameter: 'domain_hint=sharepointclouddesign.com'. Tried both.

Overall, my experiences have prompted me to rethink the quality of this sample, as the code seems to be slightly off from the instructions. But I will keep trying..

[isaacrlevin]

Has this been resolved? I am having the exact same issue and it is very frustrating that a Microsoft provided sample does not work following the provided directions.

[orunnals]

I also really need an update on this. @shailensukul did you ever get this working?
I have a node.js hosted angularjs SPA gated with adal that I'm trying to call an MVC Web API also gated by AAD. When I remove the [Authorize] tag on the REST endpoint the call works fine and brings back the JSON object. As soon as I add in the Authorize tag, even though all permissions have been configured properly in Azure, angular and the web api, I get an unauthorized error.

Really need to get this working.

[eloekset]

I'm running into a similar issue when using AdalJS without Angular. So far I've not found how I should specify the endpoint I need to get a token with aud parameter for my Web API.

I've got it working for an Angular sample application, but I've not succeeded trying to port that to a non-Angular SPA application.

The aud parameter is my SPA application's application ID, and my API returns 401 Unauthorized.

[jscanlon77]

Hi there, did anyone of you get this working. I have exactly the same problem and it seems like even when the AAD token is requested using the endpoints array or the loginResource, the decrypted token aud is always the client id, which does not match the audience for the web api service and therefore gets a 401.

I have asked a stack overflow question around the issue

http://stackoverflow.com/questions/42648737/angular-2-spa-azure-active-directory-jwt-issue

[ukphillips]

I'm also having the original issue where I am getting an empty token back for the API with no error to try to track down.

Why is my access token empty?

@jscanlon77 It sounds like it's just using your apps id_token from the login to send to the service. I think the code defaults to using the client id (and id_token) if it can't match the request in the endpoints. Make sure that config is correct:

var endpoints = {
    "api/ToGoList": "https://<tenant>.onmicrosoft.com/<ommited>-4532-8f28-669c3493e7a0"

//if a request contains "api/ToGoList", obtain and use the token for that API app uri
};

[skundojjala]

Is this problem solved ? Is there a specific way to configure adal angular,From SPA we are trying to reach endpoint which is hosted behind APIM. our configuration is similar to the original post.
I am also not clear on what "enpoints" is doing actually. No matter what i put in the endpoints token is not being passed downstrem

[ukphillips]

@skundojjala My issue is resolved - I don't recall specifically but I think it was configuration related. Endpoints is used for when you need to make a call to a different domain and acquire a different token than the one your main app is using. For instance, if you had another API that someone else managed that required a token with a different audience, the endpoint allows adal to automatically detect requests to that domain and silently request a token for those (beware user consent conditions when silently obtaining tokens). In general if you are just communicating with your SPA api you likely don't even need to configure the endpoints.

[cnuis2cool]

I had the same problem. In endpoints I had put APP URI ID, replaced it with App ID.

var endpoints = {

    // Map the location of a request to an API to a the identifier of the associated resource
    "https://localhost:44327/": "<Application ID>" // Not APP URI ID
 };

[michaelsync]

using app uri works for me.