agosto 17, 2017

Google reCAPTCHA tutorial

Para comprobar si es un humano quien manda un formulario esto me sirvió:

Google has announced new service to prevent spams and attacks to your website. They name it “NO CAPTCHA reCAPTCHA” . Google reCAPTCHA is designed to protect your website from spams and abuse.
In this tutorial i am going to show you how to integrate it into your website. For demo purpose i made one simple script. Please look at the demo.
LIVE DEMODOWNLOAD

Register your website and get Secret Key.

Very first thing you need to do is register your website on Google recaptcha to do that click here.
Login to your Google account and submit the form.
capcha1
Once submit, Google will provide you following two information.
  • Site key
  • Secret key

Integrate Google reCAPTCHA in your website.

To integrate it into your website you need to put it in client side as well as in Server side. In client HTML page you need to integrate this line before <HEAD> tag.
<script src='https://www.google.com/recaptcha/api.js'></script>
And to show the widget into your form you need to put this below contact form, comment form etc.
<div class="g-recaptcha" data-sitekey="== Your site Key =="></div>
When the form get submit to Server, this script will send ‘g-recaptcha-response’ as a POST data. You need to verify it in order to see whether user has checked the Captcha or not.

Sample project

Here is the HTML code for the simple form with comment box and submit button. On submit of this form we will use PHP in back-end to do the Google reCAPTCHA validation.
Index.html
<html>
  <head>
    <title>Google recapcha demo - Codeforgeek</title>
    <script src='https://www.google.com/recaptcha/api.js'></script>
  </head>
  <body>
    <h1>Google reCAPTHA Demo</h1>
    <form id="comment_form" action="form.php" method="post">
      <input type="email" placeholder="Type your email" size="40"><br><br>
      <textarea name="comment" rows="8" cols="39"></textarea><br><br>
      <input type="submit" name="submit" value="Post comment"><br><br>
      <div class="g-recaptcha" data-sitekey="=== Your site key ==="></div>
    </form>
  </body>
</html>
This will generate this form.
google recaptcha form
On server side i am using PHP for now. So on Form submit request we will check the POST variable.
form.php
<?php
        $email;$comment;$captcha;
        if(isset($_POST['email'])){
          $email=$_POST['email'];
        }if(isset($_POST['comment'])){
          $email=$_POST['comment'];
        }if(isset($_POST['g-recaptcha-response'])){
          $captcha=$_POST['g-recaptcha-response'];
        }
        if(!$captcha){
          echo '<h2>Please check the the captcha form.</h2>';
          exit;
        }
        $secretKey = "Put your secret key here";
        $ip = $_SERVER['REMOTE_ADDR'];
        $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$captcha."&remoteip=".$ip);
        $responseKeys = json_decode($response,true);
        if(intval($responseKeys["success"]) !== 1) {
          echo '<h2>You are spammer ! Get the @$%K out</h2>';
        } else {
          echo '<h2>Thanks for posting comment.</h2>';
        }
?>
try out the demo to see how it works.

Further reading:


Fuente: https://codeforgeek.com/2014/12/google-recaptcha-tutorial/

No hay comentarios: