在React应用中将API凭据保密

Question

我有一个连接到一些API服务的ReactJs前端应用程序。其中一些API服务要求我在首次登录时通过我的appId和appSecret。

我目前将它们保存在一个经过js压缩和捆绑的文件中，但我仍在将自己的应用凭据暴露给精明的入侵者。

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

Answer 1

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

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

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

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