Blazor WASM(独立)B2C身份验证，具有Azure功能应用程序身份验证 [英] Blazor WASM (standalone) B2C auth with Azure Function App authentication

问题描述

我正在开发一个Blazor WASM独立(不是ASP.NET核心托管的)应用程序，它已经与我的B2C租户集成在一起，用于用户身份验证。 我能够成功地针对B2C进行身份验证，没有问题。

在另一个Azure目录中，我有一个启用了身份验证的Azure功能应用程序。我使用的是Microsoft身份验证，身份验证设置为使用相同的B2C租约。作为一个测试，我可以通过在API请求的头中传递JWT承载令牌来确认我能够使用auth成功地调用各种函数。 将以下内容添加到http客户端即可实现这一点

httpClient.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", "eyJ0eXAiOiJKV1QiLCJhbGciOiJS_WTAiGTyfEHuXjlFh5FOo8hBk1V7GFjzUn4TUOHIOjg3uDAaL730J8PewVvE8xyaG1MllR1JRjDz1D95bMch7QMqXZ-sRuUzvWdvBK_IkQ…");

但是，这显然只是一个测试。

我试图实现的是在最初的B2C登录请求期间获得的持有者令牌在进行后续API调用时使用.然而，我似乎无法在Blazor WASM中实现这一点。我相信在Blazor服务器中可以通过

var accessToken = await HttpContext.GetTokenAsync("access_token");
var refreshToken = await HttpContext.GetTokenAsync("refresh_token");

查看How to secure an Azure Function accessed by a Blazor Wasm app with Azure AD B2C?上的文章链接，我遵循了列出的详细信息(注意到较新的应用程序注册和应用程序(旧版)&之间存在差异)，但没有太多运气。当调用FetchData页面时，它似乎并没有传递令牌。

这是My Program.cs页面的副本：

using B2CBlazorWASMNotHosted;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using System.Net.Http;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.AspNetCore.Components;

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

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// register CustomAuthorizationMessageHandler 
builder.Services.AddScoped<CustomAuthorizationMessageHandler>();

// configure httpclient
// call the following code please add packageMicrosoft.Extensions.Http 3.1.0
builder.Services.AddHttpClient("ServerAPI", client =>
  client.BaseAddress = new Uri("https://myfunctionapp.azurewebsites.net"))
        .AddHttpMessageHandler<CustomAuthorizationMessageHandler>();

// register the httpclient
builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>()
 .CreateClient("ServerAPI"));

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
      options.ProviderOptions.LoginMode = "redirect";
    options.ProviderOptions.DefaultAccessTokenScopes.Add("https://myb2ctenant.onmicrosoft.com/8f7ece0f-a4ef-4f96-9a24-fc4e2ced9504/AccessAPI");

});


await builder.Build().RunAsync();
public class CustomAuthorizationMessageHandler : AuthorizationMessageHandler
{
    public CustomAuthorizationMessageHandler(IAccessTokenProvider provider,
        NavigationManager navigationManager)
        : base(provider, navigationManager)
    {
        ConfigureHandler(
            authorizedUrls: new[] { "myfunctionapp.azurewebsites.net" },
            scopes: new[] { "myb2ctenant.onmicrosoft.com/8f7ece0f-a4ef-4f96-9a24-fc4e2ced9504/AccessAPI" });
    }
}

在Azure门户中，我目前有两个不同的应用注册。1用于Blazor WASM应用程序身份验证，另一个用于Function App。APP注册设置截图如下：

调用接口的代码如下：

var httpClient = new HttpClient();
var source = new CancellationTokenSource();
var centreguid = new Centre { centreguid = "CA8E99BC-F5B0-4A54-A8BF-C9AE9E95EE44" };
   
var response = await httpClient.PostAsJsonAsync("https://myfunctionapp.azurewebsites.net/api/GetArenasForCentre?", centreguid, source.Token);
string stringresponse = await response.Content.ReadAsStringAsync();
var result = JsonConvert.DeserializeObject<parentArenas>(stringresponse);

arenas = result.ArenaDetails;

Console.WriteLine("json output:");

如果我在var结果上放置断点，我可以看到返回以下消息：

401您没有查看此目录或页面的权限。

谁能给我指个方向，请问我做错了什么？也许有更好的方法来实现这一点。

---

其他信息：

与对函数应用程序使用单独的应用程序注册相反，我还尝试使用相同的SPA应用程序注册表，并将函数App auth配置为使用此应用程序注册表...但不幸的是无济于事。 我还在此应用程序注册上设置了相同的APIAccess作用域(老实说，我甚至不确定这是否需要应用程序作用域)

推荐答案

我在接口的App注册中公开了一个入口接口：

我在客户端添加了一个API权限

在WASM客户端上，您需要将作用域的请求添加到配置。

这篇关于Blazor WASM(独立)B2C身份验证，具有Azure功能应用程序身份验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！