Модерне веб апликације се ослањају на екстерне АПИ-је за додатну функционалност. Неки АПИ-ји користе идентификаторе као што су кључеви и тајне за повезивање захтева са одређеном апликацијом. Ови кључеви су осетљиви и не би требало да их гурате на ГитХуб јер би их свако могао користити за слање захтева АПИ-ју помоћу вашег налога.

Овај водич ће вас научити како да безбедно складиштите и приступате АПИ кључевима у Реацт апликацији.

Додавање варијабли окружења у ЦРА апликацију

А Реагујте апликацију коју креирате користећицреате-реацт-апп подржава променљиве окружења из кутије. Чита променљиве које почињу са РЕАЦТ_АПП и чини их доступним преко процесс.енв. Ово је могуће зато што пакет дотенв нпм долази инсталиран и конфигурисан у ЦРА апликацији.

Да бисте сачували АПИ кључеве, направите нову датотеку под називом .енв у основном директоријуму Реацт апликације.

Затим ставите префикс имена АПИ кључа са РЕАЦТ_АПП овако:

РЕАЦТ_АПП_АПИ_КЕИ="иоур_апи_кеи"

Сада можете приступити АПИ кључу у било којој датотеци у апликацији Реацт користећи процесс.енв.

конст АПИ_КЕИ = процесс.енв. РЕАЦТ_АПП_АПИ_КЕИ

Обавезно додајте .енв у датотеку .гитигноре да бисте спречили гит да је прати.

Зашто не би требало да чувате тајне кључеве у .енв

Све што ускладиштите у .енв датотеци је јавно доступно у продукцијској верзији. Реацт га уграђује у датотеке за изградњу, што значи да свако може да га пронађе прегледањем датотека ваше апликације. Уместо тога, користите бацкенд проки који позива АПИ у име ваше фронт-енд апликације.

Чување променљивих окружења у позадинском коду

Као што је горе поменуто, морате креирати посебну позадинску апликацију за чување тајних променљивих.

На пример, тхе АПИ крајња тачка испод преузима податке са тајне УРЛ адресе.

конст апиУРЛ = процесс.енв. АПИ_УРЛ
апп.гет('/data', асинц (рек, рес) => {
конст одговор = чекати преузети (апиУРЛ)
конст подаци = одговор.јсон()
	рес.јсон({дата})
})

Позовите ову АПИ крајњу тачку да бисте преузели и користили податке у предњем делу.

конст подаци = чекати дохвати('хттп://backend-url/data')

Сада, осим ако не гурнете .енв датотеку на ГитХуб, АПИ УРЛ неће бити видљив у вашим датотекама изградње.

Коришћење Нект.јс за складиштење променљивих окружења

Друга алтернатива је коришћење Нект.јс. Можете приступити променљивим приватног окружења у функцији гетСтатицПропс().

Ова функција ради током времена изградње на серверу. Тако ће променљиве окружења којима приступате унутар ове функције бити доступне само у окружењу Ноде.јс.

Испод је пример.

извозасинцфункцијагетСтатицПропс() {
конст рес = чекати дохвати (процесс.енв. АПИ_УРЛ)
конст подаци = рес.јсон()
повратак {реквизити: { подаци }}
}

Подаци ће бити доступни на страници преко реквизита, а можете им приступити на следећи начин.

функцијаКућа({ подаци }) {
повратак (
<див>
// рендер дата
</div>
 );
}

За разлику од Реацт-а, не морате ничим да стављате префикс имена променљиве и можете га додати у .енв датотеку овако:

АПИ_УРЛ=хттпс://secret-url/de3ed3f

Нект.јс вам такође омогућава да креирате АПИ крајње тачке у странице/апи фолдер. Код у овим крајњим тачкама се покреће на серверу, тако да можете да маскирате тајне са предњег краја.

На пример, горњи пример се може преписати у пагес/апи/гетДата.јс датотеку као АПИ руту.

извозУобичајеноасинцфункцијаруковалац(рек, рес) {
конст одговор = чекати дохвати (процесс.енв. АПИ_УРЛ)
конст подаци = одговор.јсон()
повратак рес.јсон({дата})
}

Сада можете приступити враћеним подацима преко /pages/api/getData.js крајња тачка.

Чување тајности АПИ кључева

Гурање АПИ-ја на ГитХуб није препоручљиво. Свако може да пронађе ваше кључеве и да их користи за слање АПИ захтева. Коришћењем непраћене .енв датотеке спречавате да се то догоди.

Међутим, никада не би требало да чувате осетљиве тајне у .енв датотеци у свом фронтенд коду јер свако може да је види када прегледа ваш код. Уместо тога, дохватите податке на страни сервера или користите Нект.јс за маскирање приватних променљивих.