Blog

Aug 20, 2023

Come archiviare e accedere alle chiavi API in un'applicazione React

You can do a lot with APIs, but make sure you keep your keys and passwords safe

Puoi fare molto con le API, ma assicurati di mantenere le chiavi e le password sicure e protette.

Le moderne applicazioni web si affidano ad API esterne per funzionalità aggiuntive. Alcune API utilizzano identificatori come chiavi e segreti per associare le richieste a una particolare applicazione. Queste chiavi sono sensibili e non dovresti inviarle a GitHub poiché chiunque potrebbe utilizzarle per inviare una richiesta all'API utilizzando il tuo account.

Questo tutorial ti insegnerà come archiviare e accedere in modo sicuro alle chiavi API in un'applicazione React.

Un'applicazione React creata utilizzandocrea-react-app supporta le variabili di ambiente pronte all'uso. Legge le variabili che iniziano con REACT_APP e le rende disponibili tramite process.env. Ciò è possibile perché il pacchetto dotenv npm viene installato e configurato in un'app CRA.

Per archiviare le chiavi API, crea un nuovo file chiamato .env nella directory root dell'applicazione React.

Quindi, anteponi il nome della chiave API conREACT_APPcome questo:

Ora puoi accedere alla chiave API in qualsiasi file nell'app React utilizzando process.env.

Assicurati di aggiungere .env al file .gitignore per impedire a git di tracciarlo.

Tutto ciò che archivi in ​​un file .env è disponibile pubblicamente nella build di produzione. React lo incorpora nei file di build, il che significa che chiunque può trovarlo controllando i file della tua app. Utilizza invece un proxy backend che chiama l'API per conto della tua applicazione front-end.

Come accennato in precedenza, è necessario creare un'applicazione backend separata per archiviare le variabili segrete.

Ad esempio, l'endpoint API riportato di seguito recupera i dati da un URL segreto.

Chiama questo endpoint API per recuperare e utilizzare i dati nel front-end.

Ora, a meno che non invii il file .env a GitHub, l'URL dell'API non sarà visibile nei tuoi file di build.

Un'altra alternativa è utilizzare Next.js. Puoi accedere alle variabili di ambiente private nella funzione getStaticProps().

Questa funzione viene eseguita durante la fase di compilazione sul server. Pertanto le variabili di ambiente a cui accedi all'interno di questa funzione saranno disponibili solo nell'ambiente Node.js.

Di seguito è riportato un esempio.

I dati saranno disponibili sulla pagina tramite oggetti di scena e potrai accedervi come segue.

A differenza di React, non è necessario anteporre nulla al nome della variabile e puoi aggiungerlo al file .env in questo modo:

Next.js ti consente anche di creare endpoint API nel filepagine/API cartella. Il codice in questi endpoint viene eseguito sul server, quindi puoi mascherare i segreti dal front-end.

Ad esempio, l'esempio precedente può essere riscritto nel filepagine/api/getData.jsfile come percorso API.

Ora puoi accedere ai dati restituiti tramite il file/pages/api/getData.jspunto finale.

Non è consigliabile inviare le API a GitHub. Chiunque può trovare le tue chiavi e usarle per effettuare richieste API. Utilizzando un file .env non tracciato, eviti che ciò accada.

Tuttavia, non dovresti mai archiviare segreti sensibili in un file .env nel tuo codice frontend perché chiunque può vederlo quando esamina il tuo codice. Invece, recupera i dati sul lato server o utilizza Next.js per mascherare le variabili private.

Mary è una scrittrice presso il MUO con sede a Nairobi. Ha una laurea in fisica applicata e informatica, ma le piace di più lavorare nel settore tecnologico. Dal 2020 programma e scrive articoli tecnici.