How can I use adal.js in AngularJS to get a bearer token for the audience from my javascript code?

I have created a Client application in the AD and set its permissions to allow it to access the "Windows Azure Service Management API". My angularjs code is as follows:

adalService.init(
            {
                instance: "/",
                tenant: "<something>.onmicrosoft",
                clientId: "<some id>",
                cacheLocation: 'localStorage',
                redirectUri: 'http://localhost:63691/index.html#/configure',
                endpoints: {
                    /* 'target endpoint to be called': 'target endpoint's resource ID' */
                    '': '/'
                }
            },
            $httpProvider
        );

If I use the token received by this adalService in POSTMAN to call , I get the following error:

The access token has been obtained from wrong audience or resource '<some id>'. 
It should exactly match (including forward slash) with one of the allowed audiences '/','/'.

How can I use adal.js in AngularJS to get a bearer token for the audience https://management.azure. from my javascript code?

I have created a Client application in the AD and set its permissions to allow it to access the "Windows Azure Service Management API". My angularjs code is as follows:

adalService.init(
            {
                instance: "https://login.windows/",
                tenant: "<something>.onmicrosoft.",
                clientId: "<some id>",
                cacheLocation: 'localStorage',
                redirectUri: 'http://localhost:63691/index.html#/configure',
                endpoints: {
                    /* 'target endpoint to be called': 'target endpoint's resource ID' */
                    'https://management.azure./subscriptions?api-version=2014-04-01': 'https://management.azure./'
                }
            },
            $httpProvider
        );

If I use the token received by this adalService in POSTMAN to call https://management.azure./subscriptions?api-version=2014-04-01, I get the following error:

The access token has been obtained from wrong audience or resource '<some id>'. 
It should exactly match (including forward slash) with one of the allowed audiences 'https://management.core.windows/','https://management.azure./'.

• javascript
• angularjs
• azure
• azure-active-directory
• adal.js

1 Answer 1

Okay so I found the solution after going through the source code of ADAL.JS here. At line 137, it looks at config.loginResource to see if it has been set when passing the config object to the init() function.

Putting it out there for anyone getting stuck:

If you need your token to have the claim for “https://management.azure./” (or any other resource URI), you can set the audience when initializing the AuthenticationContext like so:

app.config(['$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', function ($routeProvider, $httpProvider, adalService) {
    adalService.init(
                {
                    instance: "https://login.microsoftonline./",
                    tenant: "<something>.onmicrosoft.",
                    clientId: "<client-id>",
                    cacheLocation: 'localStorage', //optional
                    redirectUri: '<redirect-uri>',
                    loginResource: 'https://management.azure./' //to set AUDIENCE
                },
                $httpProvider
            );
}]);