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.
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 vytvorilicreate-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.
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.
konšt 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.
konšt apiURL = process.env. API_URL
app.get('/data', async (req, res) => {
konšt odpoveď = čakať načítať (apiURL)
konšt data = response.json()
res.json({údaje})
})
Zavolajte tento koncový bod rozhrania API na načítanie a používanie údajov v klientskom rozhraní.
konšt údaje = čakať načítať('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.
exportasyncfunkciugetStaticProps() {
konšt res = čakať načítať (process.env. API_URL)
konšt data = res.json()
vrátiť {rekvizity: { údaje }}
}
Údaje budú dostupné na stránke prostredníctvom rekvizít a môžete k nim pristupovať nasledovne.
funkciuDomov({ údaje }) {
vrátiť (
<div>
// vykreslenie údajov
</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.
exportpredvolenáasyncfunkciupsovod(req, req) {
konšt odpoveď = čakať načítať (process.env. API_URL)
konšt data = response.json()
vrátiť res.json({údaje})
}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.
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.
