Blazor WebAssembly Query Strings

Question

What is the preferred method to pass a query string in Blazor Webassembly? For example, I can pass the integer ID, but that is easy to change. Or do I not use query string and use protectedSessionStorage?

Answer 1

Blazor .net8 - In shared project declare class, Filename IHelpersRepository:

 public interface IHelpersRepository
{
    Task <string> ProtectData(string data);
    Task <string> UnProtectData(string data);
}

In client project declare class, Filename HelpersService reference IHelpersRepository:

    public class HelpersService : IHelpersRepository
{
    private readonly HttpClient httpClient;

    public HelpersService(HttpClient httpClient)
    {
        this.httpClient = httpClient;
    }

    //note this is returning JSON string which expects a string to start with { use the code below. Just return a string
    public async Task<string> ProtectData(string data)
    {
        var results = await httpClient.GetAsync("api/Helpers/ProtectData/" + data);
        string response = await results.Content.ReadAsStringAsync();
        //var response = await results.Content.ReadFromJsonAsync<string>();
        return response!;
    }

    public async Task<string> UnProtectData(string data)
    {
        var results = await httpClient.GetAsync("api/Helpers/UnProtectData/" + data);
        string response = await results.Content.ReadAsStringAsync();
        //var response = await results.Content.ReadFromJsonAsync<string>();
        return response!;
    }
}

In server project declare class, Filename HelpersRepository reference IHelpersRepository:

public class HelpersRepository : IHelpersRepository
 {
     string key = "AddYourOwnSpecialKeyHere";

     IDataProtector _dataProtector;
     public HelpersRepository(IDataProtectionProvider provider)
     {
         _dataProtector = provider.CreateProtector(GetType().FullName);
     }

     //note this is NOT returning JSON string which expects a string to start with { use the code below. 

     public async Task<string> ProtectData(string data)
     {
         var protectedData = _dataProtector.Protect(data);
         return protectedData.ToString();
     }

     public async Task<string> UnProtectData(string data)
     {
         var UnprotectedData = _dataProtector.Unprotect(data);
         return UnprotectedData.ToString();
     }

 }

In server project add controller, Filename HelpersController:

 [Route("api/[controller]")]
//[Authorize]
[ApiController]

    public class HelpersController : Controller
    {
        private readonly IHelpersRepository _helpersRepo;
        public HelpersController(IHelpersRepository helpersRepo)
        {
            this._helpersRepo = helpersRepo;
        }
    
    
        [HttpGet("ProtectData/{data}")]
        public async Task<ActionResult<string>> ProtectData(string data)
        {
            var res = await _helpersRepo.ProtectData(data);
            return Ok(res);
        }
    
        [HttpGet("UnProtectData/{data}")]
        public async Task<ActionResult<string>> UnProtectData(string data)
        {
            var res = await _helpersRepo.UnProtectData(data);
            return Ok(res);
        }
    
    }

Add to Program.cs on client:
builder.Services.AddScoped<IHelpersRepository, HelpersService>();

Add to Program.cs on server:
builder.Services.AddScoped<IHelpersRepository, HelpersRepository>();
builder.Services.AddDataProtection();


To Protect call as follows From webassembly page:
@inject IHelpersRepository HelperService
string strID = await HelperService.ProtectData(ID.ToString());

To Unprotect call as follows:
@inject IHelpersRepository HelperService
[Parameter] public string ID { get; set; } = "";
string strID = await HelperService.UnProtectData(ID.ToString());