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

本教程将介绍无法从Java应用程序访问Heroku配置变量中的API密钥的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

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

问题描述

我正在尝试将一个由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

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

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

replaceStringInFile("@@MAPBOX_KEY@@")

肮脏的解决方案

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

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

优雅的解决方案

Webapck变量注入

最佳解决方案

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

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

好了关于无法从Java应用程序访问Heroku配置变量中的API密钥的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。