首页 > 解决方案 > 使用 Blazor WebAssembly 使用第三方 API

问题描述

我有一个第三方 API (api.foo.com),受身份验证和授权保护。我无法编辑服务器设置。

我想创建一个 Blazor WebAssembly (.NET 5) 应用程序并使用这个 REST API。

在我的程序课上,

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        // builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
        builder.Services.AddHttpClient<FooClient>(c => c.BaseAddress = "https://api.foo.com/v1/");
    }
}

我的FooClient

public class FooClient
{
    private readonly HttpClient _httpClient;
    public FooClient(HttpClient httpClient) => _httpClient = httpClient;
    public Task<Foo> GetFoo(int id) => _httpClient.GetFromJsonAsync<Foo>("foo/" + id);
    // ... other as GetAll(), Edit(Foo), ...
}

当我尝试时,我的浏览器控制台显示:

CORS 策略阻止了从源“https://localhost:5001”获取“https://api.foo.com/api/Authentification”的访问权限:对预检请求的响应未通过访问控制检查:否请求的资源上存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求,请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

我尝试添加Microsoft.AspNetCore.CorsNuGet 包并实现Startup类的等价物。我还没有找到在哪里可以注册Startup该类。

我尝试在我FooClient的 as 中添加 CORS 标头:

_httpClient.DefaultRequestHeaders.Add("Access-Control-Allow-Origin", "*");
_httpClient.DefaultRequestHeaders.Add("Access-Control-Allow-Methods", "*");
_httpClient.DefaultRequestHeaders.Add("Access-Control-Allow-Headers", "*");

我尝试将 HttpMessangeHandler 添加到我的 FooClient,在Program.Main

builder.Services
    .AddHttpClient<AltevaClient>(c => c.BaseAddress = new Uri("https://api.foo.com/v1/"))
    .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

...并实现我自己的版本:

public class FooApiAuthorizationMessageHandler : AuthorizationMessageHandler
{
    public AltevaApiAuthorizationMessageHandler(
        IAccessTokenProvider provider, 
        NavigationManager navigationManager)
        : base(provider, navigationManager)
    {
        ConfigureHandler(
            authorizedUrls: new[] { "https://api.foo.com/v1/" },
            scopes: new[] { "example.read", "example.write" });
    }
}

在最后两种情况下,我的浏览器控制台显示:

致命一击:Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] 未处理的异常呈现组件:没有为类型“Microsoft.AspNetCore.Components.WebAssembly.Authentication.BaseAddressAuthorizationMessageHandler”注册的服务。

好的!上面AddHttpClient,我试图添加BaseAddressAuthorizationMessageHandler服务。

builder.Services.AddScoped<BaseAddressAuthorizationMessageHandler>();

浏览器的控制台显示:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer [100] 未处理的异常呈现组件:尝试激活“Microsoft.AspNetCore.Components.WebAssembly”时无法解析类型“Microsoft.AspNetCore.Components.WebAssembly.Authentication.IAccessTokenProvider”的服务.Authentication.BaseAddressAuthorizationMessageHandler'。

而且我无法注册IAccessTokenProvider为服务。

无法为服务类型“Microsoft.AspNetCore.Components.WebAssembly.Authentication.IAccessTokenProvider”实例化实现类型“Microsoft.AspNetCore.Components.WebAssembly.Authentication.IAccessTokenProvider”。

...而且我没有找到“默认”实现...

标签: c#apiasp.net-coreblazorblazor-webassembly

解决方案


推荐阅读