With ADAL.js use of ClientId as Audience in Endpoints for SPA config - azure-active-directory

Question

I am creating an AngularJS client to interact with two ASP.Net Core (v2.0) APIs, all of which are to be secured with Azure AD. Because of a requirement to use roles and groups we will be using the v1 endpoint and therefore ADAL.js. The UI client must be a separate project from each API, additionally the UI project is not a Visual Studio project, rather VSCode with npm. In the UI project I am using:
AngularJS 1.6.9
UI-Router 1.0.15
ADAL.js 1.0.17
After a long time of trial and error, I finally got the UI to authenticate to the API after I took the following steps:
In the UI project I included endpoints in the Adal init() function:
var endpoints = {
'http://localhost:8000/api0/': '<API_0_CLIENT_ID HERE>',
'http://localhost:8001/api1/': '<API_1_CLIENT_ID HERE>',
};
adalAuthenticationServiceProvider.init(
{
tenant: 'slurm.onmicrosoft.com',
clientId: '00000000-0000-0000-0000-XXXXXXXXXX',
endpoints: endpoints
},
$httpProvider
);
There are two endpoints, one is the base url for each API, and each has the corresponding clientId for that API as assigned when each api was registered in Azure AD. Also, the UI project, when registered in Azure AD, is granted appropriate permissions to each api. Once I did set these endpoints in the init() function, and the UI had each clientId of the APIs, the UI was able to authenticate properly to both APIs. This is the SO question that finally clued me in to try this: 32352325
If I do not provide the endpoints in the UI project, a token is not even passed back to the API and therefor authentication fails.
What I am not sure of (there is no clear documentation), is whether the UI clientId should be set as the audienceId in each API or keep each API client id embedded in the UI.
Questions:
1) For an AngularJS UI project that is separate from each API, and each project is registered separately in Azure AD, do we register the UI clientId as an audience with each API or allow the client to know each API clientId?
2) Why are endpoints seemingly required to be specified in the ADAL init() function on the client? Or am I using them incorrectly?
Based on the ReadMe of this Azure-Samples project, it would appear the UI should know the clientId of each API (under Step 3, Configure the WebApp it says):
In the TodoListWebApp project, //...// Find the TodoListResourceId property and replace the value with the Application ID of the TodoListService app
But, this example is not an SPA example and therefore does not use the implicit flow.
Much thanks in advance!

Answer 1

This is what I eventually deduced (after lots of digging and trial and error). Again the example assumes the UI is a separate project from any APIs. For the original questions above:
1) For an AngularJS UI project that is separate from each API, and
each project is registered separately in Azure AD, do we register the
UI clientId as an audience with each API or allow the client to know
each API clientId?
The Client UI knows about each API but uses the App ID URI
2) Why are endpoints seemingly required to be specified in the ADAL
init() function on the client? Or am I using them incorrectly?
Read on.
For each API your UI will access, there needs to be an endpoint declared in the endpoints map structure. For example, say I am trying to access 2 separate APIs registered in AAD with the following relevant info:
Tenant: slurm.onmicrosoft.com
API_0
Home Page URL: 'https://localhost:8000'
App ID URI: 'https://slurm.onmicrosoft.com/00000000-0000-0000-0000-aaaaaaaaaaaa'
API_1
Home Page URL: 'https://localhost:4000'
App ID URI: 'https://slurm.onmicrosoft.com/00000000-0000-0000-0000-bbbbbbbbbbbb'
adalAuthenticationServiceProvider.init(
{
tenant: 'slurm.onmicrosoft.com',
clientId: '00000000-0000-0000-0000-XXXXXXXXXX',
endpoints: {
'localhost:8000': 'https://slurm.onmicrosoft.com/00000000-0000-0000-0000-aaaaaaaaaaaa',
'localhost:4000': 'https://slurm.onmicrosoft.com/00000000-0000-0000-0000-bbbbbbbbbbbb',
}
},
$httpProvider
);
The following are the references:
Go to http://www.cloudidentity.com/blog/2015/02/19/introducing-adal-js-v1
Scroll to section Calling API via CORS
Follow the link to the github example:
https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp-dotnet-webapi
On the github example readme
Go to Step 3: Configure the To Go API to use your Azure Active
Directory tenant
See step #7 which states:
Enter a mapping of the To Go API endpoint location to its resource
identifier, or App ID URI. The name of the property of the endpoints
object should be the location of the To Go API.
Also if you look into the code example you will see in the web.config of the ToGoAPI it indicates the 'Audience' value is set to the App ID URI of the ToGoAPI
Note: The App Id URIs used above are intentionally left in a format similar to the default values Azure AD will
provide when you register an application. These can be changed (just make sure you change it everywhere).
Note 2: In the endpoints map you see that the keys do not include the scheme and to not fully match the corresponding Home Page URL. When I included the scheme i.e https:// I got 401 responses from the API