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.
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ásraAlkalmazá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.
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 válasz = várják letöltés (apiURL)
const adatok = válasz.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 adatok = várják 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.
Alább egy példa.
exportasyncfunkciógetStaticProps() {
const res = várják letöltés (process.env. API_URL)
const adatok = res.json()
Visszatérés {kellékek: { adat }}
}
Az adatok kellékeken keresztül lesznek elérhetőek az oldalon, melyeket az alábbiak szerint érhetsz el.
funkcióitthon({ adat }) {
Visszatérés (
<div>
// adatok megjelenítése
</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.
exportalapértelmezettasyncfunkciókezelő(req, res) {
const válasz = várják letöltés (process.env. API_URL)
const adatok = válasz.json()
Visszatérés res.json({data})
}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.
