Unable to get UI to call API when using separate registered apps

Question

Unable to get UI to call API when using separate registered apps

Lange Gregory 20

I have been trying for weeks to get my UI to be able to call my api. I have followed the standard of one app registration per application and exposed a scope on my API registration. When using IDownstreamAPI helper to call the api i only ever get Unauthorized. If i try to not use the helper class and build it myself per the examples then i says it cannot pull back my token. My UI app has been given admin consent for the tenet i need it on and the API app doesn't have any api permissions needed so i wouldn't think it would need consent also. As a point of reference i have been following https://learn.microsoft.com/en-us/azure/active-directory/develop/quickstart-configure-app-access-web-apis to try and get my solution working with not success.

Lange Gregory 20

It is just throwing 401 unauthorized on the below call in code. I left the default Weather controller on my API until i had the UI and API talking with them having their own App Registrations.

HttpResponseMessage value = await _DownstreamApi.CallApiForUserAsync("MyAPI", options => { options.BaseUrl = "https://localhost:7214/WeatherForecast"; }).ConfigureAwait(false);

Here is my WebAPI auth section of Program.cs

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApi(options =>
    {
        ConfigurationBinder.Bind(builder.Configuration.GetSection("EntraId"), options);
        options.Events = new JwtBearerEvents
        {
            OnTokenValidated = async context =>
            {
                string[] allowedClientApps =
                {
                    "---------"
                };
                string clientappid = context?.Principal?.Claims.FirstOrDefault(x => x.Type == "azp" || x.Type == "appid")?.Value;

                if (!allowedClientApps.Contains(clientappid))
                {
                    throw new UnauthorizedAccessException("The Client app is not permitted to access this API");
                }

                await Task.CompletedTask;
            }
        };
    }, options => ConfigurationBinder.Bind(builder.Configuration.GetSection("EntraId"), options));

AzureAD Screenshot 2023-08-25 at 7.57.12 AM

Lange Gregory 20 Reputation points

2023-08-25T13:39:40.5933333+00:00
I know of a few ways to call the api and depending on which way i do it will also determine the error message returned. My prior comment is the original way and below is the other way i use for testing.

var results = _DownstreamApi.GetForUserAsync<object>("MyAPI", options => { options.BaseUrl = "https://localhost:7214/WeatherForecast"; });

This way normally throws WaitingForActivation but this morning when testing between the two methods the the one shown here just comes back null instead of throwing the WaitingForActivation error.
Akshay-MSFT 17,951 Reputation points Microsoft Employee Moderator

2023-09-13T11:20:47.1266667+00:00

@Lange Gregory

Looks to be a scope relate issue while calling the API. Kindly ensure your app have appropriate scope to get an access token. For ref you may follow : Angular single-page application using MSAL Angular to authenticate users with Azure AD for Customers and call a protected ASP.NET Core web API

Update 1:

Below are the things OP changed based off looking at the sample project.

Program.cs (API)

app.MapControllers();

to

app.UseEndpoints(endpoints => {

_ = endpoints.MapControllers();

});

On the controller in question that is calling the IDownstream helper i had to add: [AuthorizeForScopes(ScopeKeySection = "DownstreamApi:Scopes")]

Thanks,

Akshay Kaushik
Lange Gregory 20 Reputation points

2023-09-13T14:01:14.0266667+00:00

I forgot to come back here and relay i now have this working. I made a few modifications based off the GitHub samples which seemed to do the trick. Not sure why but it was all i needed below are the things i changed based off looking at the sample project.

Program.cs (API)

app.MapControllers();

to

app.UseEndpoints(endpoints => {

_ = endpoints.MapControllers();

});

On the controller in question that is calling the IDownstream helper i had to add: [AuthorizeForScopes(ScopeKeySection = "DownstreamApi:Scopes")]

Without that it never works even if the user is authorized via [Authorize] placed at top of controller. So i may have to look into what that is doing and extend it or roll it into my base Authorize i have made.
Akshay-MSFT 17,951 Reputation points Microsoft Employee Moderator

2023-09-18T08:11:51+00:00

@Lange Gregory

Thank you for confirmation, I have edited the above answer with the suggestion you have made.

Since the Microsoft Q&A community has a policy that "The question author cannot accept their own answer. They can only accept answers by others ", I'll request you to "Accept " the answer.

Thanks,

Akshay Kaushik

Accepted answer

0 additional answers

Your answer

Lange Gregory 20 Reputation points

