web-dev-qa-db-fra.com

Comment masquer la clé de l'API dans create-react-app?

J'ai créé une application météo dans create-react-app. Comment masquer la clé API afin de pouvoir m'engager dans GitHub? 

Actuellement, la clé est dans App.js: Const API_KEY = "123456";

reactjsapigithubcreate-react-appapi-key
11
J. Kim

Pour élaborer le commentaire d'Arup Rakshit,

Tout d’abord, vous devez créer un fichier .env en dehors de votre dossier src.

Puis ajouter 

REACT_APP_WEATHER_API_KEY=123456

Avant la validation, vous devez exclure ce fichier .env. Recherchez le fichier .gitignore et ajoutez-le.

Maintenant, vous êtes libre de partir.

N'oubliez pas d'ajouter .env dans le fichier .gitignore.

Ajoutée:

  1. Comment utiliser les variables env dans votre code:

const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;

  1. la variable env n'est pas définie. Comment je le répare?

Afin de lire les variables env, vous devez redémarrer votre serveur.

19
이준형

Il se trouve que create-react-app dispose de fonctionnalités intégrées pour vous aider. Merci George Karametas pour cette idée. Pour accéder à cette fonctionnalité, vous devez:

1. Créez un fichier appelé .env à la racine du répertoire de votre projet.

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

2. Dans le fichier .env, ajoutez REACT_APP_ au nom de la clé d'API de votre choix et attribuez-la.

L'outil create-react-app utilise REACT_APP_ pour identifier ces variables. Si vous ne commencez pas votre nom de clé d'API avec, create-react-app ne le verra pas.

// .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. Ajoutez le fichier .env à votre fichier .gitignore.

Après avoir ajouté la ligne ci-dessous, sauvegardez le fichier .gitignore et faites un git status pour vous assurer que votre fichier .env n'apparaît pas comme un nouveau fichier dans git.

// .gitignore

# api keys
.env       <-- add this line

# dependencies
/node_modules
...

4. Accédez à la clé API via l'objet process.env.

Pour vérifier que vous pouvez accéder à votre clé d'API, accédez à votre fichier App.js et ajoutez un console.log en haut sous les instructions require. Après avoir enregistré le fichier et rechargé la page, si le journal de la console n'affiche pas votre clé d'API, essayez de redémarrer le serveur de réaction. Assurez-vous de supprimer la ligne de journal de la console avant de valider votre 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 {
...
33
richardsonae

Voici ce qui a fonctionné pour moi:

J'ai créé le .env dans le dossier racine . Dans ce dossier, j'ai ajouté ma clé: 

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

Puis je suis allé à .gitignore || ou créez un .gitignore dans votre répertoire racine si vous ne le possédez pas. Dans .gitignore j'ai ajouté .env 

 #api key
 .env

Ensuite, je suis retourné à la racine de mon fichier js d'application. Pour moi, c’était index.js pour d’autres, c’est probablement App.js Là, j’ai créé un API_KEY constant.

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

J'ai vérifié si cela fonctionnait en consultant la console.

 console.log("API", API_KEY)

Je devenais undefined. J'ai arrêté le serveur (Control + C) et redémarré le serveur . Après, j'ai pu voir la clé. 

7
Roger Perez

J'espère que ce n'est pas tard alors voici comment je l'ai fait. sur le dossier racine, si vous utilisez reapend votre variable d’environnement avec REACT_APP_, il en va de même. REACT_APP_API_KEY=<keye here> vous ne le faites pas. L’environnement React examinera les contrôles .env si vous ajoutez le code REACT_APP_ avant que vous puissiez l’utiliser. 

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

ça va vous rendre vous des variables.

si vous utilisez node, vous avez besoin d'un paquet https://www.npmjs.com/package/dotenv

c'est tout. prendre plaisir :)

0
artoo

Créez un fichier config_keys.js contenant les clés. Exportez-les par défaut

const API_K = "123456788345345235"
export default API_K

Puis importez-les dans votre fichier app.js ou target .js

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

puis ajoutez config_keys.js à .gitignore

0
Vishnu Anilkumar

Vous pouvez créer un fichier séparé avec toutes les informations d'identification et y déclarer vos clés. Et ajoutez ce fichier à .gitignore

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