Fetch Problem with ReCAPTCHA API (Solved)

Ask the community
, ,
1

I’m trying to implement ReCaptcha v3 API on www.frink.global and having a problem. I’ve managed to narrow it down to a fetch made from the backend that seems to be returning the wrong response. When I make a POST call to the exact same URL using Postman, I get back the correct JSON response.

Can you see something I’m doing? The error appears to be within this section of code.

Seems to be the fetch call in particular, like I said I’ve double checked and sent all the same info to the URL using postman and it works.

import { fetch } from 'wix-fetch';
const secret = "<insert ReCaptcha secret"
export function verify(token) {
const url = "https://www.google.com/recaptcha/api/siteverify";

var bodydata = JSON.stringify({
 "secret": secret,
 "response": token
        });
 
var headerData = JSON.stringify({
 "Accept": "*/*",
 "Cache-Control": "no-cache",
 "Accept-Encoding": "gzip, deflate",
 "Connection": "keep-alive"
        });

fetch(url, { method: "post",
        headers:headerData,
        body:bodydata })
        .then((httpResponse) => {
 var cache = [];
 let httpResponseBodyStringified = JSON.stringify(httpResponse.body,
        function(key, value) {
               if (typeof value === 'object' && value !== null) {
               if (cache.indexOf(value) !== -1) {
                      // Duplicate reference found, discard key
                      return;
                  }
               // Store value in our collection
              cache.push(value);
        }
        return value;
 });

 if (httpResponse.ok) {
 return httpResponse.json();
 }
        })
 return "I didn't verify";
}

This might help:
https://www.wix.com/corvid/forum/community-discussion/how-to-set-up-recaptcha-v3-tutorial
Based my code off of this tutorial. Intentionally using POST instead of GET but have tried both. Tried sending as URL instead of body, both give same result as expected.

Thank you for your time!

2

Fixed this one myself. If anyone is curious or has similar issues, here is what I did.

Add this to HTML Element:


Add onMessage Event to HTML Element which htmlRecaptchav3_message

//Top of code:
import { verify } from ‘backend/reCAPTCHA’;
var reCaptchaScore = 0;
export function htmlRecaptchav3_message(event) {
console.log(“htmlRecaptchav3_message - message recieved”);
console.log(“htmlRecaptchav3_message - eventData:”+event.data);
verify(event.data).then((data) => {
console.log("htmlRecaptchav3_message - data: ");
console.log(data);
// console.log("htmlRecaptchav3_message - stringifyObj(data): "+stringifyObj(data));
let success = data.success // true
console.log(“ReCaptcha success:”+success);
let challenge_ts = data.challenge_ts // “2018-08-27T19:04:58Z”
console.log(“ReCaptcha challenge_ts:”+challenge_ts);
let hostname = data.hostname //for me is www-bombandkou-filesusr.com
console.log(“ReCaptcha hostname:”+hostname);
reCaptchaScore = data.score //Higher the better. Most users will get around 0.9
console.log(“ReCaptcha Score:”+ reCaptchaScore);
let action = data.action
})
}

Backend Code

// Filename: backend/reCAPTCHA.jsw (web modules need to have a .jsw extension)
import { fetch } from ‘wix-fetch’;
const secret = " INSERT SECRET KEY "

export function verify(token) {
const url = “https://www.google.com/recaptcha/api/siteverify?secret=” + secret + “&response=” + token;

const bodyData = “secret=”+secret+“&response=”+token;

var headerData = JSON.stringify({
“Accept”: “/”,
“Cache-Control”: “no-cache”,
“Accept-Encoding”: “gzip, deflate”,
“Connection”: “keep-alive”
});

const request = {
“method”: “post”,
“headers”: headerData
};

return fetch(url, request)
.then((httpResponse) =>
httpResponse.json()
);
}

At verify time

If (reCaptchaScore >= 0.5) {
Insert code that executes upon successful verification
} else {
Insert alternative verification, such as having them verify themselves by text message
}

Go to www.frink.global to see it in action