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.
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
Eine React-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.
Der folgende API-Endpunkt ruft beispielsweise Daten von einer geheimen URL ab.
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.
const data = await fetch('http:
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>
</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:
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.
export default async function handler(req, res) {
const response = await fetch(process.env.API_URL)
const data = response.json()
return res.json({data})
}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.
