Скрытие ключа API в React - PullRequest
Новая
       8

Скрытие ключа API в React

0 голосов
/ 05 октября 2018

Я хотел бы начать с того, что следовал всем предложенным здесь Как скрыть ключ API в create-реагировать-приложение? , но ни одно из них не сработало.Я искал более часа, пытаясь найти ответ, но ничего.Ниже приведено мое объяснение.

  1. Я использовал create-react-app для поддержки своего проекта
  2. Я использую Google Maps и еще не использовал другие API *
  3. Iсоздал файл .env в корне моего проекта
  4. В этот файл я добавил REACT_APP_GOOGLE_MAPS_API_KEY = api key
  5. В свой файл компонента Map.js Я добавил const GM_API_KEY = ${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}; (галочкав этой папке есть отметки вокруг этой переменной, но они не будут отображаться здесь)
  6. В своем URL для карты я добавил ключ примерно так: "https://maps.googleapis.com/maps/api/js?key=GM_API_KEY&callback=initMap"
  7. Кроме того, вверхумоего Map.js файла я добавил console.log(GM_API_KEY); , чтобы убедиться, что он работает.
  8. Я экспортировал свой компонент карты, а затем импортировал его в свой App.js
  9. Я перезапустил свой сервер

Когда страница загружается, мой ключ выводится на консоль, но я все равно получаю сообщение об ошибке от Google, в котором говорится, что мой ключ API недействителен.Кроме того, если я вручную console.log(GM_API_KEY) после загрузки страницы получу справочную ошибку, сообщающую, что GM_API_KEY is undefined

Если у кого-либо есть какие-либо предложения или они могут оказать какую-либо помощь, я был бы очень признателен!Спасибо, что нашли время, чтобы проверить мой вопрос.

Ответы [ 2 ]

0 голосов
/ 05 октября 2018

Попробуйте определить константу, которая содержит ключ api в хуке жизненного цикла, например componentWillMount (хотя этот метод теперь небезопасен), чтобы обеспечить доступность переменной при монтировании компонента:

componentWillMount() { const GM_API_KEY = ${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}; }

Тогда

https://maps.googleapis.com/maps/api/js?key=${GM_API_KEY}&callback=initMap

0 голосов
/ 05 октября 2018

То, что я делаю с конфиденциальными данными, даже не сохраняет их в .env Я открываю терминал внутри корня моего проекта и запускаю export API_KEY=sdf54vvetvf..., а затем внутри вашего приложения вы можете получить к нему доступ через process.env.API_KEY note вам нужно добавлять его вручную каждый раз, когда вы закрываете терминал из этого сеанса

...