Moderne webapplicaties vertrouwen op externe API's voor extra functionaliteit. Sommige API's gebruiken id's zoals sleutels en geheimen om verzoeken aan een bepaalde toepassing te koppelen. Deze sleutels zijn gevoelig en u moet ze niet naar GitHub pushen, aangezien iedereen ze zou kunnen gebruiken om een ​​verzoek naar de API te sturen met uw account.

Deze tutorial leert je hoe je veilig API-sleutels opslaat en opent in een React-toepassing.

Omgevingsvariabelen toevoegen in een CRA-app

EEN Reageer applicatie die je maakt metmaak-reageer-app ondersteunt out-of-the-box omgevingsvariabelen. Het leest variabelen die beginnen met REACT_APP en maakt ze beschikbaar via process.env. Dit is mogelijk omdat het dotenv npm-pakket wordt geïnstalleerd en geconfigureerd in een CRA-app.

Om de API-sleutels op te slaan, maakt u een nieuw bestand met de naam .env in de hoofdmap van de React-toepassing.

Voeg vervolgens de naam van de API-sleutel toe met REACT_APP soortgelijk:

REACT_APP_API_KEY="jouw_api_key"

Je hebt nu toegang tot de API-sleutel in elk bestand in de React-app met behulp van process.env.

instagram viewer 
const API_KEY = proces.env. REACT_APP_API_KEY

Zorg ervoor dat je .env toevoegt aan het .gitignore-bestand om te voorkomen dat git het volgt.

Waarom u geen geheime sleutels in .env moet bewaren

Alles wat u opslaat in een .env-bestand is openbaar beschikbaar in de productieversie. React sluit het in de buildbestanden in, wat betekent dat iedereen het kan vinden door de bestanden van je app te inspecteren. Gebruik in plaats daarvan een back-endproxy die de API aanroept namens uw front-endtoepassing.

Omgevingsvariabelen opslaan in de backend-code

Zoals hierboven vermeld, moet u een afzonderlijke backend-toepassing maken om geheime variabelen op te slaan.

Bijvoorbeeld de API-eindpunt hieronder haalt gegevens op van een geheime URL.

const apiURL = proces.env. API_URL
app.get('/data', asynchrone (req, res) => {
const reactie = wachten ophalen (apiURL)
const gegevens = respons.json()
	res.json({data})
})

Roep dit API-eindpunt aan om de gegevens in de front-end op te halen en te gebruiken.

const gegevens = wachten ophalen('http://backend-url/data')

Nu, tenzij u het .env-bestand naar GitHub pusht, is de API-URL niet zichtbaar in uw buildbestanden.

Next.js gebruiken om omgevingsvariabelen op te slaan

Een ander alternatief is om Next.js te gebruiken. U hebt toegang tot privé-omgevingsvariabelen in de functie getStaticProps().

Deze functie wordt uitgevoerd tijdens de bouwtijd op de server. De omgevingsvariabelen die u binnen deze functie opent, zijn dus alleen beschikbaar in de Node.js-omgeving.

Hieronder staat een voorbeeld.

exporterenasynchronefunctiegetStaticProps() {
const res = wachten ophalen (proces.env. API_URL)
const gegevens = res.json()
opbrengst {rekwisieten: { gegevens }}
}

De gegevens zullen via rekwisieten op de pagina beschikbaar zijn en u kunt deze als volgt openen.

functieHuis({ gegevens }) {
opbrengst (
<div>
// gegevens weergeven
</div>
 );
}

In tegenstelling tot in React hoef je de variabelenaam nergens voor te voegen en kun je deze als volgt aan het .env-bestand toevoegen:

API_URL=https://secret-url/de3ed3f

Met Next.js kunt u ook API-eindpunten maken in de pagina's/api map. Code in deze eindpunten wordt op de server uitgevoerd, zodat u geheimen van de front-end kunt maskeren.

Het bovenstaande voorbeeld kan bijvoorbeeld worden herschreven in de pages/api/getData.js bestand als een API-route.

exporterenstandaardasynchronefunctieafhandelaar(req, res) {
const reactie = wachten ophalen (proces.env. API_URL)
const gegevens = respons.json()
opbrengst res.json({data})
}

U hebt nu toegang tot de geretourneerde gegevens via de /pages/api/getData.js eindpunt.

API-sleutels geheim houden

API's naar GitHub pushen is niet aan te raden. Iedereen kan uw sleutels vinden en gebruiken om API-verzoeken te doen. Door een niet-getrackt .env-bestand te gebruiken, voorkom je dat dit gebeurt.

Bewaar gevoelige geheimen echter nooit in een .env-bestand in uw frontend-code, omdat iedereen deze kan zien wanneer ze uw code inspecteren. Haal in plaats daarvan de gegevens op aan de serverzijde of gebruik Next.js om privévariabelen te maskeren.