Is it possible to use google recaptcha on client side without server side support? If possible how?

Question

Currently, I am working on Nuxtjs 2 project in which I have to implement Recaptcha on the client side, I do not want backend support for Recaptcha. I want to handle it only on the front end. How can I do this on the front-end with or without any library that is compatible with nuxtjs2?

Answer 1

There is no reason to use reCAPTCHA without server. reCAPTCHA is for protecting the backend from spam.

If you really want to do it, you can make the same request with JavaScript.

But again: Makes no sense.

reCAPTCHA validation for PHP:

function validate_captcha_response($code){
  if($_SERVER['HTTP_HOST']=="localhost") return true;
  if($code && strlen($code)>32){
    $secret = "<your reCaptcha v3 secret>";
    $ip = $_SERVER['REMOTE_ADDR'];
    $gcaptcha = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secret&response=$code&remoteip=$ip"), true);
    return ($gcaptcha['success'] == true && $gcaptcha['score'] >= 0.8 && $gcaptcha['hostname'] == $_SERVER['SERVER_NAME']);
  }
  return false;
}

The same code in JavaScript:

function validate_captcha_response(code){
  if(window.location.hostname=="localhost") return true;
  if(code && code.length>32){
    let secret = "<your reCaptcha v3 secret>";
    let gcaptcha = json_decode(file_get_contents(`https://www.google.com/recaptcha/api/siteverify?secret=${secret}&response=${code}`), true);
    return (gcaptcha['success'] == true && gcaptcha['score'] >= 0.8 && gcaptcha['hostname'] == window.location.hostname);
  }
  return false;
}

(Please note I removed the IP functionality)

Code Source: https://www.custom-captcha.com/