在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。您仍然需要对它们进行身份验证，因此您只需向其发送一次密钥，并且每次发出请求时都会传递该密钥。