Современные веб-приложения полагаются на внешние 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.
константа API_KEY = процесс.env. REACT_APP_API_KEY
Убедитесь, что вы добавили .env в файл .gitignore, чтобы git не мог его отслеживать.
Почему вы не должны хранить секретные ключи в .env
Все, что вы храните в файле .env, общедоступно в производственной сборке. React встраивает его в файлы сборки, что означает, что любой может найти его, проверив файлы вашего приложения. Вместо этого используйте внутренний прокси-сервер, который вызывает API от имени вашего внешнего приложения.
Хранение переменных среды в коде бэкенда
Как упоминалось выше, вы должны создать отдельное серверное приложение для хранения секретных переменных.
Например, Конечная точка API ниже извлекает данные с секретного URL.
константа apiURL = процесс.env. API_URL
приложение.получить('/data', асинхронный (требование, разрешение) => {
константа ответ = Ждите выборка (apiURL)
константа данные = ответ.json()
res.json({данные})
})
Вызовите эту конечную точку API, чтобы получить и использовать данные во внешнем интерфейсе.
константа данные = Ждите выборка('http://backend-url/data')
Теперь, если вы не отправите файл .env на GitHub, URL-адрес API не будет отображаться в ваших файлах сборки.
Использование Next.js для хранения переменных среды
Другой альтернативой является использование Next.js. Вы можете получить доступ к закрытым переменным среды в функции getStaticProps().
Эта функция запускается во время сборки на сервере. Таким образом, переменные среды, к которым вы обращаетесь внутри этой функции, будут доступны только в среде Node.js.
Ниже приведен пример.
экспортасинхронныйфункцияgetStaticProps() {
константа разрешение = Ждите выборка (process.env. API_URL)
константа данные = res.json()
возвращаться {реквизит: { данные }}
}
Данные будут доступны на странице через реквизиты, и вы можете получить к ним доступ следующим образом.
функцияДом({ данные }) {
возвращаться (
<див>
// отображаем данные
</div>
);
}
В отличие от React, вам не нужно добавлять префикс к имени переменной, и вы можете добавить его в файл .env следующим образом:
API_URL=https://secret-url/de3ed3f
Next.js также позволяет создавать конечные точки API в страницы/API папка. Код в этих конечных точках выполняется на сервере, поэтому вы можете маскировать секреты от внешнего интерфейса.
Например, приведенный выше пример можно переписать в страницы/апи/getData.js файл в качестве маршрута API.
экспортдефолтасинхронныйфункцияобработчик(запрос, разрешение) {
константа ответ = Ждите выборка (process.env. API_URL)
константа данные = ответ.json()
возвращаться res.json({данные})
}Теперь вы можете получить доступ к возвращенным данным через /pages/api/getData.js конечная точка.
Сохранение ключей API в секрете
Отправка API на GitHub не рекомендуется. Любой может найти ваши ключи и использовать их для выполнения запросов к API. Используя неотслеживаемый файл .env, вы предотвращаете это.
Тем не менее, вы никогда не должны хранить конфиденциальные секреты в файле .env в коде внешнего интерфейса, потому что любой может увидеть его, когда проверяет ваш код. Вместо этого извлекайте данные на стороне сервера или используйте Next.js для маскировки частных переменных.