无法从Java应用程序访问Heroku配置变量中的API密钥

Unable to access API key in Heroku Config Vars from Javascript app(无法从Java应用程序访问Heroku配置变量中的API密钥)

本文介绍了无法从Java应用程序访问Heroku配置变量中的API密钥的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试将一个由Html、css和Javascript文件组成的简单静电应用程序部署到Heroku。我还添加了&dumy";composer.json和index.php文件,以允许静电文件驻留在Heroku中。当我转到托管页面时,我看到一个空白屏幕。控制台窗口如下所示。这些文件链接到我的GitHub存储库,所以我使用.gitignore文件来排除我的API密钥,并将API密钥保存在Heroku的Config Vars中。应用程序未找到API密钥并引发错误。

Uncaught ReferenceError: MAPBOX_KEY is not defined                 logic.js:68
    at createMap (logic.js:68)
    at createFeatures (logic.js:56)
    at logic.js:9
    at d3.min.js:3
    at Object.<anonymous> (d3.min.js:7)
    at d.call (d3.min.js:4)
    at XMLHttpRequest.e (d3.min.js:7)

到目前为止,我已经尝试了以下方法:

  • 直接在Heroku的设置/配置变量下添加API密钥

  • 使用控制台窗口添加密钥Heroku配置:add mapbox_key=pk.eyJ1I.

  • 已禁用网页缓存

  • 在网页上运行空缓存和硬重新加载

  • 在控制台中运行Heroku配置,收到以下错误:

    heroku config
    »   Error: Missing required flag:
    »     -a, --app APP  app to run command against
    »   See more help with --help
    

我搜索了文档和堆栈溢出,在Heroku中找不到任何有关使用Javascript的API密钥的信息。我是否需要在我的.js或.html文件中添加额外的代码,以便应用程序在Heroku服务器上找到密钥?下面是错误行的一部分.js代码。

// +++++ Leaflet Challenge +++++

// store API endpoint inside queryUrl
var queryUrl = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson";

// make API call to USGS and perform a GET request to the query URL
d3.json(queryUrl, function(data) {
   // after a response, send the data.features object to the createFeatures function
   createFeatures(data.features);
});

// Circle radius function
function circleSize(magnitude) {
   return magnitude **2 * 2000 
};

// Circle color function by depth
function circleColor(depth) {
   switch (true) {
      case (depth > 90):
         return "#d73027"; //red
      case (depth > 70):
         return "#fc8d59"; //darkorange
      case (depth > 50):
         return "#fee08b"; //lightorange
      case (depth > 30):
         return "#d9ef8b"; //yellow
      case (depth > 10):
         return "#91cf60"; //yellowgreen
      default:
         return "#1a9850"; //green
   }
};

function createFeatures(earthquakeData) {

   // define a function and run once for each feature in the features array
   // give each feature a popup describing the place and time of the earthquake
   var earthquakes = L.geoJSON(earthquakeData, {
      onEachFeature: function(feature, layer) {
         layer.bindPopup("<h3>Magnitude: " + feature.properties.mag +"</h3><h3>Depth: " + feature.geometry.coordinates[2] + " km</h3><hr><h4>Location: " + feature.properties.place + "</h4><hr><p>" + new Date(feature.properties.time) + "</p>");
      },

      pointToLayer: function(feature, latlng) {
         return new L.circle(latlng, {
            radius: circleSize(feature.properties.mag),
            fillColor: circleColor(feature.geometry.coordinates[2]),
            color: "black",
            weight: .5,
            fillOpacity: 0.8
         })
      }
   });
  
   // send earthquakes layer to the createMap function
   createMap(earthquakes);
}

function createMap(earthquakes) {

   // define lightmap layer
   var lightmap = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      tileSize: 512,
      maxZoom: 18,
      zoomOffset: -1,
      id: "mapbox/light-v10",  
      accessToken: MAPBOX_KEY
   });

提前感谢您所能提供的任何帮助。这是我第一次部署到Heroku,所以这对我来说是全新的。

推荐答案

Heroku配置变量是操作系统(linux、mac、windows)的经典环境变量,设计为可以从后端语言访问,例如:java、php、nodejs、ruby、python等。

根据您的代码片段,您需要在您的普通javascript中读取此环境变量,该javascript是在某些Web浏览器中从您的html调用的,这是不可能的

不允许Vanilla javascript或纯javascript访问某些操作系统资源,例如本例中的环境变量。

查看此链接了解变量在vanilla javascript中的工作方式:

How to use variable substitution in Frontend js applications like backend applications?

快速解决方案

在您的php代码中,在操作系统层的web渲染之前读取此变量,因为php能够做到这一点:

php不是我的拿手好戏,但我确信它有几个选项可以将此var注入静电html或javascript

如果没有,可以在静电文件中使用普通字符串替换:

im_your_file.js

zoomOffset: -1,
id: "mapbox/light-v10",  
accessToken: @@MAPBOX_KEY@@

另一个_php_file.php

replaceStringInFile("@@MAPBOX_KEY@@")

肮脏的解决方案

使用此替换另一个php文件中的文件中的内容,并在应用程序启动之前从某个Heroku步骤调用它

您可以使用纯bash执行此文件替换,并在某个Heroku步骤中调用它

优雅的解决方案

Webapck变量注入

最佳解决方案

不是直接读取javascript中的var,而是必须在php应用程序中发布一种睡觉端点,比如/settings.php。此终结点必须将此变量和其他变量作为json返回。

在javascript文件中,要直接使用变量,请使用/settings.php,您将在javascript代码中拥有所需的变量。

这篇关于无法从Java应用程序访问Heroku配置变量中的API密钥的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:无法从Java应用程序访问Heroku配置变量中的API密钥

基础教程推荐