如何在.NET 8.0 Blazor客户端项目中安全调用需令牌的第三方API？

先明确最关键的底线：绝对不能把第三方API的令牌或敏感密钥放在WASM客户端里——WASM的DLL会全量下载到用户浏览器，逆向获取这些信息简直是小菜一碟。所有涉及敏感认证的操作，必须交给后端（Blazor Server项目或者单独的API网关）来做。

下面是几个落地的方案，按需选择：

1. 后端中转API（最通用、最稳妥的方案） #

不管是Server还是WASM渲染模式，客户端统一调用自己后端的中转接口，由后端去和第三方API打交道：

• 操作步骤：
  • 在Blazor Server项目里加个控制器，比如叫ThirdPartyProxyController
  • 第三方API的令牌存在后端的配置里（开发环境用User Secrets，生产环境用Azure Key Vault或者其他机密管理工具，绝对不能硬写代码里）
  • Blazor组件不管在哪种模式下，都调用这个中转接口，后端负责给第三方API加授权头、转发请求、返回结果
• 示例代码：
  后端控制器：

  [ApiController]
  [Route("api/proxy")]
  public class ThirdPartyProxyController : ControllerBase
  {
      private readonly IConfiguration _config;
      private readonly HttpClient _httpClient;
  
      public ThirdPartyProxyController(IConfiguration config, HttpClient httpClient)
      {
          _config = config;
          _httpClient = httpClient;
      }
  
      [HttpGet("get-data")]
      public async Task<IActionResult> FetchThirdPartyData()
      {
          var apiToken = _config["ThirdPartyApi:AccessToken"];
          _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", apiToken);
          
          var thirdPartyResponse = await _httpClient.GetAsync("https://your-third-party-api.com/target-endpoint");
          thirdPartyResponse.EnsureSuccessStatusCode();
          
          var responseContent = await thirdPartyResponse.Content.ReadAsStringAsync();
          return Content(responseContent, thirdPartyResponse.Content.Headers.ContentType);
      }
  }
  

  Blazor组件调用：

  @inject HttpClient Http
  
  <div>@_apiResponse</div>
  
  @code {
      private string? _apiResponse;
  
      protected override async Task OnInitializedAsync()
      {
          _apiResponse = await Http.GetStringAsync("/api/proxy/get-data");
      }
  }
  

• 好处：完全隔离敏感信息，客户端碰不到令牌；而且不管是Server还是WASM模式，组件的调用逻辑完全一致，不用额外适配。

2. 用OAuth2客户端凭证流（第三方API支持的话优先用） #

如果第三方API支持OAuth2的客户端凭证流，让后端自己去拿短期访问令牌：

• 后端按需（或定时）向第三方的授权服务器请求短期令牌，存在内存或缓存里
• 客户端调用中转接口时，后端用这个短期令牌去调用第三方API
• 注意：短期令牌过期后要自动刷新，别用长期密钥直接硬怼。

3. Server模式直接调用（可选优化） #

如果组件在Server模式渲染时，可以直接在后端逻辑里调用第三方API，不用走中转——但WASM模式还是得走中转：

• 在组件里判断当前渲染模式，分情况处理：

  @inject IHttpContextAccessor HttpContextAccessor
  @inject IConfiguration Configuration
  @inject HttpClient Http
  
  <div>@_apiData</div>
  
  @code {
      private string? _apiData;
  
      protected override async Task OnInitializedAsync()
      {
          var isServerRendered = HttpContextAccessor.HttpContext != null;
          if (isServerRendered)
          {
              // Server模式下直接后端调用
              var apiToken = Configuration["ThirdPartyApi:AccessToken"];
              using var client = new HttpClient();
              client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", apiToken);
              _apiData = await client.GetStringAsync("https://your-third-party-api.com/target-endpoint");
          }
          else
          {
              // WASM模式下走中转
              _apiData = await Http.GetStringAsync("/api/proxy/get-data");
          }
      }
  }
  

• 提醒：这种方式会让组件逻辑变复杂，除非Server模式下有性能需求，否则还是用统一的中转方案更省心。

几个必须注意的点 #

• 后端的敏感配置别硬写，开发环境用User Secrets，生产环境用Azure Key Vault或者其他机密管理工具
• 中转接口要加权限验证，别什么阿猫阿狗都能调用
• 如果第三方API需要的是用户级别的令牌（比如用户登录后拿到的令牌），那得用OAuth2授权码流，让用户登录后获取令牌，再由后端中转使用——这种情况下令牌是用户专属的，不是后端的敏感密钥，相对安全。

内容的提问来源于stack exchange，提问作者Lukas