时间戳

首页 > 解决方案 > 如何保护主 API 密钥？

javascript - 如何保护主 API 密钥？

问题描述

我创建了一个 Restful API、一个网站（ReactJS/Ruby on Rails）和一个移动应用程序（React Native）。

我正在使用 API 来显示和处理网站和移动应用程序上的数据。

在网站中，我正在使用看起来像这样的jQuery AJAX 请求：

...some other code
componentDidMount () {
  $.getJSON('https://example.com/api/v1/accounts?key=MASTER-API-KEY', (data) => {
    this.setState({
      accounts: data.accounts
    });
  });
}
...some other code

在移动应用程序中，我使用的fetch看起来像这样：

...some other code
fetch('https://example.com/api/v1/accounts?key=MASTER-API-KEY', {
  method: 'GET',
...some other code

用户还拥有自己的 API 密钥，其权限基于其用户级别。

如果只有他们发送了有效的 API 密钥，我已经有处理请求的验证。但是在网站和应用程序上，我使用的是可以访问所有内容的主 API 密钥。

我相信这可以在网站上的源文件中看到，并且可以在移动应用程序中进行逆向工程。

我对网站的可能解决方案是在服务器中创建进程而不是使用 AJAX，但是如何在我的 ReactJS 组件上访问它？

对于移动应用程序，我应该切换到使用 Swift/Java 并在那里发出请求而不是 fetch 吗？

标签： javascriptajaxreactjssecurityapi-key

解决方案

在 React 中，我创建了一个 .env 文件并将我的配置添加到其中。

.env 文件：

REACT_APP_SPOTIFY_REDIRECT_URI="xxxxxx"
REACT_APP_SPOTIFY_PUBLIC_CLIENT_ID="xxxxxxx"

如果我想通过以下行使用这些参数调用：

const consumer_public_key = process.env.REACT_APP_SPOTIFY_PUBLIC_CLIENT_ID;

我对此不确定，但您需要将 REACT_APP_ 写入参数的前缀，以便在反应中成功调用。

推荐阅读