Restrict access to Web API using Blazor WASM

Oliverio Díaz Abood 21 Reputation points
2021-02-07T19:58:16.4+00:00

I'm working on a project for a financial application and after a lot of thought decided to create a web API (using JWT) and, initially, a Blazor frontend. Eventually we will add mobile apps.

So my first idea was to use Blazor WASM. Then thinking about how to secure the API from brute force attacks I realized that HttpClient will run on the client machine so we can't restrict access to the API by IP address.

It seams that Blazor Server is a better option.

What do you think?

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,246 questions
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,425 questions
0 comments No comments
{count} votes

Accepted answer
  1. Michael Wang-MSFT 1,051 Reputation points
    2021-02-08T09:48:17.14+00:00

    Hi, @Oliverio Díaz Abood ,

    There are two solutions for your requirements.

    1. Blazor WebAssembly application with authentication using WebAPI and ASP.NET Core Identity

    This article explains how to create a hosted Blazor WebAssembly app that uses IdentityServer to authenticate users and API calls.

    You could follow

    The structure of first solution is shown below.

    65385-image.png

    Add the Microsoft.AspNetCore.Authentication.JwtBearer NuGet package to the ASP.NET Core server project.

    2. Server-side Blazor application with authentication

    Identity server authentication for pages and added JWT authentication for API.

    services.AddAuthentication(options =>  
    {  
        options.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme;  
        options.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;  
        options.DefaultChallengeScheme = CookieAuthenticationDefaults.AuthenticationScheme;  
    })  
    
    
    [HttpGet]  
    [Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]  
    public async Task<ActionResult<MyCustomResponseModel>> Get([FromQuery] MyCustomRequestModel request)  
    {  
        ...  
    }  
    

    So, it depends on requirments. Below is Pros and Cons of Blazor Server/WASM.

    Pros and Cons Blazor Server

    Advantages

    • Faster loading than WASM
    • Access to secure resources like databases or cloud-based services
    • Supports browsers which don’t support WASM like IE 11
    • C# code is not sent to the browser

    Disadvantages

    • Extra latency due to sending data back and forth
    • No offline support
    • Scalability can be challenging
    • Server required (serverless possible)

    Pros and Cons Blazor WebAssembly

    Advantages

    • Faster UI Code
    • When performance matters use WASM
    • Offline support
    • Can be distributed via CDN, no server required (except for API)
    • Any .Net standard 2.0 C# can be run

    Disadvantages

    • An API layer is required if you want to access secure resources
    • Debugging still a bit limited

    ---
    If the answer doesn’t solve your issue, please provide more details of error that will help us track down what’s happening.
    If the answer is helpful, please click "Accept Answer" and upvote it.
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best Regards,
    Michael Wang

    1 person found this answer helpful.
    0 comments No comments

0 additional answers

Sort by: Most helpful