Com emmagatzemar i accedir a les claus de l'API en una aplicació React

Les aplicacions web modernes es basen en API externes per a una funcionalitat addicional. Algunes API utilitzen identificadors com claus i secrets per associar sol·licituds amb una aplicació concreta. Aquestes claus són sensibles i no les hauríeu d'enviar a GitHub, ja que qualsevol pot utilitzar-les per enviar una sol·licitud a l'API mitjançant el vostre compte.

MAKEUSEO VÍDEO DEL DIA

Aquest tutorial us ensenyarà com emmagatzemar i accedir de manera segura a les claus de l'API en una aplicació React.

Afegir variables d'entorn en una aplicació CRA

A L'aplicació React que creeu utilitzant crear-reaccionar-aplicació admet variables d'entorn fora de la caixa. Llegeix variables que comencen per REACT_APP i les fa disponibles mitjançant process.env. Això és possible perquè el paquet dotenv npm ve instal·lat i configurat en una aplicació CRA.

Per emmagatzemar les claus de l'API, creeu un fitxer nou anomenat .env al directori arrel de l'aplicació React.

com trobar la prova de passió

A continuació, prefixeu el nom de la clau de l'API amb REACT_APP com això:

REACT_APP_API_KEY="your_api_key"

Ara podeu accedir a la clau API en qualsevol fitxer de l'aplicació React mitjançant process.env.

const API_KEY = process.env.REACT_APP_API_KEY

Assegureu-vos d'afegir .env al fitxer .gitignore per evitar que git el faci el seguiment.

Per què no hauríeu d'emmagatzemar les claus secretes a .env

Tot el que emmagatzemeu en un fitxer .env està disponible públicament a la versió de producció. React l'incrusta als fitxers de compilació, el que significa que qualsevol pot trobar-lo inspeccionant els fitxers de la vostra aplicació. En comptes d'això, utilitzeu un servidor intermediari de fons que cridi a l'API en nom de la vostra aplicació frontal.

Emmagatzematge de variables d'entorn al codi de fons

Com s'ha esmentat anteriorment, heu de crear una aplicació de backend independent per emmagatzemar variables secretes.

Per exemple, el El punt final de l'API a continuació recupera les dades des d'un URL secret.

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

Truqueu a aquest punt final de l'API per obtenir i utilitzar les dades de la portada.

quants anys has de tenir per a un paypal

const data = await fetch('http://backend-url/data')

Ara, tret que envieu el fitxer .env a GitHub, l'URL de l'API no serà visible als vostres fitxers de compilació.

Ús de Next.js per emmagatzemar variables d'entorn

Una altra alternativa és utilitzar Next.js. Podeu accedir a variables d'entorn privades a la funció getStaticProps().

Aquesta funció s'executa durant el temps de construcció al servidor. Per tant, les variables d'entorn a les quals accediu dins d'aquesta funció només estaran disponibles a l'entorn Node.js.

A continuació es mostra un exemple.

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

Les dades estaran disponibles a la pàgina mitjançant accessoris, i podeu accedir-hi de la següent manera.

com gravar converses telefòniques a l'iPhone

function Home({ data }) { 
  return ( 
    <div> 
      // render data 
    </div> 
  ); 
}

A diferència de React, no cal que prefixeu res al nom de la variable i podeu afegir-lo al fitxer .env d'aquesta manera:

API_URL=https://secret-url/de3ed3f

Next.js també us permet crear punts finals de l'API al fitxer pàgines/api carpeta. El codi d'aquests punts finals s'executa al servidor, de manera que podeu emmascarar els secrets de la portada.

Per exemple, l'exemple anterior es pot reescriure al fitxer pages/api/getData.js fitxer com a ruta API.

4B479C8FF1390AFADECE0CFFD337D1B5229075

Ara podeu accedir a les dades retornades mitjançant el /pages/api/getData.js punt final.

Mantenir en secret les claus de l'API

No és aconsellable enviar API a GitHub. Qualsevol pot trobar les teves claus i utilitzar-les per fer sol·licituds d'API. Si feu servir un fitxer .env sense seguiment, eviteu que això passi.

No obstant això, mai no hauríeu d'emmagatzemar secrets sensibles en un fitxer .env del vostre codi d'interfície perquè qualsevol pot veure'l quan inspeccioni el vostre codi. En lloc d'això, obteniu les dades del costat del servidor o utilitzeu Next.js per emmascarar variables privades.