question

GuttormHaaversen-9023 avatar image
0 Votes"
GuttormHaaversen-9023 asked GuttormHaaversen-9023 commented

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

Hi.

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


Any clues to solve this issue would be greatly appreciated.
At the moment our best guess is that we have not set up the API and the Client correctly in Azure AD.

azure-ad-authenticationdotnet-aspnet-webapi
· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Your code seems correct but for some reason the API does not seem to like the bearer token it seems. can you try to check if your API is registered properly in the AAD instance as mentioned here. https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-configure-app-expose-web-apis ?

0 Votes 0 ·

I followed this recipy.

In the api app registration in expose an api, I allowed admins and users to consent to the scope(s)
In the client app registration in API permissions, I added these (scopes) as delegated permissions.
The heading: Admin Consent Required read: No

0 Votes 0 ·

It seems to me that multitenant usage is impossible using reactjs and the msal browser against Active Directory.

0 Votes 0 ·

0 Answers