REACT 应用程序调用安全的 Azure WEBAPI 服务 - 无用户

我创建了一个简单的 REACT 应用程序，该应用程序仅在连接到我们网络上大屏幕的本地 PC 上运行。仅供内部使用！它就像广告牌或仪表板。零用户交互。屏幕不是触摸屏，也没有连接键盘和鼠标。因此没有用户可以登录。

构建 REACT 应用程序，然后将其部署到 PC 上的文件夹中。全部自动化。初始部署包括所有当前数据。然后在 Windows 启动时执行类似这样的命令： “python -m http.server 3000”（只是例子......）

该应用程序具有随该应用程序一起部署的初始数据，但是，我希望它还能够调用安全的 Azure WebAPI 服务以每隔几分钟获取更新的统计信息。数据非常小。主要是整数值。我只是想提供一些实时更新。

我让 REACT 应用程序完全正常工作（如果 WEBAPI 不安全）或者单个调用允许匿名。但是，我们的业务规则要求所有端点都是安全的。

此应用程序在本地运行，但 API 是 Azure 应用程序服务。

我已在 Azure AD 中将 REACT 应用程序设置为注册应用程序，并将其配置为具有调用 WEBAPI 服务的权限。

我有许多控制台应用程序，它们的设置和工作方式与此 REACT 应用程序基本相同。对于 C# 守护程序应用程序，有一个 MSAL 包可以让这一切变得简单。

我正在尝试学习 REACT，并且不想将其构建为另一个 WPF 或 UWP 应用程序，而是想尝试使用 REACT。

所以，我知道我需要一个访问令牌。我正在考虑使用客户端 ID 和 Secret，就像我在用 C# 编写的 C# 守护程序客户端中所做的那样。

我找不到任何在没有用户登录的情况下执行此操作的 REACT 或 Angular 示例。请记住，PC 没有输入设备。仅显示。同样，我的应用程序没有用户。它调用安全 API 来获取数据。就是这样。

感谢您的帮助。

使用 Joy Wang 的评论和文档中的此页面：服务到服务访问令牌请求 https://learn.microsoft.com/en-us/previous-versions/azure/dn645543(v=azure.100)?redirectedfrom=MSDN

这是我的新代码：

const adalConfig = {
  tenant: '...',
  clientId: '...',
  clientSecret: '...',
  authority: 'https://login.microsoftonline.com/{tenant}/oauth2/token',
  endpoints: {
    apiResourceId: 'api://bbbbbb-...',
  },
};

function getAccessToken() {
  var requestParams = {
    grant_type: 'client_credentials',
    client_id: adalConfig.clientId,
    client_secret: adalConfig.clientSecret,
    resource: adalConfig.endpoints.apiResourceId
  };

  // Make a request to the token issuing endpoint.
  fetch(adalConfig.authority,
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify( requestParams )
    }).then(response => {
      if (response.status >= 200 && response.status < 300) {
        console.log(response);
        console.log(response.json());
      } else {
        console.log('Somthing happened wrong');
        console.log(response);
      }
    }).catch(err => err);
}

当我调用上面的函数时，我得到以下响应：

响应{类型：“cors”，网址：“https://login.microsoftonline.com/.../oauth2/token”，重定向：false，状态：400，ok：false，…} 身体： （...） 身体使用：假 标题：标题{} 好的：假的 重定向：假 状态：400 statusText：“错误请求” 类型：“cors” 网址：“https://login.microsoftonline.com/.../oauth2/token”proto： 回复

也许还有另一种方法来启动 REACT 应用程序，以便不检查 CORS？有任何想法吗？

再次感谢。

因此，目前没有一种安全的方法来完成我想要的事情。基本问题是您无法在浏览器中使用来自 JavaScript 的客户端凭据授予类型。

不过，我认为我有一个很好的解决办法可以帮助其他人。我确信它不适合大多数应用。我相信 OAUTH 正在研究解决方案，因此在不久的将来可能不需要这个解决方案。如果添加更好的解决方案，我很乐意将其标记为正确答案。感谢您的帮助。

我的应用程序基本上是一个零用户输入的自动化仪表板/广告牌。它提取安全数据并显示它。 REACT 应用程序仅位于墙上的本地 PC 上，没有任何输入。 PC 打开时会运行脚本。

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

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

到目前为止，这和我之前的情况一模一样。

解决方法：我创建了一个名为 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 以外的值。

我将以下内容添加到我的 APIstartup.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，然后使用它代替脚本。不管怎样，你明白了。

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