WebAssembly Razor client app return 401 while calling a protected API in Azure with Admin Role

Question

I have API protected by Azure AD where Authentication is required to get access data, where I expose the API with only one simple scope for now.

The API and client app both are registered in Azure AD. Roles are also configured for the API, only a a user with Admin role can call my API.

Do I need to assign this Admin role as well to the client App? or AccessApi scope is enough?

Scopes  Who can consent     Admin consent display name     User consent display name   State 

api://xx  User              AccessApi                      AccessApi                 Enable

And a client application build using webassembly blazor also registered in Azure AD, and its configured with Api permission to use delegated access to AccessApi.

API / Permissions name  Type       Description   Admin consent required    Status
myApi (1)   

AccessApi              Delegated     AccessApi              No

I configured webassembly blazor client application to authenticate against azure and get token and use that token to call myApi, however I keep getting loading but no data is being displayed without any error.

Im not sure what went wrong here ?

program class of client application:

 private static string scope = @"api://xxx/AccessApi";

...

            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");


            builder.Services.AddScoped<GraphAPIAuthorizationMessageHandler>();

            builder.Services.AddHttpClient("ServerAPI",
                client => client.BaseAddress = new Uri("https://localhost:44314"))
                .AddHttpMessageHandler<GraphAPIAuthorizationMessageHandler>();

            builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>()
                .CreateClient("ServerAPI"));

            builder.Services.AddMsalAuthentication(options =>
            {
                builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
                options.ProviderOptions.DefaultAccessTokenScopes.Add(scope);
            });

At fetch data razor page I imported all necessary libraries

@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject IAccessTokenProvider TokenProvider
@attribute [Authorize]

@inject NavigationManager UriHelper
@inject HttpClient Http

...

data = await Http.GetFromJsonAsync<data[]>(@"API-url--runs-locally-on-docker");

The authorization message handler class

 private static string scope = @"api://xxx/AccessApi";
    public GraphAPIAuthorizationMessageHandler(IAccessTokenProvider provider,
        NavigationManager navigationManager)
        : base(provider, navigationManager)
    {
        ConfigureHandler(
            authorizedUrls: new[] { "https://localhost:44314" },
            scopes: new[] { scope });
    }

After authenticated myself with Azure AD account, the client app shows loading.. but no data is being displayed. at the console level shows this error.

Failed to load resource: the server responded with a status of 401 (Unauthorized)

I followed Microsoft documentation and I'm not sure what I'm missing here. what could be wrong here ?

Update

The Api expose tab:

Api permission for the client app:

You could possibly help us help you by figuring out how far through Main() you get before the crash occurs. I don't have knowledge of this code environment, but you should step through it if you're able, otherwise delete code from the end of Main() backwards until it doesn't crash, and then you know the code you most recently deleted was where it crashed. — Aiken Drum
– Aiken Drum, Commented Apr 22, 2021 at 22:53
I added more description to the whole picture and work flow im trying to achieve. — ikenahim
– ikenahim, Commented Apr 23, 2021 at 11:56
Use jwt.ms to parse the access token and provide a screenshot. — Carl Zhao
– Carl Zhao, Commented Apr 28, 2021 at 7:36
I cant see where the token is been send to the Api. the data = await Http.GetFromJsonAsync<data[]>(@"API-url--runs-locally-on-docker"); does that automatically somehow — ikenahim
– ikenahim, Commented Apr 28, 2021 at 7:38
Can you provide a screenshot of Expose an API of the api application? By the way, you also need to add the client application to the api. i.sstatic.net/tG0co.png — Carl Zhao
– Carl Zhao, Commented Apr 28, 2021 at 7:47

Carl Zhao · Accepted Answer · 2021-04-28 09:11:20Z

1

Obviously, your scope is set incorrectly. You should set the scope to the client id of the api application instead of the client id of the client application. In your question, I think your scope should be: api://7b4d6df9-63cd-4ed7-881bxxx/AccessApi.

Parse the token and you should see scp claim and roles claim.

answered Apr 28, 2021 at 9:11

Carl Zhao

9,6752 gold badges15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

ikenahim Over a year ago

Im lost here, can you please explain more? I defined scope in Api and that scope is used by the client application. what is wrong here?

Carl Zhao Over a year ago

@ikenahim The scope is only granted to the client application by you, and it will be displayed in the token.

Carl Zhao Over a year ago

@ikenahim Try it out according to my method and see how it turns out.

ikenahim Over a year ago

I created scope AccessApi in the Api and expose this scope, and the client application use this scope. I still dont understand you :/.

ikenahim Over a year ago

Do you mean the scope has be created in the client application ? not at the API?

|

Collectives™ on Stack Overflow

WebAssembly Razor client app return 401 while calling a protected API in Azure with Admin Role

1 Answer 1

17 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

17 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related