How do I implement recaptcha using reactjs with a PHP backend

See more:

PHP

ReactJS

Symfony

Hi,

I am trying to implement google recaptcha using reactjs and send it to the google servers for verification using a php backend. ever

here is my reactjs code:

function NewUser(post){

function onChange(value) {
      const data = [
        {
          serverKey : RECAPTCHA_SERVERs_KEY,  //private key obtained from google
          response : value,
          siteKey : "6LdAqMEZAAAAAGPT45HFPid4UggIqxgmMMAyiaib"
        }
      ];
      axios.post('/api/recaptcha',data).then(
        response=>{console.log(response)}).catch(
          err=>{console.log(err)});
      }


<pre>return (
        <div>
            <div className="product-container">
            <div className="web-text">
            <form onSubmit={handleOnSubmit}>
            <label>First Name:</label>
            <input type="text" name="firstName" onChange={handleOnChange} className="form-control" placeholder="Enter First Name" />
            <label>Last Name:</label>
            <input type="text" name="lastName" onChange={handleOnChange} className="form-control" placeholder="Enter Last Name" />
            <label>Email:</label>
            <input type="email" name="email" onChange={handleOnChange}  class="form-control" placeholder="Enter Email Address" />
            <label>User Name:</label>
            <input type="text" name="userName"  onChange={handleOnChange} class="form-control" placeholder="Enter User Name" />
            <label>Password:</label>
            <input type="password" name="password" onChange={handleOnChange}  class="form-control" placeholder="Enter Password" />
            <label>Password Confirmation:</label>
            <input type="password" name="passwordConf" onChange={handleOnChange}  class="form-control" placeholder="Enter Password Confirmatiion" />
            <label>Company Name:</label>
            <input type="text" name="companyName" onChange={handleOnChange}  class="form-control" placeholder="Enter Company Name" />
            <label>Genre Produced:</label>
            <input type="text" name="genreProduced" onChange={handleOnChange}  class="form-control" placeholder="Enter Genre" />
            <label className="label-format">Security Question 1: </label>
            <select class="form-control"  onChange={handleOnChange} name="Questions1"  id="questions1">
      <option value="0">What was the make of your first car?</option>
      <option value="1">What is the nickname of the high school you went to?</option>
      <option value="2">What city were you born in?</option>
      <option value="3">What is the name of your favorite teacher?</option>
      <option value="4">What was the make of your first computer?</option>
      <option value="5">What is your mother\'s madien name?</option>
      <option value="6">What is your father\'s middle name?</option>
      <option value="7">Who is your favorite Hip Hop artist?</option>
      <option value="8">What is the name of the first city you have vistied?</option>
      <option value="9">What is the name of your favorite Hip Hop song?</option>
    </select><br/>
    <input type="text" class="form-control" id="answer1" onChange={handleOnChange}  name="Answer1" placeholder="Enter Security Question1 Answer"></input>
    <label>Security Question 2 </label>
    <select className="form-control" onChange={handleOnChange}  name="Questions2"  id="questions2">
      <option value="0">What was the make of your first car?</option>
      <option value="1">What is the nickname of the high school you went to?</option>
      <option value="2">What city were you born in?</option>
      <option value="3">What is the name of your favorite teacher?</option>
      <option value="4">What was the make of your first computer?</option>
      <option value="5">What is your mother\'s madien name?</option>
      <option value="6">What is your father\'s middle name?</option>
      <option value="7">Who is your favorite Hip Hop artist?</option>
      <option value="8">What is the name of the first country you have vistied?</option>
      <option value="9">What is the name of your favorite Hip Hop song?</option>
    </select><br/>
    <input type="text" className="form-control" id="answer2" onChange={handleOnChange}  name="Answer2" placeholder="Enter Security Question2 Answer"></input>
    <br/>
    <div className="checkbox-div"><input className="form-control registration-checkbox"  type="checkbox" name="Mailing_List" id="defaultCheck1" value="yes"/></div><label className="checkbox-text">Check to receive promotional emails.</label>
    <br/>
    <div className="checkbox-div"><input className="form-control registration-checkbox"  type="checkbox" name="Mailing_List" id="defaultCheck1" value="yes"/></div><label className="checkbox-text">Check to accept <Link to={"/terms_agreement"} className={"nav-bar-links"}>Terms and Agreement.</Link></label>
    <br/>
           <div className="checkbox-div"><input className="form-control registration-checkbox"  type="checkbox" name="Mailing_List" id="defaultCheck1" value="yes"/></div><label className="checkbox-text">Check to accpet Privacy Policy.</label>
            <button type="submit" value="submitButton" name="submitButton1" className="submit-button">SUBMIT</button>
            <br/>
            <div className="captcha-div">
            <ReCAPTCHA
    sitekey="6LdAqMEZAAAAAGPT45HFPid4UggIqxgmMMAyiaib"
    onChange={onChange}
  />
  </div>
            </form> 
          </div>
          </div>  
        </div>
    );

}

export default NewUser;



Here is my php backend code:

<?php

namespace App\Services;



class RecaptchaService 
{
    

    public function checkCaptcha($recaptchaInfo)
    {

     //serverkey is equal to the private key obtained from google
     // response is the value returned from the captcha component

       $remoteAddress = "https://www.google.com/recaptcha/api/siteverify?secret=".$recaptchaInfo[0]["serverKey"]."&response=".$recaptchaInfo[0]['response'];
       $resp = file_get_contents($remoteAddress);
     

       return $resp;

    }
}

?>

here is the result that I get when I send the above information to the google servers:

RecaptchaService.php on line 21:
"""
{


  "success": false,


  "error-codes": [


    "timeout-or-duplicate"


  ]


}
"""

Even though I am clicking the recaptcha check box as a human, it is still giving me a false value.

What I have tried:

I don't know what else to try.