Moderní webové aplikace spoléhají na externí rozhraní API pro další funkce. Některá rozhraní API používají identifikátory, jako jsou klíče a tajné klíče, k přiřazení požadavků ke konkrétní aplikaci. Tyto klíče jsou citlivé a neměli byste je odesílat na GitHub, protože by je mohl kdokoli použít k odeslání požadavku do API pomocí vašeho účtu.
Tento tutoriál vás naučí, jak bezpečně ukládat klíče API a přistupovat k nim v aplikaci React.
Přidání proměnných prostředí do aplikace CRA
A Aplikace React, kterou vytvořítecreate-react-app podporuje proměnné prostředí ihned po vybalení. Čte proměnné, které začínají REACT_APP, a zpřístupňuje je prostřednictvím process.env. To je možné, protože balíček dotenv npm je nainstalován a nakonfigurován v aplikaci CRA.
Chcete-li uložit klíče API, vytvořte nový soubor s názvem .env v kořenovém adresáři aplikace React.
Potom zadejte předponu názvu klíče API s REACT_APP takhle:
REACT_APP_API_KEY="your_api_key"
Nyní máte přístup ke klíči API v libovolném souboru v aplikaci React pomocí process.env.
konst API_KEY = process.env. REACT_APP_API_KEY
Ujistěte se, že jste do souboru .gitignore přidali .env, aby jej git nemohl sledovat.
Proč byste neměli ukládat tajné klíče v .env
Vše, co uložíte do souboru .env, je veřejně dostupné v produkčním sestavení. React jej vloží do souborů sestavení, což znamená, že jej kdokoli může najít kontrolou souborů vaší aplikace. Místo toho použijte back-end proxy, který volá API jménem vaší front-endové aplikace.
Ukládání proměnných prostředí v kódu backendu
Jak bylo uvedeno výše, musíte vytvořit samostatnou backendovou aplikaci pro ukládání tajných proměnných.
Například, Koncový bod API níže načítá data z tajné adresy URL.
konst apiURL = process.env. API_URL
app.get('/data', async (req, res) => {
konst odpověď = čekat načíst (apiURL)
konst data = response.json()
res.json({data})
})
Chcete-li načíst a použít data v rozhraní frontend, zavolejte tento koncový bod rozhraní API.
konst údaje = čekat načíst('http://backend-url/data')
Nyní, pokud neodešlete soubor .env na GitHub, URL API nebude viditelná v souborech sestavení.
Použití Next.js k ukládání proměnných prostředí
Další alternativou je použití Next.js. K privátním proměnným prostředí můžete přistupovat ve funkci getStaticProps().
Tato funkce běží během doby sestavení na serveru. Proměnné prostředí, ke kterým přistupujete v rámci této funkce, budou tedy dostupné pouze v prostředí Node.js.
Níže je uveden příklad.
vývozníasynchronnífunkcegetStaticProps() {
konst res = čekat načíst (process.env. API_URL)
konst data = res.json()
vrátit se {rekvizity: { data }}
}
Data budou dostupná na stránce prostřednictvím rekvizit a můžete k nim přistupovat následovně.
funkceDomov({ data }) {
vrátit se (
<div>
// vykreslení dat
</div>
);
}
Na rozdíl od Reactu nemusíte před název proměnné nic přidávat a můžete ji přidat do souboru .env takto:
API_URL=https://secret-url/de3ed3f
Next.js také umožňuje vytvářet koncové body API v stránky/api složku. Kód v těchto koncových bodech běží na serveru, takže můžete maskovat tajemství z frontendu.
Například výše uvedený příklad může být přepsán v pages/api/getData.js soubor jako trasa API.
vývoznívýchozíasynchronnífunkcepsovod(req, req) {
konst odpověď = čekat načíst (process.env. API_URL)
konst data = response.json()
vrátit se res.json({data})
}Nyní máte přístup k vráceným datům prostřednictvím /pages/api/getData.js koncový bod.
Uchování klíčů API v tajnosti
Posílat API na GitHub se nedoporučuje. Kdokoli může najít vaše klíče a použít je k vytváření požadavků API. Použitím nesledovaného souboru .env tomu zabráníte.
Nikdy byste však neměli ukládat citlivá tajemství do souboru .env v kódu frontendu, protože je může vidět kdokoli, když kontroluje váš kód. Místo toho načtěte data na straně serveru nebo použijte Next.js k maskování soukromých proměnných.
