Как скрыть ключ API в приложении create-react-app?

Ответ 1

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ

Если вы не создаете учебные приложения, не размещайте секреты, такие как ключ API, на стороне клиента (т.е. Приложение React).

Из документации React,

WARNING: Do not store any secrets (such as private API keys) in your React app!

Environment variables are embedded into the build, meaning anyone can view them by inspecting your app files.

Оригинальный ответ

Чтобы разработать комментарий Аруп Ракшит,

Во-первых, вы должны создать файл .env вне вашей папки src.

Затем добавьте

REACT_APP_WEATHER_API_KEY=123456

Перед фиксацией вы должны исключить этот файл .env, поэтому найдите файл .gitignore и добавьте .env.

Теперь вы можете идти.

Не забудьте добавить .env в файл .gitignore.

Добавлено:

1. Как использовать переменные env в вашем коде:

const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;

2. Переменная env не определена. Как мне это исправить?

Для того, чтобы прочитать переменные env, вы должны перезагрузить сервер.

Ответ 2

Как выяснилось, у create-реагировать-приложение есть некоторые встроенные функции, чтобы помочь вам в этом. Спасибо Джордж Караметас за это понимание. Чтобы получить доступ к этой функции, вам необходимо:

1. Создайте файл с именем .env в корневом каталоге вашего проекта.

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

2. .env файле .env добавьте REACT_APP_ к выбранному вами ключу API и назначьте его.

Инструмент create-react-app использует REACT_APP_ для определения этих переменных. Если вы не начнете с этого имени ключа API, create-react-app не увидит его.

// .env

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

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

3. Добавьте .env файл в .gitignore файл.

После добавления строки ниже сохраните файл .gitignore и выполните состояние git status чтобы убедиться, что ваш файл .env не отображается как новый файл в git.

// .gitignore

# api keys
.env       <-- add this line

# dependencies
/node_modules
...

4. Получите доступ к ключу API через объект process.env.

Чтобы убедиться, что вы можете получить доступ к своему ключу API, перейдите в файл App.js и добавьте console.log вверху под инструкциями require. После сохранения файла и перезагрузки страницы, если в журнале консоли не отображается ваш ключ API, попробуйте перезапустить сервер реагирования. Обязательно удалите строку журнала консоли перед фиксацией вашего кода.

// src/App.js

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

console.log(process.env.REACT_APP_WEATHER_API_KEY)

class App extends Component {
...

Ответ 3

из реактивной документации:

ВНИМАНИЕ: Не храните никакие секреты (такие как закрытые ключи API) в вашем приложении React!

Переменные среды встроены в сборку, что означает, что любой может просмотреть их, проверив файлы вашего приложения.

Ответ 4

Вот что у меня сработало:

Я создал .env в корневой папке. В этой папке я добавил свой ключ:

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

Тогда я пошел в .gitignore || или создайте .gitignore в вашем корневом каталоге, если у вас его нет. В .gitignore я добавил .env

 #api key
 .env

Затем я вернулся к корню моего файла приложения js. Для меня это был index.js для других это, вероятно, App.js Там я создал const API_KEY

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

Я проверил, работает ли это, регистрируя это консолью.

 console.log("API", API_KEY)

Я становился undefined. Я остановил сервер (Control + C) и перезапустил сервер. После этого я смог увидеть ключ.

Ответ 5

К сожалению, хранение любого ключа в вашем клиенте React, даже если вы используете gitignore и файл .env, небезопасно. Как указывает @ClaudiuCreanga, переменные среды React встроены в сборку и являются общедоступными.

Вы действительно должны сохранять только ключи API или секреты в своей бэкэнде, такие как Node/Express. Вы можете сделать так, чтобы ваш клиент отправил запрос в ваш внутренний API, который затем может выполнить фактический вызов API с помощью ключа API и отправить данные обратно вашему клиенту.

Ответ 6

Надеюсь, что не поздно, вот как я это сделал. в корневой папке, если вы используете реагируете и REACT_APP_ переменную окружения с REACT_APP_ так происходит следующим образом. REACT_APP_API_KEY=<keye here> нет. Среда React будет проверять .env проверки, если вы REACT_APP_ тогда вы сможете использовать его.

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

это даст вам ваши переменные.

если вы используете узел, то вам нужен пакет https://www.npmjs.com/package/dotenv

вот и все. наслаждаться :)

Ответ 7

Я перепробовал все, что все опубликовали, я до сих пор не определен. Я перезапустил сервер после изменения файла .env. console.log(process.env.REACT_APP_API_KEY); не определено. Мой код ниже. Я застрял, пожалуйста, помогите. Прежде чем я спрятал свой ключ /URL для моего API, вызов, который я сделал для моего контейнера, отобразил статью. Теперь контейнер пуст:

import React from "react";
import axios from "axios";
import Suggestions from "../Suggestions"

const API_URL = 'https://newsapi.org/v2/top-headlines?sources=google-news';

const API_KEY  = process.env;
console.log('getArticles');
console.log(API_KEY, API_URL);
console.log(process.env.REACT_APP_API_KEY);

class Home extends React.Component{

state = {
        articles : [],
        query: '',
    }




getArticles(){
    axios.get('${API_URL}?&apiKey=${API_KEY}')
    .then((data) => {
        this.setState({
            articles: data.data

        })
    })
 };


 handleInputChange = () => {
     this.setState ({
        query: this.home.value

     },
     () => {
         if (this.state.query && this.state.query.length >1) {
             if (this.state.query.length % 2 === 0) {
                 this.getArticles()
             }
         } else if (!this.state.query) {
         }
     })
 }

 render(){
    return (
        <>
        <form>
            <input
            placeholder= "Search for some shit"
            ref={input => this.search = input}
            onChange={this.handleInputChange} 
            />

            <Suggestions results={this.state.articles} />
        </form>
        <div className="ui raised very padded text container segment">

        <ul>

            { this.state.articles.slice(0,1).map((article, index) => {
                return (<li key={index}>
                <h2>Title<br></br>{ article.title }</h2>
                <div> Author: { article.author }</div>
                <br></br>
                <p>{ article.content }</p>
                <a href={article.url}>{ article.url }</a>
               </li> )
            })}
        </ul>
    </div>
   </>
    );
  }}


export default Home;

Ответ 8

Просто небольшое дополнение, если кто-то еще становится неопределенным после всех методов, указанных выше. Я поместил .env не в папку client (create-Reaction-app), а в корневой сервер. Это привело к ошибке. Конечно, когда вы помещаете туда конфиденциальные данные, существуют определенные последствия для безопасности.

Ответ 9

Вы можете создать отдельный файл со всеми учетными данными и объявить свои ключи там. И добавьте этот файл в .gitignore

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

Ответ 10

Создайте файл config_keys.js с ключами в нем. Экспортировать их по умолчанию

const API_K = "123456788345345235"
export default API_K

Затем импортируйте их в файл app.js или target.js

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

а затем добавьте config_keys.js в .gitignore