authentication to azure ad protected app using id_token

Question

I have two app services both protected using azure ad authentication configured from azure portal.

The front end app service is written angular. and the authentication method i follow is as follows.

1. On load of angular app . send get request to .auth/me which returns me id_token which in my understanding is my auth token.
2. I store this token and then in turn forward this token in header as Authorization: Bearer *** to my second app service api's

However i am observing , that maybe second app service ad allows token first load. it is inconsistent and gives 401 unauthorized errors all the time. even within 2-3 mins of usage.

I am unsure if it's the right way to use id_token or another token needs to be used..

Answer 1

You confuse the purpose of ID token and access token.

What you should use here is access token.

You backend app is protected web API in this scene.

As adp suggested, you need to follow the specific information:

Your app registration must expose at least one scope or one application role. Scopes are exposed by web APIs that are called on behalf of a user.

Application roles are exposed by web APIs called by daemon applications (that calls your web API on their own behalf).

If you create a new web API app registration, choose the access token version accepted by your web API to 2. For legacy web APIs, the accepted token version can be null, but this value restricts the sign-in audience to organizations only, and personal Microsoft accounts (MSA) won't be supported.

The code configuration for the web API must validate the token used when the web API is called.

The code in the controller actions must validate the roles or scopes in the token.

There is a sample in Github.

To protect your API with Azure AD, you need to register two Azure AD apps, one is for client app (front) and the other is for API app (backend).

In the API app, you need to expose API. By doing step 7 and step 8, you can expose the scope.

Then you need to configure the client app. With step 8 here, you can add the permission (scope) which is exposed by API app to the client app.

Use MSAL to request the access token, which includes this permission (scope). You can verify it in your code. If the permission is what you expected, the client is allowed to access your API.