2023-08-25T13:00:57.1233333+00:00

It is just throwing 401 unauthorized on the below call in code. I left the default Weather controller on my API until i had the UI and API talking with them having their own App Registrations.

HttpResponseMessage value = await _DownstreamApi.CallApiForUserAsync("MyAPI", options => { options.BaseUrl = "https://localhost:7214/WeatherForecast"; }).ConfigureAwait(false);

Here is my WebAPI auth section of Program.cs

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme) .AddMicrosoftIdentityWebApi(options => { ConfigurationBinder.Bind(builder.Configuration.GetSection("EntraId"), options); options.Events = new JwtBearerEvents { OnTokenValidated = async context => { string[] allowedClientApps = { "---------" }; string clientappid = context?.Principal?.Claims.FirstOrDefault(x => x.Type == "azp" || x.Type == "appid")?.Value; if (!allowedClientApps.Contains(clientappid)) { throw new UnauthorizedAccessException("The Client app is not permitted to access this API"); } await Task.CompletedTask; } }; }, options => ConfigurationBinder.Bind(builder.Configuration.GetSection("EntraId"), options));

AzureAD
Lange Gregory 20 Reputation points

2023-08-25T13:39:40.5933333+00:00

I know of a few ways to call the api and depending on which way i do it will also determine the error message returned. My prior comment is the original way and below is the other way i use for testing.

var results = _DownstreamApi.GetForUserAsync<object>("MyAPI", options => { options.BaseUrl = "https://localhost:7214/WeatherForecast"; });

This way normally throws WaitingForActivation but this morning when testing between the two methods the the one shown here just comes back null instead of throwing the WaitingForActivation error.
Akshay-MSFT 17,951 Reputation points Microsoft Employee Moderator

2023-09-13T11:20:47.1266667+00:00

@Lange Gregory

Looks to be a scope relate issue while calling the API. Kindly ensure your app have appropriate scope to get an access token. For ref you may follow : Angular single-page application using MSAL Angular to authenticate users with Azure AD for Customers and call a protected ASP.NET Core web API

Update 1:

Below are the things OP changed based off looking at the sample project.

Program.cs (API)

app.MapControllers();

to

app.UseEndpoints(endpoints => {

_ = endpoints.MapControllers();

});

On the controller in question that is calling the IDownstream helper i had to add: [AuthorizeForScopes(ScopeKeySection = "DownstreamApi:Scopes")]

Thanks,

Akshay Kaushik
Lange Gregory 20 Reputation points

2023-09-13T14:01:14.0266667+00:00

I forgot to come back here and relay i now have this working. I made a few modifications based off the GitHub samples which seemed to do the trick. Not sure why but it was all i needed below are the things i changed based off looking at the sample project.

Program.cs (API)

app.MapControllers();

to

app.UseEndpoints(endpoints => {

_ = endpoints.MapControllers();

});

On the controller in question that is calling the IDownstream helper i had to add: [AuthorizeForScopes(ScopeKeySection = "DownstreamApi:Scopes")]

Without that it never works even if the user is authorized via [Authorize] placed at top of controller. So i may have to look into what that is doing and extend it or roll it into my base Authorize i have made.
Akshay-MSFT 17,951 Reputation points Microsoft Employee Moderator

2023-09-18T08:11:51+00:00

@Lange Gregory

Thank you for confirmation, I have edited the above answer with the suggestion you have made.

Since the Microsoft Q&A community has a policy that "The question author cannot accept their own answer. They can only accept answers by others ", I'll request you to "Accept " the answer.

Thanks,

Akshay Kaushik

Answer 1

@Lange Gregory

Kindly share the screenshot or full error message after (removing PII) you are getting while trying to call the API from UI app.

Update1:

Looks to be a scope relate issue while calling the API. Kindly ensure your app have appropriate scope to get an access token. For ref you may follow : Angular single-page application using MSAL Angular to authenticate users with Azure AD for Customers and call a protected ASP.NET Core web API

Update 2:

Below are the things OP changed based off looking at the sample project.

Program.cs (API)

app.MapControllers();

to

app.UseEndpoints(endpoints => {

_ = endpoints.MapControllers();

});

On the controller in question that is calling the IDownstream helper i had to add: [AuthorizeForScopes(ScopeKeySection = "DownstreamApi:Scopes")]

Thanks,

Akshay Kaushik

Share via

Unable to get UI to call API when using separate registered apps

0 additional answers

Your answer