I need to write a web-page in which I embed a chart.
The page I wrote is the following:
<html>
<head>
<script language="JavaScript" type="text/javascript">
function makeFrame() {
ChartToken = "XXXXXXX";
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "https://url.com/charts/"+ ChartToken +"#/embedded");
ifrm.style.width = 640+"px";
ifrm.style.height = 480+"px";
document.body.appendChild(ifrm);
}
</script>
</head>
<body>
<p><a href="#" onMouseDown="makeFrame()">GO! </a></p>
</body>
</html>
If I manually set ChartToken with the correct string this is working. However, the value of ChartToken should be retrieved via a POST request.
I have been told that the POST request should go in the back-end server. However, I don't even know how to write in the back-end server and how to write the POST request. Also, I'm not sure if I really need to write in the back-end or I could simply make the POST request in the front-end page above.
At the moment, in order to obtain the ChartToken I use Advanced REST client. I fill in the Advanced REST client fields the values for the url:
https://url.com/1/embeddedCharts
for the RAW headers:
Authorization: Token YYYYYYYY
Content-Type: application/json
and for the RAW payload:
{"apiToken": "YYYYYYYY",
"chartId": "ZZZZZZZ"}
(notice that the Athorization: Token and the apiToken are the same) and I receive as response:
{
"token": "KKKKKKK"
}
This is the value that I put in the ChartToken in order to be able to embed the chart. However, this value can only be used once and at each page load I need to obtain a new token to put in ChartToken.
Therefore I wrote a page to retrieve the token (that I wanted to use to send the value of the token to ChartToken):
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title Goes Here</title>
</head>
<body>
<p>This is my web page</p>
<form action="https://url.com/1/embeddedCharts" method="post" enctype="application/json">
<input name="apiToken" value="YYYYYYYY">
<input name="chartId" value="ZZZZZZZ">
<button>Send my data</button>
</form>
</body>
</html>
However, this page doesn't work. Maybe because I don't send the RAW header:
Authorization: Token YYYYYYYY
as I do in the Advanced REST client? I have read in some other forum that this is not possible in html, because I cannot define a custom header. Is this true?
Or maybe because
enctype="application/json"
doesn't actually replace
Content-Type: application/json
that I use the Advance REST client?
Or maybe because I don't write this page in the back-end server? How would I do that?
So, the solution to my problem would be to know:
1) How to write the POST request to obtain the token for the chart.
2) Where to write the request, if in the back-end.
3) How to pass the value to my front-end page, essentially to ChartToken.
Please, consider that I can only write a bit of html for front-end pages and I don't know much about web architectures. The easiest for me would be to have a full example with all the indications.
Thanks a lot.
Aucun commentaire:
Enregistrer un commentaire