How to work with those fancy modern js frameworks

[xttlegendapi]

Hello, im trying to use this as captcha for my contact form in AstroJS. And i have a few questions

• The docs show formdata object, how can i recreate?
• Im getting the error ECONNREFUSED (on the server side). How is that possible, on the client side everything is working.

maybe i should search AstroJS support, let me know. This is my code for the api route:

import type { APIRoute } from "astro";
import mosparo from '@mosparo/api-client';

let client = new mosparo.Client('http://localhost:8080', 'mykeys', 'mykeys', {});

export const post: APIRoute = async ({ request }) => {
  const data = await request.formData();
  const name = data.get("name");
  const email = data.get("email");
  const message = data.get("message");
  const mosparoSubmitToken = data.get("_mosparo_submitToken");
  const mosparoValidationToken = data.get("_mosparo_validationToken");

    client.verifySubmission({name, email, message}, mosparoSubmitToken, mosparoValidationToken).then((verificationResult) => {
      if (verificationResult.isSubmittable()) {
        console.log('ok?')
      } else {
        console.log('not ok')
      }
    });

};

[zepich]

Hi @xttlegendapi

Thank you very much for your questions.

1. The formdata object is a key-value object with the field's name as the key and the field's value as the value. We used an ExpressJS app to develop the JavaScript API client (https://expressjs.com/en/5x/api.html#req.body). Here is a snippet from the development:

router.post('/', function (req, res, next) {
    let client = new mosparo.Client(
        process.env.MOSPARO_HOST,
        process.env.MOSPARO_PUBLIC_KEY,
        process.env.MOSPARO_PRIVATE_KEY,
        {
            httpsAgent: new https.Agent({
                rejectUnauthorized: false
            })
        }
    );

    let formData = req.body;
    try {
        let validationPromise = client.validateSubmission(formData);
        validationPromise.then((verificationResult) => {
            if (verificationResult.isSubmittable()) {
                res.redirect('/successful');
            } else {
                res.redirect('/error');
            }
        });
    } catch (e) {
        console.log(e);
    }
});

2. The ECONNREFUSED error: Do you use the Docker image? I will make a test with the ExpressJS test app and the Docker image.

Kind reagrds,

zepich

[xttlegendapi]

Hello @zepich , sorry for that dumb questions.
yes i use the docker image.

I just looked into it a bit more, i found this message on the docker server side, cna this have something todo with it?:
mosparo-mosparo_web-1 | [2023-05-26T21:16:59.608783+00:00] deprecation.INFO: User Deprecated: Since symfony/security-core 5.4: The "IS_AUTHENTICATED_ANONYMOUSLY" security attribute is deprecated, use "PUBLIC_ACCESS" for public resources, otherwise use "IS_AUTHENTICATED" or "IS_AUTHENTICATED_FULLY" instead if you want to check if the request is (fully) authenticated. {"exception":"[object] (ErrorException(code: 0): User Deprecated: Since symfony/security-core 5.4: The \"IS_AUTHENTICATED_ANONYMOUSLY\" security attribute is deprecated, use \"PUBLIC_ACCESS\" for public resources, otherwise use \"IS_AUTHENTICATED\" or \"IS_AUTHENTICATED_FULLY\" instead if you want to check if the request is (fully) authenticated. at /mosparo/vendor/symfony/security-core/Authorization/Voter/AuthenticatedVoter.php:89)"} []

[zepich]

Hi @xttlegendapi

That was not a dumb question. We have to document it better, so we will adjust the README.md of the JavaScript API client to make it more understandable.

As far as I can tell, the message you saw is not the reason for the issue. It sounds like there is an issue with the connection. It means the backend does not connect to the mosparo host, or a connection issue happened (like it tries to communicate by SSL, but there is no SSL set up). Is the backend running also in a Docker image? If yes, then maybe the two containers have no connection (between each other).

It is also possible that there is an issue with the Docker image with the JavaScript API since I didn't test the library with the Docker image.

I will test it tomorrow.

Kind regards,

zepich

[xttlegendapi]

Hi @zepich

This is totally on me. I should have known that my platform blocks localhost, and using 127.0.0.1 fixes this. Nothing to do with your code or docs.

Thanks for the amazing work you have done to this project!

[zepich]

Thank you very much for your feedback! Always great to read!