Hur man lagrar och får åtkomst till API-nycklar i en React-applikation

Hur man lagrar och får åtkomst till API-nycklar i en React-applikation

Moderna webbapplikationer förlitar sig på externa API:er för extra funktionalitet. Vissa API:er använder identifierare som nycklar och hemligheter för att associera förfrågningar med en viss applikation. Dessa nycklar är känsliga och du bör inte skicka dem till GitHub eftersom vem som helst kan använda dem för att skicka en begäran till API:t med ditt konto.





MAKEUSE AV DAGENS VIDEO

Denna handledning kommer att lära dig hur du säkert lagrar och kommer åt API-nycklar i en React-applikation.





Lägga till miljövariabler i en CRA-app

A Reagera applikation som du skapar med hjälp av skapa-reagera-app stöder miljövariabler direkt. Den läser variabler som börjar med REACT_APP och gör dem tillgängliga via process.env. Detta är möjligt eftersom dotenv npm-paketet kommer installerat och konfigurerat i en CRA-app.





För att lagra API-nycklarna, skapa en ny fil som heter .env i rotkatalogen för React-applikationen.

Prefix sedan API-nyckelns namn med REACT_APP så här:



REACT_APP_API_KEY="your_api_key" 

Du kan nu komma åt API-nyckeln i valfri fil i React-appen med process.env.

const API_KEY = process.env.REACT_APP_API_KEY 

Se till att du lägger till .env i .gitignore-filen för att förhindra att git spårar den.





Varför du inte bör lagra hemliga nycklar i .env

Allt du lagrar i en .env-fil är allmänt tillgängligt i produktionsbygget. React bäddar in det i byggfilerna, vilket innebär att alla kan hitta det genom att inspektera din app filer. Använd istället en backend-proxy som anropar API:et på uppdrag av din front-end-applikation.

Lagra miljövariabler i backend-koden

Som nämnts ovan måste du skapa en separat backend-applikation för att lagra hemliga variabler.





Till exempel API-slutpunkt nedan hämtar data från en hemlig URL.

const apiURL = process.env.API_URL 
app.get('/data', async (req, res) => {
const response = await fetch(apiURL)
const data = response.json()
res.json({data})
})

Anrop denna API-slutpunkt för att hämta och använda data i gränssnittet.

const data = await fetch('http://backend-url/data') 

Nu, om du inte skickar .env-filen till GitHub, kommer API-URL:n inte att vara synlig i dina byggfiler.

Använda Next.js för att lagra miljövariabler

Ett annat alternativ är att använda Next.js. Du kan komma åt privata miljövariabler i getStaticProps()-funktionen.

text från surfplatta med mobilnummer

Denna funktion körs under byggtiden på servern. Så miljövariablerna du kommer åt i den här funktionen kommer bara att vara tillgängliga i Node.js-miljön.

Nedan följer ett exempel.

export async function getStaticProps() { 
const res = await fetch(process.env.API_URL)
const data = res.json()
return {props: { data }}
}

Uppgifterna kommer att finnas tillgängliga på sidan via rekvisita, och du kan komma åt den enligt följande.

function Home({ data }) { 
return (
<div>
// render data
</div>
);
}

Till skillnad från i React behöver du inte prefixa variabelnamnet med någonting och du kan lägga till det i .env-filen så här:

API_URL=https://secret-url/de3ed3f 

Next.js låter dig också skapa API-slutpunkter i sidor/api mapp. Koden i dessa slutpunkter körs på servern, så att du kan maskera hemligheter från gränssnittet.

Till exempel kan exemplet ovan skrivas om i pages/api/getData.js fil som en API-rutt.

4B479C8FF1390AFADECE0CFFD337D1B5229075

Du kan nu komma åt den returnerade informationen via /pages/api/getData.js slutpunkt.

Håller API-nycklar hemliga

Det är inte tillrådligt att skjuta API:er till GitHub. Vem som helst kan hitta dina nycklar och använda dem för att göra API-förfrågningar. Genom att använda en ospårad .env-fil förhindrar du att detta händer.

Du bör dock aldrig lagra känsliga hemligheter i en .env-fil i din frontend-kod eftersom alla kan se den när de inspekterar din kod. Hämta istället data på serversidan eller använd Next.js för att maskera privata variabler.