So speichern und greifen Sie auf API-Schlüssel in einer React-Anwendung zu

Moderne Webanwendungen verlassen sich für zusätzliche Funktionalität auf externe APIs. Einige APIs verwenden Kennungen wie Schlüssel und Geheimnisse, um Anforderungen einer bestimmten Anwendung zuzuordnen. Diese Schlüssel sind sensibel und Sie sollten sie nicht an GitHub übertragen, da sie von jemandem verwendet werden könnten, um über Ihr Konto eine Anfrage an die API zu senden.

In diesem Tutorial erfahren Sie, wie Sie API-Schlüssel in einer React-Anwendung sicher speichern und darauf zugreifen.

Hinzufügen von Umgebungsvariablen in einer CRA-App

EIN Reagieren Sie Anwendung, die Sie mit erstellenErstellen-Reagieren-App unterstützt Umgebungsvariablen out of the box. Es liest Variablen, die mit REACT_APP beginnen, und stellt sie über process.env zur Verfügung. Dies ist möglich, weil das dotenv npm-Paket in einer CRA-App installiert und konfiguriert ist.

Erstellen Sie zum Speichern der API-Schlüssel eine neue Datei namens .env im Stammverzeichnis der React-Anwendung.

Stellen Sie dann dem API-Schlüsselnamen das Präfix voran REACT_APP so was:

REACT_APP_API_KEY="your_api_key"

Sie können jetzt mit process.env auf den API-Schlüssel in jeder Datei in der React-App zugreifen.

konst API_KEY = Prozess.env. REACT_APP_API_KEY

Stellen Sie sicher, dass Sie .env zur .gitignore-Datei hinzufügen, um zu verhindern, dass git sie verfolgt.

Warum Sie geheime Schlüssel nicht in .env speichern sollten

Alles, was Sie in einer .env-Datei speichern, ist im Produktions-Build öffentlich verfügbar. React bettet es in die Build-Dateien ein, was bedeutet, dass jeder es finden kann, indem er die Dateien Ihrer App überprüft. Verwenden Sie stattdessen einen Back-End-Proxy, der die API im Namen Ihrer Front-End-Anwendung aufruft.

Speichern von Umgebungsvariablen im Backend-Code

Wie oben erwähnt, müssen Sie eine separate Backend-Anwendung erstellen, um geheime Variablen zu speichern.

Zum Beispiel die API-Endpunkt unten ruft Daten ab von einer geheimen URL.

konst apiURL = process.env. API_URL
app.get('/data', asynchron (req, res) => {
konst Antwort = erwarten holen (apiURL)
konst Daten = Antwort.json()
	res.json({Daten})
})

Rufen Sie diesen API-Endpunkt auf, um die Daten im Front-End abzurufen und zu verwenden.

konst Daten = erwarten holen('http://backend-url/data')

Wenn Sie die .env-Datei jetzt nicht an GitHub übertragen, ist die API-URL in Ihren Build-Dateien nicht sichtbar.

Verwenden von Next.js zum Speichern von Umgebungsvariablen

Eine weitere Alternative ist die Verwendung von Next.js. Sie können auf private Umgebungsvariablen in der Funktion getStaticProps() zugreifen.

Diese Funktion wird während der Erstellungszeit auf dem Server ausgeführt. Die Umgebungsvariablen, auf die Sie in dieser Funktion zugreifen, sind also nur in der Node.js-Umgebung verfügbar.

Unten ist ein Beispiel.

ExportasynchronFunktiongetStaticProps() {
konst res = erwarten fetch (prozess.env. API_URL)
konst data = res.json()
Rückkehr {Requisiten: { Daten }}
}

Die Daten werden auf der Seite über Requisiten verfügbar sein, und Sie können wie folgt darauf zugreifen.

FunktionHeim({ Daten }) {
Rückkehr (
<div>
// Daten rendern
</div>
 );
}

Anders als in React müssen Sie dem Variablennamen nichts voranstellen und können ihn wie folgt zur .env-Datei hinzufügen:

API_URL=https://secret-url/de3ed3f

Mit Next.js können Sie auch API-Endpunkte in der erstellen Seiten/API Mappe. Code in diesen Endpunkten wird auf dem Server ausgeführt, sodass Sie Geheimnisse vor dem Front-End maskieren können.

Beispielsweise kann das obige Beispiel in umgeschrieben werden Seiten/api/getData.js Datei als API-Route.

ExportUrsprünglichasynchronFunktionHandler(erforderlich, res) {
konst Antwort = erwarten fetch (prozess.env. API_URL)
konst Daten = Antwort.json()
Rückkehr res.json({Daten})
}

Sie können jetzt über die auf die zurückgegebenen Daten zugreifen /pages/api/getData.js Endpunkt.

API-Schlüssel geheim halten

Das Pushen von APIs an GitHub ist nicht ratsam. Jeder kann Ihre Schlüssel finden und sie verwenden, um API-Anfragen zu stellen. Indem Sie eine nicht nachverfolgte .env-Datei verwenden, verhindern Sie dies.

Sie sollten jedoch niemals vertrauliche Geheimnisse in einer .env-Datei in Ihrem Frontend-Code speichern, da jeder sie sehen kann, wenn er Ihren Code überprüft. Rufen Sie die Daten stattdessen auf der Serverseite ab oder verwenden Sie Next.js, um private Variablen zu maskieren.