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.
Adición de variables de entorno en una aplicación CRA
A Reacciona la aplicación 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 con REACT_APP como esto:
REACT_APP_API_KEY="tu_clave_api"
Ahora puede acceder a la clave API en cualquier archivo en la aplicación React usando process.env.
constante API_KEY = proceso.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.
constante apiURL = proceso.env. API_URL
aplicación.obtener('/data', asíncrono (requerido, res) => {
constante respuesta = esperar buscar (apiURL)
constante datos = respuesta.json()
res.json({datos})
})
Llame a este punto final de API para obtener y usar los datos en el front-end.
constante datos = esperar buscar ('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.
exportarasíncronofuncióngetStaticProps() {
constante resolución = esperar buscar (proceso.env. API_URL)
constante datos = res.json()
devolver {accesorios: { datos }}
}
Los datos estarán disponibles en la página a través de accesorios, y puede acceder a ellos de la siguiente manera.
funciónHogar({ datos }) {
devolver (
<división>
// renderizar datos
</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.
exportardefectoasíncronofunciónmanipulador(requerimiento, res) {
constante respuesta = esperar buscar (proceso.env. API_URL)
constante datos = respuesta.json()
devolver res.json({datos})
}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.
