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

Този урок ще ви научи как безопасно да съхранявате и осъществявате достъп до API ключове в приложение на React.

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

А React приложение, което създавате с помощта наcreate-react-app поддържа променливи на средата веднага. Той чете променливи, които започват с REACT_APP и ги прави достъпни чрез process.env. Това е възможно, защото пакетът dotenv npm се инсталира и конфигурира в приложение на CRA.

За да съхраните API ключовете, създайте нов файл, наречен .env в главната директория на приложението React.

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

REACT_APP_API_KEY="your_api_key"
instagram viewer

Вече можете да получите достъп до API ключа във всеки файл в приложението React, като използвате process.env.

конст API_KEY = process.env. REACT_APP_API_KEY

Уверете се, че сте добавили .env към файла .gitignore, за да попречите на git да го проследява.

Защо не трябва да съхранявате секретни ключове в .env

Всичко, което съхранявате в .env файл, е публично достъпно в производствената компилация. React го вгражда във файловете за компилация, което означава, че всеки може да го намери, като провери файловете на приложението ви. Вместо това използвайте бекенд прокси, който извиква API от името на вашето предно приложение.

Съхраняване на променливи на средата в Backend кода

Както бе споменато по-горе, трябва да създадете отделно бекенд приложение за съхраняване на секретни променливи.

Например, на Крайната точка на API по-долу извлича данни от таен URL адрес.

конст apiURL = process.env. API_URL
app.get('/data', async (req, res) => {
конст отговор = изчакайте извличане (apiURL)
конст данни = response.json()
	res.json({данни})
})

Обадете се на тази крайна точка на API, за да извлечете и използвате данните в предния край.

конст данни = изчакайте извличане ('http://backend-url/data')

Сега, освен ако не изпратите .env файла към GitHub, URL адресът на API няма да се вижда във вашите компилационни файлове.

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

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

Тази функция се изпълнява по време на изграждане на сървъра. Така че променливите на средата, до които имате достъп в тази функция, ще бъдат достъпни само в средата на Node.js.

По-долу е даден пример.

износасинхроненфункцияgetStaticProps() {
конст res = изчакайте извличане (process.env. API_URL)
конст данни = res.json()
връщане {реквизит: { данни }}
}

Данните ще бъдат достъпни на страницата чрез props и можете да получите достъп до тях, както следва.

функцияУ дома({ данни }) {
връщане (
<див>
// изобразяване на данни
</div>
 );
}

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

API_URL=https://secret-url/de3ed3f

Next.js също ви позволява да създавате крайни точки на API в страници/api папка. Кодът в тези крайни точки се изпълнява на сървъра, така че можете да маскирате тайни от предния край.

Например горният пример може да бъде пренаписан в страници/api/getData.js файл като API маршрут.

износпо подразбиранеасинхроненфункцияманипулатор(req, res) {
конст отговор = изчакайте извличане (process.env. API_URL)
конст данни = response.json()
връщане res.json({данни})
}

Вече можете да получите достъп до върнатите данни чрез /pages/api/getData.js крайна точка.

Пазене на API ключовете в тайна

Избутването на API към GitHub не е препоръчително. Всеки може да намери вашите ключове и да ги използва, за да прави заявки за API. Като използвате непроследен .env файл, предотвратявате това да се случи.

Въпреки това, никога не трябва да съхранявате чувствителни тайни в .env файл в кода на интерфейса, защото всеки може да го види, когато проверява кода ви. Вместо това извлечете данните от страна на сървъра или използвайте Next.js, за да маскирате частни променливи.