Jak ukládat a přistupovat ke klíčům API v aplikaci React

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.