如何在使用 create-react-app 创建的应用程序中使用带有访问令牌的 API

Posted 2023-02-22

【中文标题】如何在使用 create-react-app 创建的应用程序中使用带有访问令牌的 API

【英文标题】：How do I use APIs with access tokens in apps created with create-react-app

【发布时间】：2019-08-08 04:36:59

【问题描述】：

如何在使用create-react-app 创建的应用的生产版本中隐藏 API 的秘密访问令牌？

我访问过this question，但它对我的问题没有可接受的答案。我确实不想在我的应用程序中使用process.env.REACT_APP_SECRET_VALUE，因为此变量将在客户端javascript中公开。

鉴于create-react-app 应用程序的生产版本仅由静态文件组成，我能想到的唯一解决方案是仅使用结合了公共客户端 ID 和某种形式的后端客户端白名单、IP 或否则。

我错过了什么吗？

【参考方案1】：

正如您已经提到的，您可以请求一个 API 后端，如果它是白名单 IP，则该后端仅返回您的 secret。 但是你仍然可以更具体一点，你想要实现什么，只是猜测，但也许你需要先查看一些身份验证的方向，以便客户端的用户能够做某事（见秘密）。

【讨论】：

我打算在使用create-react-app 创建和构建的 React 应用程序中使用 Web 服务。我想在不将敏感信息暴露给面向客户端的应用程序的情况下完成此操作。这里有两个问题。首先，它在我的控制下集成了 Web 服务。这很容易，因为我可以在后端应用程序中实现白名单逻辑。第二个问题是集成需要秘密令牌才能访问的第三方 Web 服务。这个问题更麻烦，但我看到的一种可能的解决方案是将第三方服务包装在一个自定义应用程序中，该应用程序转发请求并封装机密。

是的，您可以在您的后端“包装”您的secret-token，它实际上将充当代理。客户端将无法获取您的秘密令牌的实际值，但该令牌保护的多余数据仍将通过新端点（您正在代理）公开。

【参考方案2】：

你在正确的轨道上。如果您不愿意/无法公开您正在使用的服务的密钥，您可能需要在您调用的某个服务器上创建一个端点，并让该端点代理相关的 API 请求。 Amazon 的 API 网关可能会为您处理这个问题。

https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-api-usage-plans.html

【讨论】：

亚马逊路线对于一个大规模的项目来说似乎是可行的，但对于一个简单的项目来说却是多余的。但是，它与我之前关于封装秘密和转发请求的评论相同。虽然对于驻留在后端的应用程序来说，这种策略是不必要的，但对于驻留在客户端计算机中的应用程序来说却是至关重要的。