Moderne nettapplikasjoner er avhengige av eksterne API-er for ekstra funksjonalitet. Noen API-er bruker identifikatorer som nøkler og hemmeligheter for å knytte forespørsler til en bestemt applikasjon. Disse nøklene er sensitive, og du bør ikke skyve dem til GitHub, da alle kan bruke dem til å sende en forespørsel til API-en ved å bruke kontoen din.

Denne opplæringen vil lære deg hvordan du trygt lagrer og får tilgang til API-nøkler i en React-applikasjon.

Legge til miljøvariabler i en CRA-app

EN Reager-applikasjon som du oppretter ved hjelp avlag-reager-app støtter miljøvariabler ut av boksen. Den leser variabler som begynner med REACT_APP og gjør dem tilgjengelige gjennom process.env. Dette er mulig fordi dotenv npm-pakken kommer installert og konfigurert i en CRA-app.

For å lagre API-nøklene, lag en ny fil kalt .env i rotkatalogen til React-applikasjonen.

Deretter, prefiks API-nøkkelnavnet med REACT_APP som dette:

REACT_APP_API_KEY="din_api_key"

Du kan nå få tilgang til API-nøkkelen i en hvilken som helst fil i React-appen ved å bruke process.env.

konst API_KEY = prosess.env. REACT_APP_API_KEY

Sørg for at du legger til .env i .gitignore-filen for å forhindre at git sporer den.

Hvorfor du ikke bør lagre hemmelige nøkler i .env

Alt du lagrer i en .env-fil er offentlig tilgjengelig i produksjonsbygget. React bygger det inn i byggefilene, noe som betyr at alle kan finne det ved å inspisere appens filer. Bruk i stedet en backend-proxy som kaller opp API-en på vegne av front-end-applikasjonen din.

Lagring av miljøvariabler i backend-koden

Som nevnt ovenfor, må du opprette en egen backend-applikasjon for å lagre hemmelige variabler.

For eksempel API-endepunkt nedenfor henter data fra en hemmelig URL.

konst apiURL = prosess.env. API_URL
app.get('/data', asynkron (req, res) => {
konst svar = avvente hente (apiURL)
konst data = respons.json()
	res.json({data})
})

Kall dette API-endepunktet for å hente og bruke dataene i grensesnittet.

konst data = avvente hente('http://backend-url/data')

Nå, med mindre du sender .env-filen til GitHub, vil ikke API-URLen være synlig i byggefilene dine.

Bruke Next.js til å lagre miljøvariabler

Et annet alternativ er å bruke Next.js. Du kan få tilgang til private miljøvariabler i getStaticProps()-funksjonen.

Denne funksjonen kjører under byggetiden på serveren. Så miljøvariablene du får tilgang til i denne funksjonen vil bare være tilgjengelig i Node.js-miljøet.

Nedenfor er et eksempel.

eksportasynkronfunksjongetStaticProps() {
konst res = avvente hente (process.env. API_URL)
konst data = res.json()
komme tilbake {Rekvisitter: { data }}
}

Dataene vil være tilgjengelige på siden via rekvisitter, og du får tilgang til dem som følger.

funksjonHjem({ data }) {
komme tilbake (
<div>
// gjengi data
</div>
 );
}

I motsetning til i React, trenger du ikke å prefiksere variabelnavnet med noe, og du kan legge det til i .env-filen slik:

API_URL=https://secret-url/de3ed3f

Next.js lar deg også lage API-endepunkter i sider/api mappe. Kode i disse endepunktene kjører på serveren, slik at du kan maskere hemmeligheter fra grensesnittet.

Eksempelet ovenfor kan for eksempel skrives om i pages/api/getData.js fil som en API-rute.

eksportmisligholdeasynkronfunksjonhandler(krav, res) {
konst svar = avvente hente (process.env. API_URL)
konst data = respons.json()
komme tilbake res.json({data})
}

Du kan nå få tilgang til de returnerte dataene via /pages/api/getData.js endepunkt.

Holde API-nøkler hemmelige

Det er ikke tilrådelig å skyve APIer til GitHub. Hvem som helst kan finne nøklene dine og bruke dem til å sende API-forespørsler. Ved å bruke en usporet .env-fil forhindrer du at dette skjer.

Du bør imidlertid aldri lagre sensitive hemmeligheter i en .env-fil i grensesnittkoden din fordi alle kan se den når de inspiserer koden din. Hent i stedet dataene på serversiden eller bruk Next.js for å maskere private variabler.