Cómo almacenar y acceder a claves API en una aplicación React

Las aplicaciones web modernas se basan en API externas para una mayor funcionalidad. Algunas API usan identificadores como claves y secretos para asociar solicitudes con una aplicación en particular. Estas claves son confidenciales y no debe enviarlas a GitHub, ya que cualquiera podría usarlas para enviar una solicitud a la API usando su cuenta.

cómo hacer que los juegos se descarguen más rápido

MAKEUSEOF VÍDEO DEL DÍA

Este tutorial le enseñará cómo almacenar y acceder de manera segura a las claves API en una aplicación React.

Adición de variables de entorno en una aplicación CRA

A Reacciona la aplicación que creas usando crear-reaccionar-app admite variables de entorno listas para usar. Lee variables que comienzan con REACT_APP y las pone a disposición a través de process.env. Esto es posible porque el paquete dotenv npm viene instalado y configurado en una aplicación CRA.

Para almacenar las claves API, cree un nuevo archivo llamado .env en el directorio raíz de la aplicación React.

Luego, prefije el nombre de la clave API con REACT_APP como esto:

REACT_APP_API_KEY="your_api_key"

Ahora puede acceder a la clave API en cualquier archivo en la aplicación React usando process.env.

const API_KEY = process.env.REACT_APP_API_KEY

Asegúrese de agregar .env al archivo .gitignore para evitar que git lo rastree.

Por qué no debe almacenar claves secretas en .env

Cualquier cosa que almacene en un archivo .env está disponible públicamente en la compilación de producción. React lo incrusta en los archivos de compilación, lo que significa que cualquiera puede encontrarlo al inspeccionar los archivos de su aplicación. En su lugar, utilice un proxy de back-end que llame a la API en nombre de su aplicación de front-end.

Almacenamiento de variables de entorno en el código de backend

Como se mencionó anteriormente, debe crear una aplicación de back-end separada para almacenar variables secretas.

por ejemplo, el El punto final de la API a continuación obtiene datos desde una URL secreta.

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

Llame a este punto final de API para obtener y usar los datos en el front-end.

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

Ahora, a menos que envíe el archivo .env a GitHub, la URL de la API no estará visible en sus archivos de compilación.

Uso de Next.js para almacenar variables de entorno

Otra alternativa es usar Next.js. Puede acceder a variables de entorno privadas en la función getStaticProps().

Esta función se ejecuta durante el tiempo de compilación en el servidor. Por lo tanto, las variables de entorno a las que accede dentro de esta función solo estarán disponibles en el entorno Node.js.

A continuación se muestra un ejemplo.

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

Los datos estarán disponibles en la página a través de accesorios, y puede acceder a ellos de la siguiente manera.

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

A diferencia de React, no tiene que anteponer nada al nombre de la variable y puede agregarlo al archivo .env de esta manera:

API_URL=https://secret-url/de3ed3f

Next.js también le permite crear puntos finales de API en el páginas/api carpeta. El código en estos puntos finales se ejecuta en el servidor, por lo que puede enmascarar secretos desde el front-end.

Por ejemplo, el ejemplo anterior se puede reescribir en el páginas/api/getData.js archivo como una ruta API.

la mejor manera de vender cómics

4B479C8FF1390AFADECE0CFFD337D1B5229075

Ahora puede acceder a los datos devueltos a través del /pages/api/getData.js punto final

Mantener las claves API en secreto

No es aconsejable enviar API a GitHub. Cualquiera puede encontrar sus claves y usarlas para realizar solicitudes de API. Al usar un archivo .env sin seguimiento, evita que esto suceda.

Sin embargo, nunca debe almacenar secretos confidenciales en un archivo .env en su código de interfaz porque cualquiera puede verlo cuando inspeccione su código. En su lugar, obtenga los datos del lado del servidor o use Next.js para enmascarar variables privadas.