Blog

Aug 20, 2023

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

Mit APIs können Sie viel machen, aber stellen Sie sicher, dass Sie Ihre Schlüssel und Passwörter sicher aufbewahren

Mit APIs können Sie viel machen, aber stellen Sie sicher, dass Sie Ihre Schlüssel und Passwörter sicher aufbewahren.

Moderne Webanwendungen sind für zusätzliche Funktionalität auf externe APIs angewiesen. Einige APIs verwenden Bezeichner wie Schlüssel und Geheimnisse, um Anfragen einer bestimmten Anwendung zuzuordnen. Diese Schlüssel sind vertraulich und Sie sollten sie nicht an GitHub weiterleiten, da sie von anderen Personen 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.

Eine React-Anwendung, die Sie mit erstellenCreate-React-App unterstützt standardmäßig Umgebungsvariablen. 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.

Um die API-Schlüssel zu speichern, erstellen Sie eine neue Datei namens .env im Stammverzeichnis der React-Anwendung.

Stellen Sie dann dem API-Schlüsselnamen das Präfix voranREACT_APPso was:

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

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

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 Backend-Proxy, der die API im Namen Ihrer Frontend-Anwendung aufruft.

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

Der folgende API-Endpunkt ruft beispielsweise Daten von einer geheimen URL ab.

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

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

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

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

Unten finden Sie ein Beispiel.

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

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

Mit Next.js können Sie auch API-Endpunkte erstellenSeiten/API Ordner. Der Code in diesen Endpunkten wird auf dem Server ausgeführt, sodass Sie Geheimnisse vor dem Front-End verbergen können.

Beispielsweise kann das obige Beispiel in umgeschrieben werdenpage/api/getData.jsDatei als API-Route.

Sie können nun über das auf die zurückgegebenen Daten zugreifen/pages/api/getData.jsEndpunkt.

Es ist nicht ratsam, APIs an GitHub zu senden. Jeder kann Ihre Schlüssel finden und sie verwenden, um API-Anfragen zu stellen. Durch die Verwendung einer nicht verfolgten .env-Datei verhindern Sie, dass dies geschieht.

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

Mary ist Mitarbeiterin bei MUO mit Sitz in Nairobi. Sie hat einen B.Sc. in Angewandter Physik und Informatik, arbeitet aber lieber im technischen Bereich. Seit 2020 programmiert und schreibt sie technische Artikel.