Wie kann ich die ausblenden-API-key erstellen-reagieren-app?

Machte ich eine Wetter-app erstellen-reagieren-app. Wie Verstecke ich den API-key, so dass ich Begehen kann, auf GitHub?

Gerade jetzt der Schlüssel ist in App.js:
const API_KEY = "123456";

verwenden ENV vars. Oder halten Sie es im geheimen.yml-Datei. Und dann die Datei an .gitignore. Und dann mit JS Lesen yml, laden Sie es auf ENV.
siehe github.com/motdotla/dotenv
Mögliche Duplikate von Verwendung von API-keys in einen reagieren app
Du kannst dich nicht verstecken Geheimnisse in einer app reagieren. Siehe stackoverflow.com/a/46839021/4722345

InformationsquelleAutor J. Kim | 2018-02-09

  1. 24

    Erarbeiten Arup Rakshit Kommentar,

    Zuerst sollten Sie das machen .env-Datei außerhalb Ihres src-Ordner.

    Fügen Sie dann 

    REACT_APP_WEATHER_API_KEY=123456

    Bevor Sie zu Begehen, sollten Sie ausschließen .env-Datei so zu finden .gitignore-Datei und hinzufügen .env.

    Nun bist du frei zu gehen.

    Don nicht vergessen, hinzuzufügen .env .gitignore-Datei.

    Hinzugefügt:

    1. Wie zu verwenden env-Variablen im code:

    const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;

    1. env-variable ist nicht definiert. Wie kann ich es beheben?

    In der Reihenfolge zu Lesen, env-Variablen, sollten Sie Ihren server neu starten.

    Wie Importiere ich die .env-Datei in meine App.js Datei?
    Sollten Sie die Anwendung neu starten, aktualisieren Sie Ihr Geheimnis.
    Wie wird diese Antwort akzeptiert? facebook.github.io/erstellen-reagieren-app/docs/...: WARNUNG: lagern Sie keine Geheimnisse (wie private-API-Schlüssel) Reagieren-app! Umwelt-Variablen, die eingebettet sind in die zu bauen, so kann jeder anzeigen, indem Sie Einsicht in Ihre app Dateien.
    Was also ist die Lösung dann? Sollten wir fügen Sie ein node-js-server zwischen api-keys und browser-Anfrage? Auf diese Weise, unsere node-server ist das einzige, das hält die api-keys und macht third-party-Anfragen im Namen des Benutzers mithilfe von geheimen api-Schlüssel, gespeichert in node-js-server.
    ja, so etwas wie einen express-server, der Anfragen. das ist der einzige Weg.

    InformationsquelleAutor 이준형

  2. 36

    Als es stellt sich heraus, erstellen-reagieren-app hat einige eingebaute Funktionen, die Ihnen helfen mit, dass. Danke George Karametas für diese Einsicht. Zugriff auf die Funktionalität, die Sie benötigen, um:

    1. Erstellen Sie eine Datei namens .env im root Ihres Projekt-Verzeichnis.

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

    2. Innerhalb der .env Datei prepend REACT_APP_ zu Ihrem API-key-Namen Ihrer Wahl zuweisen.

    Den create-react-app tool verwendet REACT_APP_ zu identifizieren, die diese Variablen. Wenn Sie nicht starten Sie Ihren API-Schlüssel, name, create-react-app es nicht sehen.

    //.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 auf Ihrem .gitignore Datei.

    Nachdem Sie die Zeile hinzufügen unter, speichern Sie die .gitignore - Datei und machen Sie einen git status um sicherzustellen, dass Ihr .env Datei nicht angezeigt als neue Datei im git.

    //.gitignore

# api keys
.env       <-- add this line

# dependencies
/node_modules
...

    4. Zugriff auf die API-Schlüssel über die process.env Objekt.

    Zu überprüfen, können Sie den Zugriff auf Ihre API-Schlüssel, gehen Sie zu Ihrem App.js - Datei und fügen Sie eine console.log an der Spitze unterhalb der require Aussagen. Nachdem Sie die Datei speichern und die Seite neu zu laden, wenn die Konsole nicht zeigen Sie Ihren API-key, versuchen Sie einen Neustart der server reagieren. Entfernen Sie die Konsole, log-line, bevor Sie Ihre code.

    //src/App.js

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

