Я сделал приложение для погоды в приложении create-react-app. Как скрыть ключ API, чтобы я мог передать GitHub?
В настоящий момент ключ находится в App.js: const API_KEY = "123456";
Я сделал приложение для погоды в приложении create-react-app. Как скрыть ключ API, чтобы я мог передать GitHub?
В настоящий момент ключ находится в App.js: const API_KEY = "123456";
ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ
Если вы не создаете учебные приложения, не размещайте секреты, такие как ключ 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.
Добавлено:
const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;
Для того, чтобы прочитать переменные env, вы должны перезагрузить сервер.
Как выяснилось, у create-реагировать-приложение есть некоторые встроенные функции, чтобы помочь вам в этом. Спасибо Джордж Караметас за это понимание. Чтобы получить доступ к этой функции, вам необходимо:
.env
в корневом каталоге вашего проекта.- your_project_folder
- node_modules
- public
- src
- .env <-- create it here
- .gitignore
- package-lock.json
- package.json
.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
.env
файл в .gitignore
файл. После добавления строки ниже сохраните файл .gitignore
и выполните состояние git status
чтобы убедиться, что ваш файл .env
не отображается как новый файл в git.
// .gitignore
# api keys
.env <-- add this line
# dependencies
/node_modules
...
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 {
...
из реактивной документации:
ВНИМАНИЕ: Не храните никакие секреты (такие как закрытые ключи API) в вашем приложении React!
Переменные среды встроены в сборку, что означает, что любой может просмотреть их, проверив файлы вашего приложения.
Вот что у меня сработало:
Я создал .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
) и перезапустил сервер. После этого я смог увидеть ключ.
К сожалению, хранение любого ключа в вашем клиенте React, даже если вы используете gitignore и файл .env
, небезопасно. Как указывает @ClaudiuCreanga, переменные среды React встроены в сборку и являются общедоступными.
Вы действительно должны сохранять только ключи API или секреты в своей бэкэнде, такие как Node/Express. Вы можете сделать так, чтобы ваш клиент отправил запрос в ваш внутренний API, который затем может выполнить фактический вызов API с помощью ключа API и отправить данные обратно вашему клиенту.
Надеюсь, что не поздно, вот как я это сделал. в корневой папке, если вы используете реагируете и 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
вот и все. наслаждаться :)
Я перепробовал все, что все опубликовали, я до сих пор не определен. Я перезапустил сервер после изменения файла .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;
Просто небольшое дополнение, если кто-то еще становится неопределенным после всех методов, указанных выше. Я поместил .env не в папку client (create-Reaction-app), а в корневой сервер. Это привело к ошибке. Конечно, когда вы помещаете туда конфиденциальные данные, существуют определенные последствия для безопасности.
Вы можете создать отдельный файл со всеми учетными данными и объявить свои ключи там. И добавьте этот файл в .gitignore
//credentials.js
export const API_KEY = '12345'
Создайте файл 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