NET Maui DataSyncClientOptions HttpPipeline

Question

I have a working Net Maui application that uses offline DataSync. I would like to add an ApiKey header to each request but the URL generated does not seem to be correct.

My code is as follows:

....

public class MyHandler : DelegatingHandler
{
    protected override async Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
    {
        // Change the request-side here based on the HttpRequestMessage
        request.Headers.Add("XApiKey", "abc123");

        // Do the request
        var response = await base.SendAsync(request, cancellationToken);

        // Change the response-side here based on the HttpResponseMessage

        // Return the modified response
        return response;
    }
}

....

var options = new DatasyncClientOptions
{
    HttpPipeline = new DelegatingHandler[] { new MyHandler() },
    OfflineStore = store
};

....

The response is as below:

{Method: GET, RequestUri: 'https://mybackendservice.azurewebsites.net/tables/location?$orderby=updatedAt&$count=true', Version: 1.1, Content: <null>, Headers:
{
  ZUMO-API-VERSION: 3.0.0
  User-Agent: Datasync/5.1.0.0 (lang=dotnet6;os=Windows/Microsoft Windows NT 10.0.22621.0;arch=X64;version=5.1.0.0)
  X-ZUMO-VERSION: Datasync/5.1.0.0 (lang=dotnet6;os=Windows/Microsoft Windows NT 10.0.22621.0;arch=X64;version=5.1.0.0)
  XApiKey: abc123
  Accept-Encoding: gzip
}}

https://mybackendservice.azurewebsites.net/tables/location?$orderby=updatedAt&$count=true

https://mybackendservice.azurewebsites.net/tables/location?XApiKey=abc123 (<- I was expecting something like this as the request?)

404 - Not Found

Any help appreciated. Thanks Paul.

Answer 1

According to the code you gave, it appears that you are utilising an DeleatingHandler to include the XApiKey header in the request. The response's generated URL is the proper one for the request, but it is missing the XApiKey header you added. You must change MyHandler class to add the XApiKey header to the URL's query string. Here is an illustration of how to change the MyHandler class so that the XApiKey header is added to the query string:-

public class MyHandler : DelegatingHandler
{
    protected override async Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
    {
        // Change the request-side here based on the HttpRequestMessage
        request.RequestUri = new UriBuilder(request.RequestUri)
        {
            Query = $"XApiKey=abc123&{request.RequestUri.Query.TrimStart('?')}"
        }.Uri;

        // Do the request
        var response = await base.SendAsync(request, cancellationToken);

       

        // Return the modified response
        return response;
    }
}

The UriBuilder's Query attribute is used to append the XApiKey header to the query string while retaining any existing query parameters.

I tried this sample code to retrieve this API in my maui app like below:-

Updated my MainPage.xaml.css with the code below:-

using System;
using System.Diagnostics;
using System.Net.Http;
using System.Threading.Tasks;

namespace SampleApp
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private async void MakeApiRequestButton_Clicked(object sender, EventArgs e)
        {
            using (var client = new HttpClient())
            {
                // Add the API key as a header
                client.DefaultRequestHeaders.Add("XApiKey", "abc123"); // Replace with your actual API key

                HttpResponseMessage response = await client.GetAsync("https://reqres.in/api/users");

                if (response.IsSuccessStatusCode)
                {
                    var content = await response.Content.ReadAsStringAsync();

                    // Update the Label with the API response content
                    ApiResponseLabel.Text = content;

                    // Handle the response content
                }
                else
                {
                    // Handle errors
                    if (response.StatusCode == System.Net.HttpStatusCode.NotFound)
                    {
                        // Handle 404 Not Found error
                    }
                    else
                    {
                        // Handle other error cases
                        var errorContent = await response.Content.ReadAsStringAsync();
                        // Log or display the error message
                    }
                }
            }
        }
    }
}

My MainPage.xaml with Label to retrieve the response in my home page after I click Make API Request:-

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SampleApp.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label
                Text="Hello, World!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to .NET Multi-platform App UI"
                FontSize="18"
                HorizontalOptions="Center" />
           
            <Label x:Name="ApiResponseLabel"
       Text="API response will be displayed here"
       HorizontalOptions="CenterAndExpand"
       VerticalOptions="CenterAndExpand" />


            <!-- Add a Button to Make API Request -->
            <Button
                Text="Make API Request"
                Clicked="MakeApiRequestButton_Clicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

AppShell.xaml:-

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="SampleApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:SampleApp"
    Shell.FlyoutBehavior="Disabled">

    <ShellContent
    Title="Users"
    ContentTemplate="{DataTemplate local:MainPage}"
    Route="UserList" />


</Shell>

Output:-

Answer 2

(disclaimer: I am the maintainer of Azure Mobile Apps)

You don’t want to add the API key to the query. The query string gets passed down to the TableController{TEntity} in your ASP.NET Core application and is never heard from again. It’s not surprising that it doesn’t work.

What you want to do:

1. Create a middleware for your ASP.NET Core application that looks at the X-APIKey header and compares the value however you want, returning immediate (a 403 Forbidden probably) when the API Key doesn’t work. Test this first outside of your MAUI app. Use Postman or whatever you want. Make sure it’s a header.
2. Add the delegating handler to add a header to the HTTP Request in the client (context.Request.Headers.Add(“X-APIKey”, “MyValue”);). You have most of the code there already - just adjust to use the header.

Now you’ve got an API Key middleware that works with any ASP.NET Core application (including ones based on Azure Mobile Apps) and an API Key delegating handler for a standard HTTP Client that you can re-use with the Azure Mobile Apps client. Everything should now work.