question

TrevorDaniel-7811 avatar image
0 Votes"
TrevorDaniel-7811 asked RakeshJagatap-4451 commented

Blazor WebAssembly App protected by AD accessing API protected by AD

Hoping for some guidance if possible.

I'm new to Blazor and not a huge expert in the AD area either

I have setup an API which is protected by AD and protected my controllers... they throw a 401 if i try and call them in a browser
I have setup a basic Blazor Webassembly app which is protected by AD and lets me login with no error.

But, within the Blazor app, i want to be able to call the API.

Do i need to give access to the Blazor App to use the API in AD?

azure-active-directorydotnet-aspnet-core-blazor
· 4
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.

@TrevorDaniel-7811, just checking in to see if you got a chance to see my response.

0 Votes 0 ·

@TrevorDaniel-7811, just checking in to see if you got a chance to see my response.

0 Votes 0 ·

II did. thank you very much for taking the time to answer.

I have been pulled off onto something else unfortunately. Hoping to get back to this early next week.

Trev

1 Vote 1 ·

Hi, if the posted answer resolves your question, please mark it as the answer by clicking the check mark. Doing so helps others find answers to their questions.

0 Votes 0 ·

1 Answer

singhh-msft avatar image
0 Votes"
singhh-msft answered

@TrevorDaniel-7811, thank you for reaching out to us. To call a protected Web API from Blazor WebAssembly Web App, you will have to perform below steps:

  • Add Scope to your Web API.

  • Enable Implicit grant flow in your Web App.

  • Create custom AuthorizationMessageHandler in Web App for calling your Web API:

     using Microsoft.AspNetCore.Components;
     using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
        
     public class CustomAuthorizationMessageHandler : AuthorizationMessageHandler
     {
         public CustomAuthorizationMessageHandler(IAccessTokenProvider provider,
             NavigationManager navigationManager)
             : base(provider, navigationManager)
         {
             ConfigureHandler(
                 authorizedUrls: new[] { "https://localhost:44300/" },
                 scopes: new[] { "the API app scope" });
         }
     }
    

  • Add below code to your Web App's Program.cs:

     public class Program
     {
         public static async Task Main(string[] args)
         {
             var builder = WebAssemblyHostBuilder.CreateDefault(args);
             builder.RootComponents.Add<App>("app");
    
             builder.Services.AddScoped<CustomAuthorizationMessageHandler>();
             // register HTTP client to call our own api
             builder.Services.AddHttpClient("MyAPI", client => client.BaseAddress = new Uri("https://localhost:44300/"))
               .AddHttpMessageHandler<CustomAuthorizationMessageHandler>();
      
             builder.Services.AddMsalAuthentication(options =>
             {
                 builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
                 options.ProviderOptions.DefaultAccessTokenScopes.Add("<the API app scope>");
                 options.ProviderOptions.AdditionalScopesToConsent.Add("https://graph.microsoft.com/User.Read");
             });
    
             await builder.Build().RunAsync();
         }
     }
    
  • Now, you can call your API:

     @inject IHttpClientFactory _clientFactory
    
     var httpClient = _clientFactory.CreateClient("<the client name you register>");
     await httpClient.GetStringAsync("path");
    

Do check out this good answer on Stack overflow for more information. Feel free to reach out for any follow-up questions.


Please "Accept the answer" and upvote if the information helped you. This will help us and others in the community as well.






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.