Moderne web aplikacije oslanjaju se na vanjske API-je za dodatnu funkcionalnost. Neki API-ji koriste identifikatore poput ključeva i tajni za povezivanje zahtjeva s određenom aplikacijom. Ovi su ključevi osjetljivi i ne biste ih trebali gurati na GitHub jer bi ih bilo tko mogao upotrijebiti za slanje zahtjeva API-ju pomoću vašeg računa.
Ovaj vodič će vas naučiti kako sigurno pohraniti i pristupiti API ključevima u React aplikaciji.
Dodavanje varijabli okruženja u CRA aplikaciju
A React aplikacija koju izradite pomoćukreiraj-reagiraj-aplikaciju podržava varijable okruženja izvan okvira. Čita varijable koje počinju s REACT_APP i čini ih dostupnima kroz process.env. To je moguće jer paket dotenv npm dolazi instaliran i konfiguriran u CRA aplikaciji.
Za pohranjivanje API ključeva, kreirajte novu datoteku pod nazivom .env u korijenskom direktoriju aplikacije React.
Zatim imenu API ključa dodajte prefiks REACT_APP kao ovo:
REACT_APP_API_KEY="vaš_api_ključ"
Sada možete pristupiti API ključu u bilo kojoj datoteci u aplikaciji React koristeći process.env.
konst API_KEY = process.env. REACT_APP_API_KEY
Provjerite jeste li dodali .env u datoteku .gitignore kako biste spriječili git da je prati.
Zašto ne biste trebali pohranjivati tajne ključeve u .env
Sve što pohranite u .env datoteku javno je dostupno u proizvodnoj verziji. React ga ugrađuje u datoteke za izradu, što znači da ga svatko može pronaći pregledom datoteka vaše aplikacije. Umjesto toga, koristite pozadinski proxy koji poziva API u ime vaše prednje aplikacije.
Pohranjivanje varijabli okruženja u pozadinski kod
Kao što je gore spomenuto, morate stvoriti zasebnu pozadinsku aplikaciju za pohranu tajnih varijabli.
Na primjer, Donja krajnja točka API-ja dohvaća podatke s tajnog URL-a.
konst apiURL = process.env. API_URL
app.get('/data', asinkroni (req, res) => {
konst odgovor = čekati dohvaćanje (apiURL)
konst podaci = odgovor.json()
res.json({podaci})
})
Pozovite ovu krajnju točku API-ja za dohvaćanje i korištenje podataka u prednjem dijelu.
konst podaci = čekati dohvati('http://backend-url/data')
Sada, osim ako ne gurnete .env datoteku na GitHub, API URL neće biti vidljiv u vašim datotekama za izgradnju.
Korištenje Next.js za pohranjivanje varijabli okruženja
Druga alternativa je korištenje Next.js. Varijablama privatnog okruženja možete pristupiti u funkciji getStaticProps().
Ova funkcija radi tijekom izgradnje na poslužitelju. Dakle, varijable okruženja kojima pristupate unutar ove funkcije bit će dostupne samo u okruženju Node.js.
Ispod je primjer.
izvozasinkronifunkcijagetStaticProps() {
konst res = čekati dohvaćanje (process.env. API_URL)
konst podaci = res.json()
povratak {rekviziti: { podaci }}
}
Podaci će biti dostupni na stranici putem propsa, a možete im pristupiti na sljedeći način.
funkcijaDom({ podaci }) {
povratak (
<div>
// prikaz podataka
</div>
);
}
Za razliku od Reacta, nazivu varijable ne morate stavljati prefiks i možete ga dodati u .env datoteku ovako:
API_URL=https://secret-url/de3ed3f
Next.js vam također omogućuje stvaranje API krajnjih točaka u stranice/api mapa. Kod u ovim krajnjim točkama radi na poslužitelju, tako da možete maskirati tajne s prednjeg kraja.
Na primjer, gornji primjer može se prepisati u stranice/api/getData.js datoteku kao API rutu.
izvozzadanoasinkronifunkcijarukovatelj(zahtjev, res) {
konst odgovor = čekati dohvaćanje (process.env. API_URL)
konst podaci = odgovor.json()
povratak res.json({podaci})
}Sada možete pristupiti vraćenim podacima putem /pages/api/getData.js krajnja točka.
Čuvanje API ključeva u tajnosti
Guranje API-ja na GitHub nije preporučljivo. Svatko može pronaći vaše ključeve i koristiti ih za slanje API zahtjeva. Upotrebom nepraćene .env datoteke sprječavate da se to dogodi.
Međutim, nikada ne biste trebali pohranjivati osjetljive tajne u .env datoteku u vašem sučelnom kodu jer to svatko može vidjeti kada pregledava vaš kod. Umjesto toga, dohvatite podatke na strani poslužitelja ili koristite Next.js za maskiranje privatnih varijabli.
