Как реализовать всплывающее окно с помощью reactjs с PHP серверной
Привет,
Я пытаюсь реализовать google recaptcha с помощью reactjs и отправить его на серверы google для проверки с помощью php-бэкенда. когда-либо
вот мой код reactjs:
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> );
}
экспорт нового пользователя по умолчанию;
Вот мой php бэкэнд код:
<?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; } } ?>
вот результат, который я получаю, когда отправляю вышеуказанную информацию на серверы google:
RecaptchaService.php on line 21: """ { "success": false, "error-codes": [ "timeout-or-duplicate" ] } """
Даже если я нажимаю на флажок recaptcha как человек, он все равно дает мне ложное значение.
Что я уже пробовал:
Я не знаю, что еще можно попробовать.