Kako shraniti in dostopati do ključev API v aplikaciji React

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.

MAKEUSEOF VIDEO DNEVA

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 uporabo create-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.

za kaj lahko uporabljam darilno kartico itunes

Nato imenu ključa API dodajte predpono z REACT_APP Všečkaj to:

REACT_APP_API_KEY="your_api_key"

Zdaj lahko dostopate do ključa API v kateri koli datoteki v aplikaciji React z uporabo process.env.

const 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.

const apiURL = process.env.API_URL 
app.get('/data', async (req, res) => { 
	const response = await fetch(apiURL) 
	const data = response.json() 
	res.json({data}) 
})

Pokličite to končno točko API, da pridobite in uporabite podatke v sprednjem delu.

const data = await 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.

export async function getStaticProps() { 
    const res = await fetch(process.env.API_URL) 
    const data = res.json() 
    return {props: { data }} 
}

Podatki bodo na strani dostopni prek rekvizitov, do njih pa lahko dostopate na naslednji način.

function Home({ data }) { 
  return ( 
    <div> 
      // render data 
    </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.

malina pi 3 b+ overclock

4B479C8FF1390AFADECE0CFFD337D1B5229075

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.