Blazor WASM Static WebApp with Google Auth and Azure Functions

Question

. 。 Answers to this question are eligible for a +250 reputation bounty. Bounty grace period ends in 20 hours . Martin Smith wants to to this question. 这个问题。

I used the standard blazorwasm template with individual authentication. I managed to authenticate using Google Authentication using OIDC.

Program.cs

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped<CustomAuthorizationMessageHandler>();

builder.Services.AddOidcAuthentication(options =>
{
    builder.Configuration.Bind("google", options.ProviderOptions);
    options.ProviderOptions.DefaultScopes.Add("email");
});

builder.Services.AddHttpClient("azure-function", client => client.BaseAddress = new Uri("https://someblog.azurewebsites.net/"))
       .AddHttpMessageHandler<CustomAuthorizationMessageHandler>();

builder.Services.AddTransient(sp => sp.GetRequiredService<IHttpClientFactory>()
                                      .CreateClient("azure-function"));

await builder.Build().RunAsync();

CustomAuthorizationMessageHandler.cs

public class CustomAuthorizationMessageHandler : AuthorizationMessageHandler
{
    public CustomAuthorizationMessageHandler(IAccessTokenProvider provider, NavigationManager navigationManager)
        : base(provider, navigationManager)
    {
        ConfigureHandler(
            new[] { "https://someblog.azurewebsites.net/api/" });
    }
}

Next I created an Azure Function app also using Google Authentication. If I go to the function URL I get redirected to login and then the function works.

I would like to know how do I call the Azure Function TestAuth from Blazor Client side because even though I'm authenticated on the Blazor App I still get a 401 for the Function App. I need to somehow delegate the Authentication or do it another way. I don't want to use AAD OR B2C just a Google account.

TestAuth.razor

@page "/testAuth"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject HttpClient httpClient
@inject IAccessTokenProvider _tokenProvider

<p>test auth</p>
@if (response != null)
{
<p>@response.StatusCode</p>
<p>@response.Content.ReadAsStringAsync().GetAwaiter().GetResult()</p>
}
@code {
    private HttpResponseMessage response = null;
    protected override async Task OnInitializedAsync()
    {
        response = await httpClient.GetAsync("TestAuth?code=IHBjq3cyHxyg3cQVKSTl0pnIFzff093//PE9gavHD5MWjDoUeB5vGA==");
    }
}

As I understand it, because I added CustomAuthorizationMessageHandler it should attach the Bearer Token to requests made to my authorized URLs, ie the Function App, however looking at the dev tools I cant see the token being added

Am I missing something simple? Any pointers will be appreciated.

Answer 1

I think this one is not about your code but the way you configure the authentication flow should be looking at. When Google issues a token, the audience is statically added into the returned token. In your case, Google returns a token for your application not for your Azure Function, thats why you cannot use it for your Azure Function.