Šiuolaikinės žiniatinklio programos naudojasi išorinėmis API, kad gautų papildomų funkcijų. Kai kurios API naudoja identifikatorius, pvz., raktus ir paslaptis, kad susietų užklausas su konkrečia programa. Šie raktai yra jautrūs, todėl neturėtumėte jų siųsti į „GitHub“, nes kas nors gali juos naudoti, kad išsiųstų užklausą API naudojant jūsų paskyrą.
Ši pamoka išmokys jus saugiai saugoti ir pasiekti API raktus React programoje.
Aplinkos kintamųjų įtraukimas į CRA programą
A Reaguokite programą, kurią kuriate naudodamikurti-reaguoti-programėlę palaiko aplinkos kintamuosius iš karto. Jis nuskaito kintamuosius, prasidedančius REACT_APP, ir padaro juos pasiekiamus per process.env. Tai įmanoma, nes paketas dotenv npm yra įdiegtas ir sukonfigūruotas CRA programoje.
Norėdami išsaugoti API raktus, sukurkite naują failą pavadinimu .env React programos šakniniame kataloge.
Tada prieš API rakto pavadinimą pridėkite REACT_APP kaip šitas:
REACT_APP_API_KEY="jūsų_api_raktas"
Dabar galite pasiekti API raktą bet kuriame React programos faile naudodami process.env.
konst API_KEY = procesas.env. REACT_APP_API_KEY
Įsitikinkite, kad į .gitignore failą įtraukėte .env, kad neleistumėte git jo stebėti.
Kodėl neturėtumėte saugoti slaptų raktų .env
Viskas, ką saugote .env faile, yra viešai pasiekiama gamybinėje versijoje. „React“ įterpia jį į kūrimo failus, o tai reiškia, kad kiekvienas gali jį rasti patikrinęs jūsų programos failus. Vietoj to naudokite tarpinį serverį, kuris iškviečia API priekinės programos vardu.
Aplinkos kintamųjų saugojimas atgalinės programos kode
Kaip minėta pirmiau, turite sukurti atskirą užpakalinę programą, kad saugotumėte slaptus kintamuosius.
Pavyzdžiui, Toliau pateiktas API galutinis taškas gauna duomenis iš slapto URL.
konst apiURL = process.env. API_URL
app.get('/data', async (req, res) => {
konst atsakymas = laukti gauti (apiURL)
konst duomenys = atsakymas.json()
res.json ({duomenys})
})
Iškvieskite šį API galinį tašką, kad gautumėte ir naudotumėte duomenis priekinėje dalyje.
konst duomenys = laukti fetch('http://backend-url/data')
Dabar, nebent .env failą perkelsite į „GitHub“, API URL nebus matomas jūsų kūrimo failuose.
„Next.js“ naudojimas aplinkos kintamiesiems saugoti
Kita alternatyva yra naudoti Next.js. Privačiuosius aplinkos kintamuosius galite pasiekti naudodami funkciją getStaticProps().
Ši funkcija veikia serverio kūrimo metu. Taigi aplinkos kintamieji, kuriuos pasiekiate naudodami šią funkciją, bus pasiekiami tik Node.js aplinkoje.
Žemiau yra pavyzdys.
eksportuotiasyncfunkcijagetStaticProps() {
konst res = laukti gauti (process.env. API_URL)
konst duomenys = res.json()
grąžinti {rekvizitai: { duomenys }}
}
Duomenys bus pasiekiami puslapyje per rekvizitus, o juos galite pasiekti taip.
funkcijaNamai({ duomenys }) {
grąžinti (
<div>
// pateikti duomenis
</div>
);
}
Skirtingai nei React, kintamojo pavadinimo priešdėlyje nieko nereikia ir galite pridėti jį prie .env failo taip:
API_URL=https://secret-url/de3ed3f
Next.js taip pat leidžia kurti API galinius taškus puslapiai/api aplanką. Šių galinių taškų kodas veikia serveryje, todėl galite užmaskuoti paslaptis iš priekinės dalies.
Pavyzdžiui, aukščiau pateiktas pavyzdys gali būti perrašytas į pages/api/getData.js failą kaip API maršrutą.
eksportuotinumatytasasyncfunkcijaprižiūrėtojas(req, res) {
konst atsakymas = laukti gauti (process.env. API_URL)
konst duomenys = atsakymas.json()
grąžinti res.json ({duomenys})
}Dabar galite pasiekti grąžintus duomenis per /pages/api/getData.js galutinis taškas.
API raktų laikymas paslaptyje
Nerekomenduojama stumti API į „GitHub“. Kiekvienas gali rasti jūsų raktus ir naudoti juos API užklausoms teikti. Naudodami nesekamą .env failą, užkertate kelią tam.
Tačiau niekada neturėtumėte saugoti neskelbtinų paslapčių .env faile, esančiame savo sąsajos kode, nes bet kas gali tai matyti, kai tikrina jūsų kodą. Vietoj to, gaukite duomenis iš serverio arba naudokite Next.js, kad užmaskuotų privačius kintamuosius.
