For anyone who needs it. It´s an implementation of recaptcha V2 using the html-component.
1 Like
Good day,
I did follow the steps, all good until the last one, but when I click submit without reCaptcha, the database gets updated, so I removed the connection between the button and the DB
Then I did try again, but nothing happen, when I go in the Editor, select the button and click OnClick event, a pop-up error message say: We couldn’t find the function for your event because of errors in your code
I did follow all the steps, what should I do now, please?
Here is the link to the form in the website:
https://www.wikimom.ca/formulaire
Warm Regards
Yassine
Could you show me your code?
Hi Giri,
as requested, this the code, when I click the button, the recaptcha work but the database don’t get updated, and if I link the button to the DB, it will get updated regardless of the recaptcha working or not
How can I fix this, please?
import {
verifyCaptcha
}
from ‘backend/recaptcha’;
let gToken = “”;
let strIpAddress = “”;
$w.onReady( async function () {
strIpAddress= await chkIpAddress ();
$w("#frmReCaptcha").onMessage((event) => {
if (event) {
gToken = event.data;
}
});
});
export async function btnSubmit_click(event, $w) {
let boolOK= await verifyCaptcha(gToken, strIpAddress);
if (boolOK) {
console.log("Verification result = " + boolOK);
//todo: redirect to page or show box or show a message
}
}
export async function chkIpAddress() {
const httpResponse = await fetch(‘https://extreme-ip-lookup.com/json’, {
method: ‘get’
});
if (httpResponse.ok) {
const json = await httpResponse.json();
const ipaddress = await json.query;
return ipaddress;
}
}
Familiar code: that´s my example code. There is a lot missing: you have not connected the added reCaptcha-logic to the yes/no saving of the data. There are 2 ways to do that:
- doing a .save() in code when repaptcha=OK on the dataset in front end code. This is DANGEROUS and I specifically warn against it in my article, so I won´t even go there:
- doing an Insert using wix-data in the backend, calling a fuction that passes all form data to this backend function.
Last method is how it should be done, but it involved some pretty interesting coding: you cannot click, drag and drop your way out of it, This has got little to do with the recaptcha being complex, it has to do with security.
I fear this is going to be too complex for you, but if you want to prove me wrong, try, and if you get stuck somewhere, I´ll try to help you BUT NOT WHEN YOU TRY TO SAVE FROM THE FRONT END.
Good luck, sorry that I do not have better news.
Thank you Giri for your prompt answer,
I’m trying to work on it, will see how I get to
Regards
Yassine
Hi Giri, I also tried to implement this but it’s way beyond my capabilities. Are you a ‘Wix Expert’ by any chance so that you can implement this solution for someone like me? Cheers, Nat
Hi Giri,
Thank you for this, I’ve implemented this, a problem I have now is that the form is submitting without the captcha being selected. Do you have ideas on what I need to lookout for?
Hi KAren. I believe you ask how to link the Google result to your form. Well, to have a secure solution, I would do this. I would disable the Submit-button by default.In the " if (boolOK) " part I would do 2 things:
- enable the button
2)call a backend function with all data from the form PLUS the google verification, check if all is well there (= in backend code), then write data to db using wix-data, set a result back to frontend and respond to that (either an error or a redirect to another (Thank you page).
The second step is important, DO NOT rely on front-end code only.
1 Like