How to secure an API in Azure API Management to then access via Angular (adal-angular5)?

Question

Background

1. I have created a test API within Azure-API-Mangement. I am able to get data from the API as long as I supply the "subscription-key". I am unaware of how to set up security to link in with Azure AD.

2. I am creating a SPA in Angular, and am using adal-angular5. I have followed this excellent guide on SpikesApps , however am using adal-angular5 instead of adal-angular4. I am able to get the 1296 character token of the logged in user. See screenshot below:

The SpikesApps guide linked above is connecting to an API that was created as an Azure WebApp, not part of Azure-API-Management. The guide uses the user token and submits it as a header in the HTTP get. (Authorization: Bearer [user 1296 char token]).

My limited knowledge of Azure tells me that setting up security for an Azure WebbApp API is different to an API within Azure-API-Management.

The difference of my situation to SpikesApps guide (and hence why I'm stuck), is that I want to securely connect to an API which is part of the Azure-API-Management.

My questions:

1. Is it possible to secure an API within Azure-API-Management such that my Angular SPA can access it by supplying the Authorization: Bearer <user 1296 char token> header? (I.e. as per the API accessed within SpikesApps guide).

2. If not, what are my options?

3. I've read a little bit about "validate-jwt" policies for APIs in Azure-API-Management. If this is the only method, how do I obtain a JWT? I assume the JWT is NOT the same as the 1296 char user token I already have?

Screenshots

(Showing user info obtained by adal-angular5 within my Angular SPA)

(Example of how adal-angular5 adds the Authorization header to the get request.https://www.npmjs.com/package/adal-angular5)

Answer 1

Have figured out the solution, literally an hour after posting the above question (Prior to that I wasted many hours!).

Needed to add the validate-jwt to the API's Inbound policy.

I did it by following (some of) the instructions on this page: https://learn.microsoft.com/en-us/azure/api-management/api-management-howto-protect-backend-with-aad#configure-a-jwt-validation-policy-to-pre-authorize-requests

Really only needed to do the following:

1. Create an "App registration" within Azure AD to associate with the API within APIM. Let's call it backend-app
2. Within API Management, modify the policy of the Inbound component of the API in question, adding the code as per screenshot below
3. When making the GET request, header needs to include: <Authorization: Bearer {USER_TOKEN}> (as per the guide in the original question above)
4. Don't forget to include the Subscription-Key in the GET request.