Azure Active Directory JWT for API authentication within Angular 4

Question

I currently have 2 web apps(app services) setup on azure. The first one is an angular 4 website the second one is a .net core 2.0 restful api. I have CORs setup for the ui to talk to the api perfectly. The only issue is there isn't any security around this API.

I am attempting to utilize the azure AD JWT token to be part of an authorize attribute within the API but the problem is the API can't validate the token since I don't have the secret key that azure is using to create the JWT token to begin with. Also I am getting the token from /.auth/me. Does anyone have any advice on how best to solve this problem?

Is there an api endpoint on azure that I can hit to get a valid JWT token for the current logged in user? I noticed the /.auth/me one expires after an hour and the user is forced to visit /.auth/login/aad/callback in order to refresh the tokens.

I would love to know the best strategy to solve this, if it includes adal, msal, etc. Also links to code would be very much appreciated.

Answer 1

I would recommend you use ADAL for Javascript in your angular 4 Web App to retrieve the id_token or access_token, then using the relevant token to access your .NET Core 2.0 restful API. For your angular app, you could still use the build-in authentication/authorization provided by Azure App Service without changing your code.

For your .NET Core 2.0 restful API, you could just leverage Authentication and authorization in Azure App Service (Easy Auth) provided by App Service or you could manually use Microsoft.AspNetCore.Authentication.JwtBearer package in your project for JWT authentication. Detailed code snippet, you could follow here.

Additionally, I would recommend you create each AAD app for your front-end web app and Api web app.