2016-10-21 7 views
5

Я следовалGoogle ReCaptcha дисплей с изображения и стороне клиента Валидация по Форме Отправить

How to Validate Google reCaptcha on Form Submit

У меня есть ниже код в моем index.php

<!DOCTYPE HTML> 
<html> 
    <head> 
     <script src='https://www.google.com/recaptcha/api.js'></script> 
    </head> 
    <body> 
     <form method="post" action="post.php"> 
      <div class="g-recaptcha" data-sitekey="6XXXXXXXXXXXXwdsf0K8HbXXXXXXX"></div> 
      <input type="submit" value="Submit" /> 
     </form> 
    </body> 
</html> 

Post.php

$response = $_REQUEST['g-recaptcha-response']; 
$secret = '6XXXXXXXXXXXXwdsf0K8HbJNvMw-XXXX'; 
$server = $_SERVER['REMOTE_ADDR']; 

$response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=" . $secret . "&response=" . $response.'&remoteip='.$server); 
$response = json_decode($response, true); 
if ($response["success"] === true) { 
    echo "Logged In Successfully"; 
} else { 
    echo "You are a robot"; 
} 
exit; 

Над кодом работает нормально.

Как сделать проверку на стороне клиента? Опция Captcha with Images не отображается.

enter image description here

я уже сделано ниже

enter image description here

+0

Ваш пост.php делает проверку стороны клиники? – nogad

+0

Nope server side –

+0

привет, я действительно не знаю, что вы просите. – nogad

ответ

1

Это стандартное поведение библиотеки ReCaptcha не отображается в первый раз контроль над изображениями.

Попытайтесь просмотреть или опубликовать страницу много раз, и вы увидите, что изображения в конечном итоге не отображаются.

Если вы хотите выполнить некоторую проверку на стороне клиента в других дополнительных полях, вы должны использовать jQuery или стандартную библиотеку, например, bootstrap или foundation, например this или this. Вы можете увидеть полный пример рабочего скрипта здесь (вдохновленный сценариями начальной загрузки и HTML 5):

Эта версия сценария одинакова во всем Интернете. Для этого больше не требуется проверка на стороне клиента! Посмотрите на ссылку: codepen.io signup

Например:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> 
     <script src='https://www.google.com/recaptcha/api.js'></script> 
    </head> 
    <body> 
     <form class="signin-form" method="post" action="post.php"> 
      <!-- for example : Email and password validation (HTML 5) --> 
      <label for="inputEmail" class="sr-only">Email address</label> 
      <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> 
      <label for="inputPassword" class="sr-only">Password</label> 
      <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> 
      <!-- Site-key for automated tests --> 
      <div class="g-recaptcha" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"></div> 
      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> 
     </form> 
    </body> 
</html> 

И here кода пера образца.

+0

У вас есть время для тестирования? –