Sådan gemmer og får du adgang til API-nøgler i en React-applikation

Moderne webapplikationer er afhængige af eksterne API'er for ekstra funktionalitet. Nogle API'er bruger identifikatorer som nøgler og hemmeligheder til at knytte anmodninger til en bestemt applikation. Disse nøgler er følsomme, og du bør ikke skubbe dem til GitHub, da alle kan bruge dem til at sende en anmodning til API'et ved hjælp af din konto.

MAKEUSE AF DAGENS VIDEO

Denne vejledning vil lære dig, hvordan du sikkert opbevarer og får adgang til API-nøgler i en React-applikation.

Tilføjelse af miljøvariabler i en CRA-app

EN Reager-applikation, som du opretter ved hjælp af opret-reager-app understøtter miljøvariabler ud af boksen. Den læser variabler, der begynder med REACT_APP, og gør dem tilgængelige via process.env. Dette er muligt, fordi dotenv npm-pakken kommer installeret og konfigureret i en CRA-app.

For at gemme API-nøglerne skal du oprette en ny fil kaldet .env i rodmappen i React-applikationen.

Præfiks derefter API-nøglenavnet med REACT_APP sådan her:

REACT_APP_API_KEY="your_api_key"

Du kan nu få adgang til API-nøglen i enhver fil i React-appen ved hjælp af process.env.

const API_KEY = process.env.REACT_APP_API_KEY

Sørg for at tilføje .env til .gitignore-filen for at forhindre git i at spore den.

hvordan man tjener penge med kodning

Hvorfor du ikke bør opbevare hemmelige nøgler i .env

Alt, hvad du gemmer i en .env-fil, er offentligt tilgængeligt i produktionsbuilden. React indlejrer det i build-filerne, hvilket betyder, at alle kan finde det ved at inspicere din apps filer. Brug i stedet en backend-proxy, der kalder API'en på vegne af din frontend-applikation.

Lagring af miljøvariabler i backend-koden

Som nævnt ovenfor skal du oprette en separat backend-applikation til at gemme hemmelige variabler.

For eksempel API-slutpunktet nedenfor henter data fra en hemmelig 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}) 
})

Kald dette API-slutpunkt for at hente og bruge dataene i frontend.

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

Nu, medmindre du skubber .env-filen til GitHub, vil API-URL'en ikke være synlig i dine build-filer.

Brug af Next.js til at gemme miljøvariabler

Et andet alternativ er at bruge Next.js. Du kan få adgang til private miljøvariabler i getStaticProps()-funktionen.

hvordan slippe af med video forslag på youtube

Denne funktion kører under byggetiden på serveren. Så de miljøvariabler, du får adgang til i denne funktion, vil kun være tilgængelige i Node.js-miljøet.

Nedenfor er et eksempel.

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

Dataene vil være tilgængelige på siden via rekvisitter, og du kan få adgang til dem som følger.

hvordan man slukker en macbook pro

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

I modsætning til i React behøver du ikke at præfikse variabelnavnet med noget, og du kan tilføje det til .env-filen sådan her:

API_URL=https://secret-url/de3ed3f

Next.js giver dig også mulighed for at oprette API-endepunkter i sider/api folder. Kode i disse endepunkter kører på serveren, så du kan maskere hemmeligheder fra frontenden.

For eksempel kan ovenstående eksempel omskrives i pages/api/getData.js fil som en API-rute.

4B479C8FF1390AFADECE0CFFD337D1B5229075

Du kan nu få adgang til de returnerede data via /pages/api/getData.js endepunkt.

Holder API-nøgler hemmelige

Det er ikke tilrådeligt at skubbe API'er til GitHub. Alle kan finde dine nøgler og bruge dem til at lave API-anmodninger. Ved at bruge en usporet .env-fil forhindrer du, at dette sker.

Du bør dog aldrig gemme følsomme hemmeligheder i en .env-fil i din frontend-kode, fordi alle kan se det, når de inspicerer din kode. Hent i stedet dataene på serversiden eller brug Next.js til at maskere private variabler.