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

Moderne Webanwendungen verlassen sich auf externe APIs für zusätzliche Funktionalität. 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.

MAKEUSEOF VIDEO DES TAGES

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 erstellen Erstellen-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.

const API_KEY = process.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.

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

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

Windows konnte den Proxy dieses Netzwerks nicht erkennen

const data = await fetch('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.

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

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

function Home({ data }) { 
  return ( 
    <div> 
      // render data 
    </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.

4B479C8FF1390AFADECE0CFFD337D1B5229075

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 untersucht. Rufen Sie die Daten stattdessen auf der Serverseite ab oder verwenden Sie Next.js, um private Variablen zu maskieren.

Wie öffne ich eine DAT-Datei?