API-kulcsok tárolása és elérése egy React alkalmazásban

A modern webalkalmazások külső API-kra támaszkodnak a további funkciók érdekében. Egyes API-k azonosítókat, például kulcsokat és titkokat használnak a kérések egy adott alkalmazáshoz való társításához. Ezek a kulcsok érzékenyek, és ne küldje el őket a GitHubnak, mivel bárki felhasználhatja őket arra, hogy kérést küldjön az API-nak az Ön fiókja használatával.

MAKEUSEOF A NAP VIDEÓJA

Ez az oktatóanyag megtanítja Önnek, hogyan kell biztonságosan tárolni és elérni az API-kulcsokat egy React alkalmazásban.

Környezeti változók hozzáadása egy CRA-alkalmazásban

A Reagáljon a segítségével létrehozott alkalmazásra Alkalmazás létrehozása-reagálása támogatja a környezeti változókat. Beolvassa a REACT_APP-vel kezdődő változókat, és elérhetővé teszi őket a process.env fájlon keresztül. Ez azért lehetséges, mert a dotenv npm csomag egy CRA-alkalmazásban van telepítve és konfigurálva.

Az API-kulcsok tárolásához hozzon létre egy új, .env nevű fájlt a React alkalmazás gyökérkönyvtárában.

Windows 10 kék képernyő rendszer szolgáltatás kivétel

Ezután írja be az API-kulcs nevét a következővel: REACT_APP mint ez:

REACT_APP_API_KEY="your_api_key"

Mostantól elérheti az API-kulcsot a React alkalmazás bármely fájljában a process.env használatával.

const API_KEY = process.env.REACT_APP_API_KEY

Ügyeljen arra, hogy hozzáadja az .env fájlt a .gitignore fájlhoz, hogy megakadályozza a git nyomon követését.

Miért nem szabad titkos kulcsokat tárolni .env

Bármi, amit .env fájlban tárol, nyilvánosan elérhető az éles buildben. A React beágyazza a build fájljaiba, ami azt jelenti, hogy bárki megtalálhatja az alkalmazás fájljainak ellenőrzésével. Ehelyett használjon egy háttérproxyt, amely meghívja az API-t az előtér-alkalmazás nevében.

Környezeti változók tárolása a háttérkódban

Mint fentebb említettük, létre kell hoznia egy külön háttéralkalmazást a titkos változók tárolására.

Például a Az alábbi API-végpont lekéri az adatokat titkos URL-ről.

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

Hívja ezt az API-végpontot az adatok lekéréséhez és felhasználásához a kezelőfelületen.

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

Hacsak nem tolja be az .env fájlt a GitHubba, az API URL-címe nem lesz látható a build fájljaiban.

A Next.js használata környezeti változók tárolására

Egy másik alternatíva a Next.js használata. A privát környezeti változókat a getStaticProps() függvényben érheti el.

Ez a funkció a szerver felépítési ideje alatt fut. Tehát a függvényen belül elérhető környezeti változók csak a Node.js környezetben lesznek elérhetők.

hogyan lehet letölteni a linuxot egy chromebookra

Alább egy példa.

hogyan továbbítsuk az outlook -ot a gmail -re

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

Az adatok kellékeken keresztül lesznek elérhetőek az oldalon, melyeket az alábbiak szerint érhetsz el.

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

Ellentétben a React-tal, a változó nevét nem kell semmivel sem előtagolni, és a következőképpen adhatja hozzá az .env fájlhoz:

API_URL=https://secret-url/de3ed3f

A Next.js lehetővé teszi API-végpontok létrehozását is a oldalak/api mappát. Az ezekben a végpontokban található kód a kiszolgálón fut, így elfedheti a titkokat a kezelőfelületről.

Például a fenti példa átírható a pages/api/getData.js fájlt API útvonalként.

4B479C8FF1390AFADECE0CFFD337D1B5229075

Mostantól elérheti a visszaküldött adatokat a /pages/api/getData.js végpont.

Az API kulcsok titokban tartása

Az API-k átküldése a GitHubba nem tanácsos. Bárki megtalálhatja a kulcsait, és felhasználhatja őket API-kérésekhez. Egy nyomon nem követett .env fájl használatával megakadályozza, hogy ez megtörténjen.

Azonban soha ne tároljon bizalmas titkokat .env fájlban a frontend kódban, mert bárki láthatja, amikor megvizsgálja a kódot. Ehelyett kérje le az adatokat a szerver oldalon, vagy használja a Next.js-t a privát változók maszkírozására.