Как заставить мое развернутое приложение React.js использовать секретные ключи API?Я использую Heroku Confing Vars, но все еще не работает - PullRequest
Новая
       29

Как заставить мое развернутое приложение React.js использовать секретные ключи API?Я использую Heroku Confing Vars, но все еще не работает

0 голосов
/ 13 февраля 2019

Проблема:

Я создал простое приложение React (с использованием Javascript и Node), которое использует GitHub API для поиска пользователей и получения информации о них.Мне нужно использовать ключ oauth GitHub, чтобы я мог делать аутентифицированные запросы API.Однако у меня возникают проблемы с тем, чтобы дать моему развернутому приложению (используя Heroku) ключ без жесткого кодирования его в вызове API.Я довольно новичок в этом, поэтому любая помощь будет отличной!Я связал репозиторий GitHub в нижней части этого поста.

Я пробовал несколько вещей, которые я объясню ниже:

Попытка 1:

  1. Я создал файл, в котором я установил свой GitHubключ к переменной и экспортировал ее ( Изображение кода )
  2. Я поместил указанный файл в .gitignore

  3. Я импортировал переменную в файлы, где ясделал вызовы API и использовал их непосредственно в вызове API.( Изображение вызова API )

  4. Это работало в моей среде разработки, но (очевидно) не работало в моем развернутом приложении Heroku, потому что он не знал, что переменнаябыло.( Изображение ошибки )

Попытка 2:

  1. Я настроил переменные в Heroku иустановите GITHUB_KEY на мой ключ.( Изображение настройки переменной Heroku ).

  2. Затем я проверил, что Heroku распознал эту переменную, выполнив команду heroku config:get GITHUB_KEY и получил правильный ключ в ответ ( Изображение терминала )

  3. В моем файле секретов я установил переменную следующим образом: process.env.GITHUB_KEY = 'a93b2c21918b42df5a28e0e529c627ee22c60de4'; ( Изображение установки переменной с использованием process.env )

  4. А затем я использую его в своих вызовах API на веб-интерфейсе: const res = await fetch( 'https://api.github.com/users/${this.state.input}?access_token=${process.env.GITHUB_KEY}' );.Однако я получаю следующую ошибку: SearchBar.js:32 GET https://api.github.com/users/livmarx?access_token=undefined 401 (Unauthorized).( Изображение ошибки ).

Итак, я знаю, что я неправильно понимаю, как работает process.env, но не могу понять это!Любое разъяснение было бы очень полезно.

Вот ссылка на мой репозиторий github: https://github.com/livmarx/zilliow-challenge

...