Ako ukladať a pristupovať k API kľúčom v aplikácii React

Moderné webové aplikácie sa spoliehajú na externé API pre pridanú funkčnosť. Niektoré rozhrania API používajú identifikátory, ako sú kľúče a tajomstvá, na priradenie požiadaviek ku konkrétnej aplikácii. Tieto kľúče sú citlivé a nemali by ste ich posielať na GitHub, pretože by ich ktokoľvek mohol použiť na odoslanie požiadavky do API pomocou vášho účtu.

VYUŽITIE VIDEA DŇA

Tento tutoriál vás naučí, ako bezpečne ukladať kľúče API a pristupovať k nim v aplikácii React.

---

---

Pridanie premenných prostredia do aplikácie CRA

A Reagujte aplikáciu, ktorú ste vytvorili create-react-app podporuje premenné prostredia hneď po vybalení. Číta premenné, ktoré začínajú REACT_APP, a sprístupňuje ich cez process.env. Je to možné, pretože balík dotenv npm je nainštalovaný a nakonfigurovaný v aplikácii CRA.

prečo by nebola doručená textová správa?

Ak chcete uložiť kľúče API, vytvorte nový súbor s názvom .env v koreňovom adresári aplikácie React.

Potom zadajte pred názov kľúča API s REACT_APP Páči sa ti to:

REACT_APP_API_KEY="your_api_key" 

Teraz máte prístup ku kľúču API v akomkoľvek súbore v aplikácii React pomocou process.env.

const API_KEY = process.env.REACT_APP_API_KEY 

Uistite sa, že ste pridali .env do súboru .gitignore, aby ste zabránili tomu, aby ho git sledoval.

---

---

Prečo by ste nemali ukladať tajné kľúče v .env

Všetko, čo uložíte do súboru .env, je verejne dostupné v produkčnej zostave. React ho vloží do súborov zostavy, čo znamená, že ho môže nájsť ktokoľvek pri kontrole súborov vašej aplikácie. Namiesto toho použite server proxy, ktorý volá rozhranie API v mene vašej klientskej aplikácie.

Ukladanie premenných prostredia v kóde backendu

Ako je uvedené vyššie, musíte vytvoriť samostatnú backendovú aplikáciu na ukladanie tajných premenných.

---

---

Napríklad, Koncový bod rozhrania API uvedený nižšie načítava údaje z tajnej adresy 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}) 
}) 

Zavolajte tento koncový bod rozhrania API na načítanie a používanie údajov v klientskom rozhraní.

aká je najlepšia aplikácia na čistenie pre Android

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

Ak teraz nepošlete súbor .env na GitHub, adresa URL rozhrania API nebude viditeľná v súboroch zostavy.

Použitie Next.js na ukladanie premenných prostredia

Ďalšou alternatívou je použitie Next.js. K súkromným premenným prostredia môžete pristupovať vo funkcii getStaticProps().

Táto funkcia beží počas zostavovania na serveri. Takže premenné prostredia, ku ktorým pristupujete v rámci tejto funkcie, budú dostupné iba v prostredí Node.js.

Nižšie je uvedený príklad.

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

Údaje budú dostupné na stránke prostredníctvom rekvizít a môžete k nim pristupovať nasledovne.

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

Na rozdiel od Reactu nemusíte názov premennej predponovať ničím a môžete ju pridať do súboru .env takto:

API_URL=https://secret-url/de3ed3f 

Next.js vám tiež umožňuje vytvárať koncové body API v stránky/api priečinok. Kód v týchto koncových bodoch beží na serveri, takže môžete maskovať tajomstvá z frontendu.

Napríklad vyššie uvedený príklad môže byť prepísaný v pages/api/getData.js súbor ako trasa API.

4B479C8FF1390AFADECE0CFFD337D1B5229075

Teraz máte prístup k vráteným údajom cez /pages/api/getData.js koncový bod.

Udržiavanie kľúčov API v tajnosti

Tlačenie API na GitHub sa neodporúča. Ktokoľvek môže nájsť vaše kľúče a použiť ich na vytváranie požiadaviek API. Použitím nesledovaného súboru .env tomu zabránite.

Interné úložisko karty android 7.0 sd

Nikdy by ste však nemali ukladať citlivé tajomstvá do súboru .env v kóde frontendu, pretože to môže vidieť ktokoľvek, keď kontroluje váš kód. Namiesto toho načítajte údaje na strane servera alebo použite Next.js na maskovanie súkromných premenných.