Blog

Aug 20, 2023

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

Puede hacer mucho con las API, pero asegúrese de mantener seguras sus claves y contraseñas

Puede hacer mucho con las API, pero asegúrese de mantener sus claves y contraseñas seguras y protegidas.

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.

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

Una aplicación React que creas usandocrear-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 conREACT_APPcomo esto:

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

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

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.

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

Por ejemplo, el extremo de la API a continuación obtiene datos de una URL secreta.

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

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.

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.

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

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

Next.js también le permite crear puntos finales de API en elpá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 elpáginas/api/getData.jsarchivo como una ruta API.

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

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.

Mary es redactora del personal de MUO con sede en Nairobi. Tiene una licenciatura en Física Aplicada y Ciencias de la Computación, pero le gusta más trabajar en tecnología. Ha estado codificando y escribiendo artículos técnicos desde 2020.