Click here to Skip to main content
14,771,786 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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.
Posted
Updated 5-Sep-20 22:42pm

1 solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900