所以，目前没有一种安全的方式来做我想做的事。基本问题是您不能在浏览器中使用来自 JavaScript 的客户端凭据授予类型。

但是，我认为我有一个很好的工作可以帮助其他人。我相信它不适用于大多数应用程序。而且我相信 OAUTH 正在制定解决方案，因此在不久的将来可能不需要这样做。如果添加了更好的解决方案，我很乐意将其标记为正确答案。谢谢你的帮助。

我的应用程序基本上是一个具有零用户输入的自动化仪表板/广告牌。它提取安全数据并显示它。REACT 应用程序只能在没有输入的墙上的本地 PC 上运行。当 PC 开启时运行脚本。

该脚本使用像 python 这样的 http 服务器来启动构建的 REACT 应用程序。例如：“python -m http.server 8000”

然后脚本以信息亭模式打开浏览器，因此您在屏幕上看到的唯一内容就是应用程序。

到目前为止，这与我之前的情况完全一样。

变通方法： 我创建了一个名为 GetToken 的命令行实用程序。在脚本启动 REACT 应用程序之前，它会像这样调用此实用程序：“gettoken --client Dashboard --file token.json” 此实用程序调用客户端凭据授予类型以获取令牌。然后将该令牌与其他构建的 REACT 文件一起保存到本地 json 文件中。例如：\public\data\token.json

在我的 REACT 应用程序中，它只是加载令牌并使用它。

const t = await fetch('./data/token.json').then(r => r.json());
this.setState({ token: t.token });

然后我只需将其添加到我的 api 调用中，如下所示：

const fetchOptions = {
  method: 'GET',
  headers: {
    "Authorization": `Bearer ${this.state.token}`,
    "Content-Type": "application/json"
  }
};
const newSlides = await fetch(this.state.baseUrl + '/api/Dashboard/GetSlides', fetchOptions).then(response => response.json());

重要提示：这仅适用于您还可以更新 API 的情况。如果你不能，那么你仍然会收到 CORS 错误。您必须允许来自用于启动应用程序的本地主机和端口的调用。您应该选择 3000、4200 或 8000 以外的值。

我在 API startup.cs 中添加了以下内容：

public void ConfigureServices(IServiceCollection services) {
  ...

  var origins = Configuration.GetSection("AppSettings:AllowedOrigins").Value.Split(",");
  services.AddCors(o => o.AddPolicy(specificOriginsPolicy, builder => {
    builder.WithOrigins(origins)
      .AllowAnyMethod()
      .AllowAnyHeader()
      .AllowCredentials()
      .SetIsOriginAllowed((host) => true);
  }));

  ...
}

public void Configure(IApplicationBuilder app) {
  ...
  app.UseCors(specificOriginsPolicy);
  ...
}

我仍在完善此解决方案，但到目前为止效果很好。我可能会将该实用程序变成一个后台服务，该服务会每隔一段时间更新令牌。或者我可以将实用程序转换为 Shell，然后使用它代替脚本。不管怎样，你明白了。

课程： 我知道我可以将其作为 UWP 或 WPF 应用程序完成并避免所有这些问题，但主要目标是学习 REACT。我学到了很多。我会再做一次。令人震惊的是，现在我的 REACT 应用程序已经完成了它的代码很少。我相信 REACT 可以用于许多类似的场景。

您可以参考此示例，它使用客户端凭据流（即您想要的客户端 ID 和机密）来获取访问令牌，只需将 更改为resource您要为其获取令牌的那个，该示例将获取 Microsoft Graph 的令牌。

auth.getAccessToken = function () {
  var deferred = Q.defer();

  // These are the parameters necessary for the OAuth 2.0 Client Credentials Grant Flow.
  // For more information, see Service to Service Calls Using Client Credentials (https://msdn.microsoft.com/library/azure/dn645543.aspx).
  var requestParams = {
    grant_type: 'client_credentials',
    client_id: config.clientId,
    client_secret: config.clientSecret,
    resource: 'https://graph.microsoft.com'
  };

  // Make a request to the token issuing endpoint.
  request.post({ url: config.tokenEndpoint, form: requestParams }, function (err, response, body) {
    var parsedBody = JSON.parse(body);
    console.log(parsedBody);
    if (err) {
      deferred.reject(err);
    } else if (parsedBody.error) {
      deferred.reject(parsedBody.error_description);
    } else {
      // If successful, return the access token.
      deferred.resolve(parsedBody.access_token);
    }
  });

  return deferred.promise;
};