it-swarm.com.de

Wie kann ich den API-Schlüssel in der create -react-app ausblenden?

Ich habe eine Wetter-App in Create-React-App erstellt. Wie kann ich den API-Schlüssel ausblenden, damit ich ihn an GitHub übergeben kann? 

Im Moment befindet sich der Schlüssel in App.js: Const API_KEY = "123456";

11
J. Kim

Um den Kommentar von Arup Rakshit zu erarbeiten,

Zunächst sollten Sie die .env-Datei außerhalb Ihres src-Ordners erstellen.

Dann füge hinzu 

REACT_APP_WEATHER_API_KEY=123456

Vor dem Festschreiben sollten Sie diese .env-Datei ausschließen. Suchen Sie die .gitignore-Datei und fügen Sie .env hinzu.

Jetzt können Sie loslegen.

Vergessen Sie nicht, .env in der .gitignore-Datei hinzuzufügen.


Hinzugefügt:

  1. So verwenden Sie Env-Variablen in Ihrem Code:

const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;

  1. die env-Variable ist nicht definiert. Wie kann ich das beheben?

Um Env-Variablen zu lesen, sollten Sie Ihren Server neu starten.

19
이준형

Wie sich herausstellt, hat create -react-app einige integrierte Funktionen, die Ihnen dabei helfen. Vielen Dank George Karametas für diese Einsicht. Um auf diese Funktionalität zuzugreifen, müssen Sie:

1. Erstellen Sie im Stammverzeichnis des Projektverzeichnisses eine Datei mit dem Namen .env.

- your_project_folder
  - node_modules
  - public
  - src
  - .env         <-- create it here
  - .gitignore
  - package-lock.json
  - package.json

2. Fügen Sie in der Datei .env den Namen Ihres API-Schlüssels mit REACT_APP_ vor und weisen Sie ihn zu.

Das create-react-app-Tool verwendet REACT_APP_, um diese Variablen zu identifizieren. Wenn Sie Ihren API-Schlüsselnamen nicht damit beginnen, wird create-react-app nicht angezeigt.

// .env

REACT_APP_API_KEY=your_api_key  <-- yes
API_KEY=your_api_key            <-- no

// Example (from 이준형's response):
REACT_APP_WEATHER_API_KEY=123456

3. Fügen Sie die .env-Datei Ihrer .gitignore-Datei hinzu.

Nachdem Sie die folgende Zeile hinzugefügt haben, speichern Sie die .gitignore-Datei und führen Sie einen git status aus, um sicherzustellen, dass Ihre .env-Datei nicht als neue Datei in git angezeigt wird.

// .gitignore

# api keys
.env       <-- add this line

# dependencies
/node_modules
...

4. Greifen Sie über das process.env-Objekt auf den API-Schlüssel zu.

Um zu überprüfen, ob Sie auf Ihren API-Schlüssel zugreifen können, gehen Sie zu Ihrer App.js-Datei und fügen Sie oben unter den require-Anweisungen einen console.log ein. Wenn Sie nach dem Speichern der Datei und dem erneuten Laden der Seite den API-Schlüssel im Konsolenprotokoll nicht anzeigen, versuchen Sie, den reaktionsserver erneut zu starten. Stellen Sie sicher, dass Sie die Protokollzeile der Konsole entfernen, bevor Sie den Code übergeben.

// src/App.js

import React, { Component } from 'react';
import './App.css';

console.log(process.env.REACT_APP_WEATHER_API_KEY)

class App extends Component {
...
33
richardsonae

aus dem reagieren Dokumentation :

WARNUNG: Speichern Sie keine Geheimnisse (wie private API-Schlüssel) in Ihrer App React!

Umgebungsvariablen sind in den Build eingebettet, dh jeder kann sie anzeigen, indem er die Dateien Ihrer App überprüft.

18
Tom Foxtrot

Folgendes hat für mich funktioniert:

Ich habe den .env im Stammordner erstellt . In diesem Ordner habe ich meinen Schlüssel hinzugefügt: 

 REACT_APP_API_KEY_YT = "key"
//I added YT for youtube which is where my api key is from

Dann ging ich zu .gitignore || oder erstellen Sie ein .gitignore in Ihrem Stammverzeichnis, wenn Sie es nicht haben. In .gitignore habe ich .env hinzugefügt 

 #api key
 .env

Dann ging ich zurück zum Stamm meiner JS-Datei. Für mich war das index.js für andere wahrscheinlich App.js Dort habe ich eine const API_KEY erstellt

 const API_KEY =`${process.env.REACT_APP_API_KEY_YT}`

Ich habe durch Konsolenprotokollierung überprüft, ob es funktioniert.

 console.log("API", API_KEY)

Ich bekam undefined. Ich habe den Server gestoppt (Control + C) und den Server neu gestartet . Danach konnte ich den Schlüssel sehen. 

7
Roger Perez

Leider ist es nicht sicher, einen Schlüssel in Ihrem React -Client zu behalten, selbst wenn Sie gitignore und eine .env - Datei verwenden. Wie von @ClaudiuCreanga hervorgehoben, sind React Umgebungsvariablen in den Build eingebettet und öffentlich zugänglich.

Sie sollten wirklich nur API-Schlüssel oder Geheimnisse in Ihrem Backend wie Node/Express speichern. Sie können von Ihrem Client eine Anfrage an Ihre Backend-API senden lassen, die dann den eigentlichen API-Aufruf mit dem API-Schlüssel durchführt und die Daten an Ihren Client zurücksendet.

1
Antonia Blair

Ich hoffe, es ist nicht spät, also habe ich es so gemacht. Wenn Sie im Hauptordner reagieren, setzen Sie Ihre Umgebungsvariable mit REACT_APP_ voran. REACT_APP_API_KEY=<keye here> nicht. Die React-Umgebung prüft die .env-Prüfungen, wenn Sie REACT_APP_ voranstellen, dann können Sie es verwenden. 

import React from 'React';
console.log(`${process.env.REACT_APP_API_KEY}`);

das wird Sie zu Variablen machen.

wenn Sie Knoten verwenden, benötigen Sie ein Paket https://www.npmjs.com/package/dotenv

das ist es. genießen :)

0
artoo

Erstellen Sie eine config_keys.js-Datei mit Schlüsseln. Exportiere sie als Standard

const API_K = "123456788345345235"
export default API_K

Dann importieren Sie sie in Ihre app.js- oder target-.js-Datei

IMPORT API_K from './config_keys/js'
const API_KEY = API_K

und fügen Sie anschließend config_keys.js zu .gitignore hinzu

0

Sie können eine separate Datei mit allen Anmeldeinformationen erstellen und Ihre Schlüssel dort deklarieren. Und füge diese Datei zu .gitignore hinzu

//credentials.js
export const API_KEY = '12345'
0
tetta

Nur eine kleine Ergänzung, wenn jemand anders nach all den oben genannten Methoden undefiniert wird. Ich hatte die .env-Datei nicht unter dem Clientordner (create-react-app), sondern unter dem Stammserver abgelegt. Das hat den Fehler verursacht. Natürlich gibt es bestimmte Sicherheitsrisiken, wenn Sie vertrauliche Daten dort ablegen.

0
CyberMessiah