Блог

Aug 20, 2023

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мэри — штатный писатель MUO в Найроби. У нее степень бакалавра в области прикладной физики и информатики, но ей больше нравится работать в сфере технологий. С 2020 года занимается программированием и написанием технических статей.