Home-theater-designers
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.
MAKEUSEOF VIDEO DANA
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ću kreiraj-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="your_api_key"
Sada možete pristupiti API ključu u bilo kojoj datoteci u aplikaciji React koristeći process.env.
const 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.
najbolje mjesto za streaming besplatnih filmova
const apiURL = process.env.API_URL
app.get('/data', async (req, res) => {
const response = await fetch(apiURL)
const data = response.json()
res.json({data})
})
Pozovite ovu krajnju točku API-ja za dohvaćanje i korištenje podataka u prednjem dijelu.
const data = await fetch('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.
export async function getStaticProps() {
const res = await fetch(process.env.API_URL)
const data = res.json()
return {props: { data }}
}
Podaci će biti dostupni na stranici putem propsa, a možete im pristupiti na sljedeći način.
function Home({ data }) {
return (
<div>
// render data
</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.
4B479C8FF1390AFADECE0CFFD337D1B5229075Sada 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 svom 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.