Как да съхранявате и осъществявате достъп до API ключове в приложение на React

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

MAKEUSEOF ВИДЕО НА ДЕНЯ

Този урок ще ви научи как безопасно да съхранявате и осъществявате достъп до 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"

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

как да поставите iphone 8 в режим на възстановяване

const API_KEY = process.env.REACT_APP_API_KEY

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

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

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

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

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

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

const apiURL = process.env.API_URL 
app.get('/data', async (req, res) => { 
	const response = await fetch(apiURL) 
	const data = response.json() 
	res.json({data}) 
})

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

const data = await fetch('http://backend-url/data')

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

как да извлечете чист глас от шумен аудио файл

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

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

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

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

export async function getStaticProps() { 
    const res = await fetch(process.env.API_URL) 
    const data = res.json() 
    return {props: { data }} 
}

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

как да извадите вода от зарядното си пристанище

function Home({ data }) { 
  return ( 
    <div> 
      // render data 
    </div> 
  ); 
}

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

API_URL=https://secret-url/de3ed3f

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

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

4B479C8FF1390AFADECE0CFFD337D1B5229075

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

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

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

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