Le moderne applicazioni Web si basano su 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 usarle 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.
Aggiunta di variabili d'ambiente in un'app CRA
UN Reagisci all'applicazione che crei utilizzandocreare-reagire-app supporta le variabili di ambiente fuori dagli schemi. 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 memorizzare le chiavi API, creare un nuovo file chiamato .env nella directory principale dell'applicazione React.
Quindi, anteponi al nome della chiave API REACT_APP come questo:
REACT_APP_API_KEY="la tua_api_key"
Ora puoi accedere alla chiave API in qualsiasi file nell'app React utilizzando process.env.
cost API_KEY = process.env. REACT_APP_API_KEY
Assicurati di aggiungere .env al file .gitignore per impedire a git di tracciarlo.
Perché non dovresti memorizzare le chiavi segrete in .env
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 ispezionando i file della tua app. Utilizza invece un proxy back-end che chiama l'API per conto della tua applicazione front-end.
Memorizzazione delle variabili d'ambiente nel codice back-end
Come accennato in precedenza, è necessario creare un'applicazione back-end separata per archiviare le variabili segrete.
Ad esempio, il L'endpoint API sottostante recupera i dati da un URL segreto.
cost apiURL = process.env. API_URL
app.get('/data', asincrono (richiesto, res) => {
cost risposta = aspettare recupera (apiURL)
cost dati = risposta.json()
res.json({data})
})
Chiama questo endpoint API per recuperare e utilizzare i dati nel front-end.
cost dati = aspettare recupera('http://backend-url/data')
Ora, a meno che tu non spinga il file .env su GitHub, l'URL dell'API non sarà visibile nei tuoi file di build.
Utilizzo di Next.js per archiviare le variabili di ambiente
Un'altra alternativa è usare Next.js. È possibile accedere alle variabili di ambiente private nella funzione getStaticProps().
Questa funzione viene eseguita durante la fase di compilazione sul server. Quindi le variabili di ambiente a cui accedi all'interno di questa funzione saranno disponibili solo nell'ambiente Node.js.
Di seguito è riportato un esempio.
esportareasincronofunzionegetStaticProps() {
cost ris = aspettare recuperare (process.env. API_URL)
cost dati = ris.json()
Restituzione {oggetti di scena: { dati }}
}
I dati saranno disponibili sulla pagina tramite props e potrai accedervi come segue.
funzioneCasa({ dati }) {
Restituzione (
<div>
// esegue il rendering dei dati
</div>
);
}
A differenza di React, non devi anteporre al nome della variabile nulla e puoi aggiungerlo al file .env in questo modo:
API_URL=https://secret-url/de3ed3f
Next.js ti consente anche di creare endpoint API nel file pagine/api cartella. Il codice in questi endpoint viene eseguito sul server, quindi puoi mascherare i segreti dal front-end.
Ad esempio, l'esempio sopra può essere riscritto nel file pagine/api/getData.js file come un percorso API.
esportarepredefinitoasincronofunzionegestore(req, ris) {
cost risposta = aspettare recuperare (process.env. API_URL)
cost dati = risposta.json()
Restituzione res.json({data})
}È ora possibile accedere ai dati restituiti tramite il /pages/api/getData.js punto finale.
Mantenere segrete le chiavi API
Non è consigliabile inviare le API a GitHub. Chiunque può trovare le tue chiavi e usarle per fare richieste API. Utilizzando un file .env non tracciato, impedisci che ciò accada.
Tuttavia, non dovresti mai archiviare segreti sensibili in un file .env nel tuo codice frontend perché chiunque può vederlo quando ispeziona il tuo codice. Invece, recupera i dati sul lato server o usa Next.js per mascherare le variabili private.
