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

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

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

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

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

Давайте начнем

Создание переменной окружения

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

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

Давайте посмотрим, как создать переменную окружения в приложениях React.

Как создать файл .env

Если ваш проект создан с помощью create-react-app, выполните следующие шаги

• Создайте файл .env в корне вашего проекта
• Объявите переменную окружения с префиксом: REACT_APP_.
• Добавьте любое другое имя после префикса, например, RAPID_API_KEY.
• Полное имя переменной окружения будет REACT_APP_RAPID_API_KEY.
• Помните, что имя переменной всегда должно начинаться с REACT_APP_, поэтому формат должен быть REACT_APP_YOURCUSTOM_VARIABLENAME.
• Присвойте API-ключ объявленной переменной. Например, REACT_APP_RAPID_API_KEY= 1234212343.

Использование файла .env

Чтобы использовать файл .env, созданный в описанных выше шагах, выполните следующие действия.

• Перейдите к файлу, из которого вы хотите подключиться к конечной точке API.
• Используйте его, следуя формату process.env.REACT_APP_CUSTOM_VARIABLENAME.
• Используя наш пример, формат для подключения к конечной точке RAPID API будет process.env.REACT_APP_RAPID_API_KEY.
• Перезапустите ваше приложение с помощью npm start и обновите приложение.
• Теперь ваше приложение подключено к конечной точке API

Заключение

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

Были ли у вас случаи, когда вы отправляли свой API Key на публичную платформу хостинга кода, и что вы делали после этого?
Если вы нашли что-то полезное в этой заметке, не забудьте поделиться в своих социальных сетях, это будет очень полезно для других.