Cum să stocați și să accesați cheile API într-o aplicație React

Aplicațiile web moderne se bazează pe API-uri externe pentru funcționalitate suplimentară. Unele API-uri folosesc identificatori precum chei și secrete pentru a asocia cereri cu o anumită aplicație. Aceste chei sunt sensibile și nu ar trebui să le împingeți în GitHub, deoarece oricine le-ar putea folosi pentru a trimite o solicitare către API folosind contul dvs.

Acest tutorial vă va învăța cum să stocați și să accesați în siguranță cheile API într-o aplicație React.

Adăugarea variabilelor de mediu într-o aplicație CRA

A Aplicația React pe care o creați folosindcreate-react-app acceptă variabilele de mediu din cutie. Citește variabilele care încep cu REACT_APP și le face disponibile prin process.env. Acest lucru este posibil deoarece pachetul dotenv npm este instalat și configurat într-o aplicație CRA.

Pentru a stoca cheile API, creați un fișier nou numit .env în directorul rădăcină al aplicației React.

Apoi, prefixați numele cheii API cu REACT_APP ca aceasta:

REACT_APP_API_KEY="cheia_api"

Acum puteți accesa cheia API în orice fișier din aplicația React folosind process.env.

const API_KEY = process.env. REACT_APP_API_KEY

Asigurați-vă că adăugați .env la fișierul .gitignore pentru a împiedica git să-l urmărească.

De ce nu ar trebui să stocați cheile secrete în .env

Orice stocați într-un fișier .env este disponibil public în versiunea de producție. React îl încorporează în fișierele de compilare, ceea ce înseamnă că oricine îl poate găsi inspectând fișierele aplicației dvs. În schimb, utilizați un proxy backend care apelează API-ul în numele aplicației dvs. front-end.

Stocarea variabilelor de mediu în codul backend

După cum sa menționat mai sus, trebuie să creați o aplicație backend separată pentru a stoca variabile secrete.

De exemplu, cel Punctul final API de mai jos preia datele dintr-un URL secret.

const apiURL = process.env. API_URL
app.get('/data', asincron (req, res) => {
const răspuns = așteaptă preluare (apiURL)
const date = response.json()
	res.json({date})
})

Apelați acest punct final API pentru a prelua și utiliza datele din front end.

const date = așteaptă fetch('http://backend-url/data')

Acum, dacă nu împingeți fișierul .env în GitHub, adresa URL API nu va fi vizibilă în fișierele dvs. de compilare.

Utilizarea Next.js pentru a stoca variabilele de mediu

O altă alternativă este utilizarea Next.js. Puteți accesa variabilele de mediu private în funcția getStaticProps().

Această funcție rulează în timpul construirii pe server. Deci variabilele de mediu pe care le accesați în această funcție vor fi disponibile numai în mediul Node.js.

Mai jos este un exemplu.

exportasincronfuncţiegetStaticProps() {
const res = așteaptă prelua (process.env. API_URL)
const date = res.json()
întoarcere {recuzită: { date }}
}

Datele vor fi disponibile pe pagină prin elemente de recuzită și le puteți accesa după cum urmează.

funcţieAcasă({ date }) {
întoarcere (
<div>
// redă datele
</div>
 );
}

Spre deosebire de React, nu trebuie să prefixați numele variabilei cu nimic și îl puteți adăuga la fișierul .env astfel:

API_URL=https://secret-url/de3ed3f

Next.js vă permite, de asemenea, să creați puncte finale API în pagini/api pliant. Codul din aceste puncte terminale rulează pe server, astfel încât să puteți masca secretele din front-end.

De exemplu, exemplul de mai sus poate fi rescris în pages/api/getData.js fișier ca rută API.

exportMod implicitasincronfuncţiemanipulator(cerere, res) {
const răspuns = așteaptă prelua (process.env. API_URL)
const date = response.json()
întoarcere res.json({date})
}

Acum puteți accesa datele returnate prin intermediul /pages/api/getData.js punct final.

Păstrarea cheilor API secrete

Impingerea API-urilor către GitHub nu este recomandabilă. Oricine vă poate găsi cheile și le poate folosi pentru a face solicitări API. Folosind un fișier .env neurmărit, împiedicați acest lucru să se întâmple.

Cu toate acestea, nu ar trebui să stocați niciodată secrete sensibile într-un fișier .env din codul dvs. frontend, deoarece oricine le poate vedea atunci când vă inspectează codul. În schimb, preluați datele de pe partea serverului sau utilizați Next.js pentru a masca variabilele private.