javascript - 在 React 应用程序中保密 API 凭据

Question

我有一个连接到一些 API 服务的 ReactJs 前端应用程序。其中一些 API 服务要求我在初始登录时传递我的 appId 和 appSecret。

我目前将它们放在一个 js 文件中，该文件被缩小并捆绑在一起，但我觉得我仍然将我的应用程序凭据暴露给精明的入侵者。

保护它们的正确方法是什么？

Answer 1

我阅读了评论，发现您仍然感到困惑，但更详细的解释占用的空间超出了评论中允许的空间，因此张贴了更详细的解释作为答案。

这个想法是您将服务器用作所有请求和响应的代理。

• 情况 1:您需要从前端向 API 发出请求 - 前端将在没有 API 凭据的情况下向您的服务器发出请求(因为它们不是'存储在前端应用程序中)。您的服务器将在必要时对请求进行身份验证(因为它会检查您的用户是否登录到您的服务器)，确保登录的用户有权使用 api 服务(仅当您有多个用户 Angular 色时)，然后您的服务器将使用存储在服务器上 的凭据发出 api 请求。然后，服务器使用 API 请求的直接结果或您在服务器上对其进行了一些预处理/格式化的版本来响应正在等待对其请求的响应的前端客户端。通过这种方式，您的 API 凭据可以 secret 存储在您的服务器上，并且只有您想要授予访问权限以使用您的 api 凭据(通过您的前端客户端应用程序体验)的人才能使用它。
• 情况 2:您将您的 API 公开给经过身份验证的用户 - 一种常见的方法是向您想要提供访问权限的人颁发某种 key 。如果他们弄丢了，他们要么倒霉，要么你必须为他们提供一些联系你/你的公司/为你管理这件事的人的方式，并允许他们以某种方式向你证明他们就是他们所说的那个人他们应该可以访问您的 api。这与您在网站上忘记密码的情况非常相似，您必须先证明您的身份才能重设密码，通常是通过单击一个链接，他们将通过电子邮件将其发送到与您的帐户关联的电子邮件帐户说密码丢失了。无论如何，假设他们有他们的 key ，它应该与每个请求一起发送到您的 api，并且您需要确保它是您处理的每个请求的正确 key 。

这些并不是处理此类交互的唯一方法，但它们是一些更常见的方法。案例 1 和案例 2 不同，因为在案例 1 中，有一个客户端(前端)需要从 API 获取数据。 API 的凭据通过仅由您的服务器存储和使用来保护。在这种情况下，您可以选择将访问权限限制为使用您的应用程序的每个人、在您的应用程序上经过身份验证的每个人(您必须实现登录系统)、仅限已登录并具有特定权限级别的人(您必须实现 Angular 色)。在情况 2 中，没有客户端应用程序，有人在直接访问您的 API。您仍然需要对它们进行身份验证，因此您只需向它们发出一次 key ，它们在每次发出请求时都会传递该 key 。