Как хранить ключи API и получать к ним доступ в приложении React

Современные веб-приложения полагаются на внешние API для дополнительной функциональности. Некоторые API используют идентификаторы, такие как ключи и секреты, для связывания запросов с конкретным приложением. Эти ключи являются конфиденциальными, и вам не следует отправлять их на GitHub, поскольку кто-то может использовать их для отправки запроса к API с использованием вашей учетной записи.

СДЕЛАТЬ ВИДЕО ДНЯ

В этом руководстве вы узнаете, как безопасно хранить и получать доступ к ключам API в приложении React.

Добавление переменных среды в приложение CRA

А Приложение React, которое вы создаете с помощью создать-реагировать-приложение поддерживает переменные окружения из коробки. Он считывает переменные, начинающиеся с REACT_APP, и делает их доступными через process.env. Это возможно, поскольку пакет dotenv npm устанавливается и настраивается в приложении CRA.

Чтобы сохранить ключи API, создайте новый файл с именем .env в корневом каталоге приложения React.

Затем добавьте к имени ключа API префикс REACT_APP как это:

REACT_APP_API_KEY="your_api_key"

Теперь вы можете получить доступ к ключу API в любом файле приложения React, используя process.env.

const API_KEY = process.env.REACT_APP_API_KEY

Убедитесь, что вы добавили .env в файл .gitignore, чтобы git не мог его отслеживать.

как заставить Mac не ложиться спать

Почему вы не должны хранить секретные ключи в .env

Все, что вы храните в файле .env, общедоступно в производственной сборке. React встраивает его в файлы сборки, что означает, что любой может найти его, проверив файлы вашего приложения. Вместо этого используйте внутренний прокси-сервер, который вызывает API от имени вашего внешнего приложения.

Хранение переменных среды в коде бэкенда

Как упоминалось выше, вы должны создать отдельное серверное приложение для хранения секретных переменных.

Например, Конечная точка API ниже извлекает данные с секретного URL.

const apiURL = process.env.API_URL 
app.get('/data', async (req, res) => { 
	const response = await fetch(apiURL) 
	const data = response.json() 
	res.json({data}) 
})

Вызовите эту конечную точку API, чтобы получить и использовать данные во внешнем интерфейсе.

const data = await fetch('http://backend-url/data')

Теперь, если вы не отправите файл .env на GitHub, URL-адрес API не будет отображаться в ваших файлах сборки.

Использование Next.js для хранения переменных среды

Другой альтернативой является использование Next.js. Вы можете получить доступ к закрытым переменным среды в функции getStaticProps().

Эта функция запускается во время сборки на сервере. Таким образом, переменные среды, к которым вы обращаетесь внутри этой функции, будут доступны только в среде Node.js.

Ниже приведен пример.

export async function getStaticProps() { 
    const res = await fetch(process.env.API_URL) 
    const data = res.json() 
    return {props: { data }} 
}

Данные будут доступны на странице через реквизиты, и вы можете получить к ним доступ следующим образом.

function Home({ data }) { 
  return ( 
    <div> 
      // render data 
    </div> 
  ); 
}

В отличие от React, вам не нужно добавлять префикс к имени переменной, и вы можете добавить его в файл .env следующим образом:

API_URL=https://secret-url/de3ed3f

Next.js также позволяет создавать конечные точки API в страницы/API папка. Код в этих конечных точках выполняется на сервере, поэтому вы можете маскировать секреты от внешнего интерфейса.

Например, приведенный выше пример можно переписать в страницы/апи/getData.js файл в качестве маршрута API.

ты можешь играть в игры gamecube на wii?

4B479C8FF1390AFADECE0CFFD337D1B5229075

Теперь вы можете получить доступ к возвращенным данным через /pages/api/getData.js конечная точка.

Сохранение ключей API в секрете

Отправка API на GitHub не рекомендуется. Любой может найти ваши ключи и использовать их для выполнения запросов к API. Используя неотслеживаемый файл .env, вы предотвращаете это.

Тем не менее, вы никогда не должны хранить конфиденциальные секреты в файле .env в коде внешнего интерфейса, потому что любой может увидеть его, когда проверяет ваш код. Вместо этого извлекайте данные на стороне сервера или используйте Next.js для маскировки частных переменных.