console.log(process.env.REACT_APP_WEATHER_API_KEY)

class App extends Component {
...
    Ich bin immer ein undefined. Müssen wir importieren durch die App.js Datei oder müssen wir exportieren .env?
    Stellen Sie sicher, dass Sie wickeln Sie Ihre apiKey in einer Vorlage wörtlich, denn es muss ein string sein. Hier ist ein Beispiel, wie ich mein setup: pastebin.com/WQ0CzqQy, Dann stellen Sie sicher, dass Sie Ihren server neu starten.
    Vielleicht auch im Missverständnis immer noch... können Sie einen Blick auf diese codepen wenn Sie eine chance bekommen, nicht in der Ausgabe, nur das html-so ist es einfacher. codepen.io/Born2Code1983/pen/xjvwPj
    funktioniert das auch in Next.js?
    Wäre dies nicht ausgesetzt, wenn der client öffnet die devtools?

    InformationsquelleAutor richardsonae

  3. 7

    vom reagieren Dokumentation:

    WARNUNG: lagern Sie keine Geheimnisse (wie private-API-Schlüssel) Reagieren-app!

    Umgebungsvariablen eingebettet in die zu bauen, so kann jeder
    anzeigen, indem Sie Einsicht in Ihre app Dateien.

    InformationsquelleAutor Tom Foxtrot

  4. 6

    Hier ist was für mich gearbeitet:

    Habe ich die .env im root-Ordner.
    In diesem Ordner habe ich meine Schlüssel: 

     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 root-Verzeichnis, wenn Sie es nicht haben. Innerhalb .gitignore Hinzugefügt habe .env 

     #api key
 .env

    Dann ging ich zurück zu den Wurzel meiner app js-Datei. Für mich war index.js für andere ist es wahrscheinlich App.js
    Dort erstellte ich eine const API_KEY

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

    Ich habe überprüft, ob es funktioniert hat, indem Konsole anmelden.

     console.log("API", API_KEY)

    War ich immer undefined.
    Ich stoppte den server (Control + C) und neu gestartet und der server.
    Danach konnte ich den key sehen.

    .env-Datei speichern, wird nicht dazu führen, das react-Projekt neu geladen werden, wie z.B. speichern ein .js-Datei. Wenn änderungen vorgenommen werden .env-Datei, müssen Sie CMD+C die bpm-oder Garn-star, starten Sie ihn anschließend neu.

    InformationsquelleAutor Roger Perez

  5. 0

    Hoffe es ist nicht zu spät, also hier ist, wie ich es Tat. auf root-Ordner, wenn Sie reagieren, stellen Sie die Umgebungsvariable REACT_APP_ so geht so. REACT_APP_API_KEY=<keye here> Sie nicht. Reagieren, die Umgebung, der Blick auf das .env prüft, ob Sie voranstellen REACT_APP_ dann können Sie es verwenden. 

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

    dass Sie erhalten, sind Sie Variablen.

    wenn Sie mithilfe von Knoten -, dann müssen Sie ein Paket https://www.npmjs.com/package/dotenv

    thats it. genießen Sie 🙂

    InformationsquelleAutor artoo

  6. -1

    Können Sie erstellen Sie eine separate Datei mit allen Zugangsdaten und deklarieren Ihre keys dort. Und fügen Sie diese Datei zu .gitignore

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

    InformationsquelleAutor tetta

  7. -1

    Erstellen config_keys.js die Datei mit den Schlüsseln. Exportieren Sie diese als Standard -

    const API_K = "123456788345345235"
export default API_K

    Dann importieren Sie Sie in Ihre app.js oder das Ziel .js-Datei

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

    und dann hinzufügen config_keys.js .gitignore

    InformationsquelleAutor Vishnu Anilkumar

Schreibe einen Kommentar