如何将JavaScript响应转换为HTML
我有一个需要令牌访问某些数据的HTML文件(来自ArcGIS Online)。一个单独的JavaScript文件应该调用服务并获取令牌。令牌然后需要以某种方式传递到HTML文件,这是我不确定的位。如何将JavaScript响应转换为HTML
在任何情况下,代码:
JavaScript文件(GetAToken.js)
var request = require('request'); // npm install request
// generate a token with your client id and client secret
function getToken(callback)
{
request.post(
{
url: 'https://www.arcgis.com/sharing/rest/oauth2/token/',
json: true,
form:
{
'f': 'json',
'client_id': '<<MY CLIENT_ID>>',
'client_secret': '<<MY CLIENT_SECRET>>',
'grant_type': 'client_credentials',
'expiration': '1440'
}
}, function (error, response, body)
{
console.log(body.access_token);
callback(body.access_token);
});
}
而从HTML中的相关位
<script src="GetAToken.js"></script>
</head>
<body onload="getToken()">
<div class="embed-container">
<iframe width="500"
height="400"
frameborder="0"
scrolling="no"
marginheight="0"
marginwidth="0"
title="Test Map" src="//MyMap.maps.arcgis.com/apps/webappviewer/index.html?id=LongMapID?token=I_Need_My_Token_Here&extent=1,-1,1,-1&zoom=true&scale=true&search=true&searchextent=true&legend=true&basemap_gallery=true&disable_scroll=true&theme=light">
</iframe>
</div>
</body>
</html>
如果你看看内HTML中的div,这就是我需要令牌去的地方。 JavaScript的显然是返回一个名为access_token
值,并写入使用Node.js的
编辑
新GetAToken.js
const request = require('request'); // npm install request
const express = require('express');
const app = express();
// generate a token with your client id and client secret
//function getToken(callback)
app.get('/GetAToken', (req, res) => {
request.post(
{
url: 'https://www.arcgis.com/sharing/rest/oauth2/token/',
json: true,
form:
{
'f': 'json',
'client_id': '<<MY_CLIENT_ID>>',
'client_secret': '<<MY_CLIENT_SECRET>>',
'grant_type': 'client_credentials',
'expiration': '1440'
}
}, function (error, response, body) {
console.log(body.access_token);
callback(body.access_token);
});
});
app.listen(80);
更新HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Title</title>
<link href="https://esri.github.io/calcite-bootstrap/assets/css/calcite-bootstrap-open.min.css" rel="stylesheet">
<style>
.footer
{
height: 6.25rem;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://esri.github.io/calcite-bootstrap/assets/js/bootstrap.min.js"></script>
<script src="https://js.arcgis.com/3.17/"></script>
<script src="GetAToken.js"></script>
<script type="text/javascript">
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if(xhttp.readyState === 4 && xhttp.status === 200)
{
var responseJSON = JSON.parse(xhttp.responseText);
var token = responseJSON.token;
alert(token);
}
}
xhttp.open("GET", "GetAToken", true);
xhttp.send();
</script>
</head>
<body>
<style>
.embed-container
{
position: relative;
padding-bottom: 50%;
height: 0;
max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container iframe
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
small
{
position: absolute;
z-index: 40;
bottom: 0;
margin-bottom: -15px;
}
</style>
<div class="embed-container">
<iframe width="500"
height="400"
frameborder="0"
scrolling="no"
marginheight="0"
marginwidth="0"
title="Test Map" src="//MyMap.maps.arcgis.com/apps/webappviewer/index.html?id=MyLongID&extent=1,-1,1,-1&zoom=true&scale=true&search=true&searchextent=true&legend=true&basemap_gallery=true&disable_scroll=true&theme=light">
</iframe>
</div>
</body>
</html>
你想要将该请求的响应以某种方式提供给客户端。下面是一个例子使用快递:
const request = require('request'); // npm install request
const express = require('express'); // npm install express
const app = express();
app.get('/get-a-token', (req, res) =>
{
request.post(
{
url: 'https://www.arcgis.com/sharing/rest/oauth2/token/',
json: true,
form:
{
'f': 'json',
'client_id': '<<MY CLIENT_ID>>',
'client_secret': '<<MY CLIENT_SECRET>>',
'grant_type': 'client_credentials',
'expiration': '1440'
}
}, function (error, response, body)
{
console.log(body.access_token);
res.json({token: body.access_token});
});
});
app.listen(80);
然后在客户端上,你可以做这样的事情来从服务器获取的值:
<script type="text/javascript">
// You may want to move this to another file..
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState === 4 && xhttp.status === 200) {
var responseJSON = JSON.parse(xhttp.responseText);
var token = responseJSON.token;
var iframe = document.querySelectorAll('iframe')[0]
iframe.src = "//MyMap.maps.arcgix.com/apps/webappviewer/index.html?id=LongMapID?token=" + token + "&extent=1,-1,1,-1&zoom=true&scale=true&search=true&searchextent=true&legend=true&basemap_gallery=true&disable_scroll=true&theme=light"
}
}
xhttp.open("GET", "http://yournodeserver.com/get-a-token", true);
xhttp.send();
</script>
你可能会想做些什么来保护/get-a-token
路线从您的网站以外访问。
如果您服务与节点HTML文件/快递太多,那么你可以通过将令牌的HTML它的服务给客户,而不是
不幸的是,console.log在init.js:19中返回'Uncaught Error:undefinedModule',并且在HTML中还有'Uncaught ReferenceError:send is not defined'。 – user25730
你可以发布你使用的代码吗? console.log不会记录一个错误 - 只有access_token的值,但可能有其他代码会抛出它。 – carlevans719
我基本上使用上面的代码。但是,我不确定我是否正确安装了node.js。 – user25730
是'GetAToken'服务器或客户端上运行之前解决这个问题? –
我不确定。我对JavaScript非常陌生。它与我的HTML目前位于同一个文件夹中,我最终希望它能够在互联网上运行。 – user25730
它应该在服务器上运行,因为它具有密钥。 – alexi2