All geek questions in one place

Display Google ReCaptcha using image validation and client side when submitting a form

I followed

How to check Google reCaptcha when submitting a form

I have the code below in my 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;

It works fine on the code.

How to do client side validation? It does not show Captcha with image options.

enter image description here

I have already done below

enter image description here

+5
source share
1 answer

This standard Recaptcha library behavior does not display the first image control.

Try to browse or publish the page many times, and you will see that images will not eventually appear.

If you want to do some client-side validation in other additional fields, you should use jQuery or a standard library like bootstrap or foundation like this or this . You can see the full example of a working script here (given the capabilities of the bootstrap script and HTML 5):

This version of the script is the same across the web. This no longer requires a client-side check! Take a look at the link: register codepen.io

For instance:

 <!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>

And here is a sample code.

+1
source

Source: https://habr.com/ru/post/1258576/

More articles:


All Articles