Azure Identity Platform - Authenticate logged in user against Custom WebAPI Endpoint using ReactJS Client

Question

We have a dotnet Aspnet WebAPI based API using .Net Framework 4.7.2 which we access using a ReactJs client Application.

We want to authenticate users logged in as an Azure AD user against our API.

Our question is as follows:

How do we set up our API in Azure AD to allow for "authenticate users logged in as an Azure AD user"

How do we set up the Azure AD Client for the Azure AD user.

In the API we are using Auth 2.0 in the following manner (in startup):

     private static void ConfigureAuth(IAppBuilder app)
     {
         var clientId = ConfigurationManager.AppSettings["ida:ClientId"];
         var serviceScope = ConfigurationManager.AppSettings["ida:ServiceScope"];
         app.UseOAuthBearerAuthentication(new OAuthBearerAuthenticationOptions
         {
             AccessTokenFormat = new JwtFormat(
                 new TokenValidationParameters
                 {
                     ValidAudiences = new[] { clientId, serviceScope },
                     // Change below to 'true' if you want this Web API to accept tokens issued to one Azure AD tenant only (single-tenant)
                     // Note that this is a simplification for the quickstart here. You should validate the issuer. For details,
                     // see https://github.com/Azure-Samples/active-directory-dotnet-native-aspnetcore
                     ValidateIssuer = false,
                 },
                 new OpenIdConnectSecurityKeyProvider("https://login.microsoftonline.com/common/v2.0/.well-known/openid-configuration")
             ),
         });
     }

In appsettings in the API we have the following:

<appSettings file='MyAppSettings.config'>
<add key='ida:ClientId' value='<the client app id>' />
<add key='ida:ServiceScope' value='https://....onmicrosoft.com/Login/' />

In our react JS App whe have the following:

import * as msal from '@azure/msal-browser';
const msalConfig = {
auth: {
clientId: '<the client app id>',
authority: 'https://login.microsoftonline.com/common',
},

We are able to log on to azure successfully and aquire a token

We then use this token as a bearer token to call an endpoint in our API using the NPM package @azure/msal-browser' Our endpoint has the [Authenticate] attribute set.

   await APIClient.saveAccessTokenInMemory({
     access_token: tokenResponse.accessToken,
     expires: tokenResponse.expiresOn,
   });
   var config = await this.getConfig(tokenResponse);
   const response = await APIClient.getAD(<our API Endpoint>, config);

We get a 401 in return

Carl Zhao Carl Zhao · Accepted Answer · 2021-04-23T08:56:58

The 401 error means that your token audience does not match the web api client id. You can judge by parsing the token to see the aud claim.

First, you need to register a client application on behalf of the client in Azure AD, and then register an api application on behalf of the web api.

Since you do not need to restrict access to the api based on the user's role, you do not need to configure the app role. You only need to expose the scope of the api application, and then grant the scope to the client application.

Next, go to the client application.

Under 'API permissions' click on 'Add permission', then click on the 'My APIs' tab.
Find your api application and select the appropriate scope.
Click 'Add permissions'.
Grant admin consent for your APIs.

Then, I use the auth code flow to get the user token.

1.Request an authorization code in the browser.

https://login.microsoftonline.com/{tenant id}/oauth2/v2.0/authorize?
client_id={client app client id}
&response_type=code
&redirect_uri={redirect_uri}
&response_mode=query
&scope=api://{api app client id}/{scope name}
&state=12345

2.Redeem token.

Parse the token：

The token will contain the information of the AD user and the client id of the api application.

Azure Identity Platform - Authenticate logged in user against Custom WebAPI Endpoint using ReactJS Client

1 Answers