Канонический способ использования стороннего API-ключа заключается в том, что ваше клиентское приложение отправляет запрос в бэкэнд-API. Ваш внутренний API затем форматирует запрос в соответствии со сторонним API, добавляет ключ и выполняет вызов к стороннему API. Получив ответ, он может либо распаковать его и преобразовать в доменные объекты, которые ваше интерфейсное приложение сможет понять, либо отправить необработанный ответ обратно во внешнее приложение. Таким образом, ключ API остается на сервере и никогда не отправляется на клиентскую сторону.
я есть приложение React, которое использует два сторонних сервиса. Приложение было запущено с использованиемreact-create-app.
Для обеих этих служб требуется ключ API.
Один ключ предоставляется через тег script, например:
<script type="text/javascript" src="https://myapi?key=MY_KEY">
</script>
Другой ключ API используется в запросе. Я храню фактический ключ в константе и использую его для формирования запроса. Нравится:
const MY_OTHER_KEY = 'MY_OTHER_KEY'
let url = `http://myotherapi?key=${MY_OTHER_KEY}&q=${query}`
Google-хлучшие практические советы Об обработке ключей API говорит:
Не вставляйте ключи API непосредственно в код
Это подводит меня к моему первому вопросу:
1. Как использовать переменные вindex.html?
В моемindex.html файл, у меня есть два тега, которые выглядят так:
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
Очевидно, что%PUBLIC_URL%переменная Как я могу добавить переменную%MY_KEY% как избежать встраивания ключа API прямо в мой код?
Чтобы получить что-то вроде этого:
<script type="text/javascript" src="https://myapi?key=%MY_KEY%">
</script>
В связи с этим вопрос, безопасно ли хранить ключ API в константе, как я делаю дляMY_OTHER_KEY?
Google также говорит:
Не храните ключи API в файлах внутри дерева исходного кода вашего приложения
Это подводит меня ко второму вопросу:
2. Разве ключ API по-прежнему не входит в комплект?
Скажи, что я делаю то, что говорит Google, и я
... хранить их в переменных окружения или в файлах вне дерева исходных текстов вашего приложения
Скажем, я храню ключ во внешнем файле. Этот файл, я предполагаю, будет прочитан в какой-то момент, и его содержимое будет либо скопировано в комплекте, либо на него будут ссылаться другим способом. В конце концов, ключ все еще не будет виден в связке, разве что его будет труднее найти? Как это поможет точно?
3. Есть ли канонический способ использования ключей API в приложении реагирования? Или дело за индивидуальным разработчиком?
Самоочевидно, я ищу способ решения этой проблемы, если таковой имеется.
Спасибо за помощь!