Sodobne spletne aplikacije se zanašajo na zunanje API-je za dodatno funkcionalnost. Nekateri API-ji uporabljajo identifikatorje, kot so ključi in skrivnosti, da povežejo zahteve z določeno aplikacijo. Ti ključi so občutljivi in jih ne smete pošiljati GitHubu, saj jih lahko kdorkoli uporabi za pošiljanje zahteve API-ju z vašim računom.
Ta vadnica vas bo naučila, kako varno shranjevati in dostopati do ključev API v aplikaciji React.
Dodajanje spremenljivk okolja v aplikacijo CRA
A Aplikacija React, ki jo ustvarite z uporabocreate-react-aplikacija podpira spremenljivke okolja takoj po namestitvi. Bere spremenljivke, ki se začnejo z REACT_APP, in jih naredi na voljo prek process.env. To je mogoče, ker je paket dotenv npm nameščen in konfiguriran v aplikaciji CRA.
Če želite shraniti ključe API, ustvarite novo datoteko z imenom .env v korenskem imeniku aplikacije React.
Nato imenu ključa API dodajte predpono z REACT_APP Všečkaj to:
REACT_APP_API_KEY="vaš_api_ključ"
Zdaj lahko dostopate do ključa API v kateri koli datoteki v aplikaciji React z uporabo process.env.
konst API_KEY = process.env. REACT_APP_API_KEY
Prepričajte se, da dodate .env v datoteko .gitignore, da preprečite, da bi git sledil njej.
Zakaj ne bi smeli shranjevati skrivnih ključev v .env
Vse, kar shranite v datoteko .env, je javno dostopno v produkcijski gradnji. React jo vdela v gradbene datoteke, kar pomeni, da jo lahko vsak najde tako, da pregleda datoteke vaše aplikacije. Namesto tega uporabite zaledni proxy, ki pokliče API v imenu vaše sprednje aplikacije.
Shranjevanje spremenljivk okolja v zaledni kodi
Kot je navedeno zgoraj, morate za shranjevanje skrivnih spremenljivk ustvariti ločeno zaledno aplikacijo.
Na primer, Spodnja končna točka API-ja pridobi podatke s tajnega URL-ja.
konst apiURL = process.env. API_URL
app.get('/data', async (req, res) => {
konst odgovor = čakati pridobi (apiURL)
konst podatki = odziv.json()
res.json({podatki})
})
Pokličite to končno točko API, da pridobite in uporabite podatke v sprednjem delu.
konst podatki = čakati fetch('http://backend-url/data')
Zdaj, razen če potisnete datoteko .env v GitHub, URL API-ja ne bo viden v vaših gradbenih datotekah.
Uporaba Next.js za shranjevanje spremenljivk okolja
Druga možnost je uporaba Next.js. Do spremenljivk zasebnega okolja lahko dostopate v funkciji getStaticProps().
Ta funkcija se izvaja med gradnjo na strežniku. Tako bodo spremenljivke okolja, do katerih dostopate znotraj te funkcije, na voljo samo v okolju Node.js.
Spodaj je primer.
izvozasinhfunkcijogetStaticProps() {
konst res = čakati pridobi (process.env. API_URL)
konst podatki = res.json()
vrnitev {rekviziti: { podatki }}
}
Podatki bodo na strani dostopni prek rekvizitov, do njih pa lahko dostopate na naslednji način.
funkcijodomov({ podatki }) {
vrnitev (
<div>
// upodablja podatke
</div>
);
}
Za razliko od Reacta vam ni treba predpone imena spremenljivke z ničemer in jo lahko dodate v datoteko .env takole:
API_URL=https://secret-url/de3ed3f
Next.js omogoča tudi ustvarjanje končnih točk API-ja v strani/api mapo. Koda v teh končnih točkah se izvaja na strežniku, tako da lahko prikrijete skrivnosti s sprednjega dela.
Na primer, zgornji primer je mogoče prepisati v pages/api/getData.js datoteko kot API pot.
izvozprivzetoasinhfunkcijovodja(zahteva, res) {
konst odgovor = čakati pridobi (process.env. API_URL)
konst podatki = odziv.json()
vrnitev res.json({podatki})
}Zdaj lahko do vrnjenih podatkov dostopate prek /pages/api/getData.js končna točka.
Ohranjanje tajnosti ključev API
Potiskanje API-jev v GitHub ni priporočljivo. Vsakdo lahko najde vaše ključe in jih uporabi za pošiljanje zahtev API. Z uporabo datoteke .env, ki ji ni sledi, preprečite, da bi se to zgodilo.
Vendar pa občutljivih skrivnosti nikoli ne shranjujte v datoteko .env v kodi čelnega vmesnika, ker jo lahko vidi vsak, ko pregleduje vašo kodo. Namesto tega pridobite podatke na strani strežnika ali uporabite Next.js za maskiranje zasebnih spremenljivk.