Переменные .env в скрипте Dynami c - PullRequest
Новая
       24

Переменные .env в скрипте Dynami c

0 голосов
/ 17 января 2020

Итак, я сделал очень простое приложение погоды, используя API Google Maps, и я хотел бы набрать sh его до git, а затем развернуть его. Я сталкиваюсь с проблемой сокрытия моего ключа API. Я пытался использовать переменную dot.env, но я не могу запустить скрипт. Первоначально я использовал «asyn c defer src =» внутри тега, но не смог правильно объединить (это правильный термин?) Sr c. Одним из предложений было создание сценария динамически, что я и сделал, но теперь не могу отобразить карту. Мне также сказали использовать веб-пакет для его компиляции (???). Я все еще довольно новичок в программировании, поэтому я не уверен, как заставить это работать. Я приведу код ниже: 

<script>

    function initMap() {
        let lat = <%= data.coord.lat%>;
        let lng =   <%= data.coord.lon%>;
        let center = {lat: lat, lng: lng };
        console.log(lat, lng);
        let map = new google.maps.Map(document.getElementById("map"), {
              zoom: 8,
              center: center,
              scrollwheel: false
          });
        let marker = new google.maps.Marker({
              position: center,
              map: map
          });
        marker.addListener('click', function() {
            infowindow.open(map, marker);
          });
        };

const script = document.createElement('script');
script.defer = true;
script.async = true;
script.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_API_KEY}&callback=initMap`;
document.appendChild(script);
</script>

Вот моя первая попытка. Это отрисовывает карту, но не может использовать переменную .env: 

<script
async defer src="https://maps.googleapis.com/maps/api/js?key={MY_API_KEY}&callback=initMap"></script>

Я несколько недель пытался получить эту работу, чтобы я мог запустить sh и развернуть. Если бы кто-нибудь мог помочь, я бы очень признателен за это !!

1 Ответ

0 голосов
/ 17 января 2020

Вы действительно не можете скрыть любой скрипт-тег или код клиента javascript, который будет загружен в браузер. Даже если вы используете веб-пакет для компиляции, он все равно будет виден всем, кто посещает сайт и знает, как использовать инструменты разработчика.

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

Ниже приведены рекомендации по защите ключа API от Google: https://developers.google.com/maps/api-key-best-practices

...