So, I'm new to web development I'm just trying to get the basics down. Any ideas of even where I can find hints to a solutions to this issue would help a lot.
When my client enters the url http://localhost:5000/creatAccountPage the server sends him a basic html page. Then directly the html page calls the javascript method getCaptachaImage() :
async function getCapatchaImage()
{
const transmittingData =
{
clientIdi: "152412",
};
const options =
{
method:'POST',
headers: {'Content-Type':'application/json'},
body:JSON.stringify(transmittingData)
};
const response = await fetch('/getCaptchaImage',options);
const jsonResponse = await response.json();
document.getElementById("memory").innerHTML = jsonresponse.randomKey+"";
document.getElementById("captcha_pic").src = jsonresponse.image; //image is not the right type for this to work. I think i need to transform my json data to the right format.
}
the getCapatchaImage() method is suppose to get an image and the variable randomKey from the server. Below is my server code for the post request /getCaptachaImage I'm using Node.js, express and Node-Fetch.
//these are not all the requires but I'm just putting the essentials for this issue.
const fetch = require('node-fetch');
const express = require('express');
const app = express();
app.post("/getCaptchaImage",function(req, res)
{
var randomNumber = Math.random()* 100000;
var fullKey = randomNumber +process.env.CAPTCHA_SECRET+"";
const verifyUrl = `http://image.captchas.net?client=demo&random=`+fullKey; //I'm getting my image from an external server I can't get it directly from the client code else the client would know the fullkey which he is not suppose to know.
fetch(verifyUrl)
.then((body) => {
return res.json({image: body.body, randomKey: randomNumber}); //I suppose I should probably be transforming my image in to a specific format here too.
});
});
My general idea was to transmit my image together with my random key was just to put the image data in a string variable image of a json object together with the variable randomkey then find a away to translate the string image data in to the format I need for: document.getElementById("captcha_pic").src = ????
Any idea of how to transform my image data for this to work?
With there being no clear types for variables in javascript I'm having trouble understanding even what the format of my data is of "body" in the fetch function of my server code. All explanations in the Node-fetch api either I don't understand or they don't tell me what I need to know. https://www.npmjs.com/package//node-fetch#buffer
thanks in advance for any help.
