miércoles, 13 de febrero de 2019

Proceso para poner captcha de google Wordpress

Un captcha es un sistema de verificación online que comprueba que un formulario ha sido escrito por un humano y no por una máquina. 

1. Registrarse en reCAPTCHA. Nos dirigiremos a http://recaptcha.net/  y nos identificamos como usuarios de Google.  En su defecto, tendremos que registrarnos.

Una vez identificados, nos solicitarán el dominio o dominios donde queremos implantar nuestros captchas, una etiqueta a modo de identificador y un correo o correos donde puedan notificarnos alertas.

A continuación, nos mostrará lo siguiente:

Public Key: 5LfCABCDEFGHIJUNDSBOejHq-5n5StSWawBpCAMX 
Private Key: 6LfCAAAFHJSDFGHHJHDeju3a-Z5lomjShHKaGh9g

En el sitio de reCAPTCHA, tendremos que descargarnos los códigos en el lenguaje que queramos, las librerías para poner en nuestro servidor y unos ejemplos de uso del sistema, algo que encontraremos aquí:  https://developers.google.com/recaptcha/intro.

En este ejemplo, mostraremos la versión PHP. Una vez descargado el zip que contiene la librería PHP, la ubicamos en nuestro servidor. Recuerda dónde la has puesto, porque tendrás que hacer un include con PHP de esa librería.

Por ejemplo, podríamos colocar dicha librería en el mismo directorio donde está la página PHP que va a hacer uso de ella. Entonces, la incluiríamos con algo como esto: require_once(‘recaptchalib.php’);

2. Incluir el captcha en el formulario

En la librería descargada (recaptchalib.php), existe una función que utilizaremos para mostrar el captcha. Solamente tenemos que llamarla con los parámetros oportunos. La función devuelve el código HTML que tenemos que colocar en la página para que esta se muestre:

.recaptcha_get_html($captcha_publickey, $error_captcha);

Los parámetros que recibe son la llave pública que nos mostraron anteriormente y un código de error (opcional).

El código del formulario podría ser así:

<?
require_once('recaptchalib.php');
//Llaves de la captcha
$captcha_publickey = "6LfC?.";
$captcha_privatekey = "6LfC? ";
//por ahora ponemos a null el error de la captcha
$error_captcha=null;
?>

<form action="/blogmiejemplo_formulario.php" method="post">
Nombre: <input type="text" name="nombre" size="30">
<br>
Edad: <input type="text" name="edad" size="3">
<br>
<?
//escribimos en la página lo que nos devuelve recaptcha_get_html()
echo recaptcha_get_html($captcha_publickey, $error_captcha);
?>
<br>
<input type="submit" value="Enviar">
</form>

3.  Validar el captcha

Existe otra función para validar el captcha, llamada recaptcha_check_answer(). Esta recibe también varios parámetros: la llave privada (Private Key), la IP del usuario y dos campos que contienen los valores que envía el captcha dentro del formulario $_POST[“recaptcha_challenge_field”] y $_POST[“recaptcha_response_field”]

La función retorna un objeto con dos propiedades: is_valid , un boleano para decir si se ha validado correctamente el captcha.  error, un código de error que especifica qué ha ido mal si no se validó correctamente el texto.

Así podríamos validar el captcha:

$captcha_respuesta = recaptcha_check_answer ($captcha_privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
if ($captcha_respuesta->is_valid) {
//todo correcto
//hacemos lo que se deba hacer una vez recibido el formulario válido
}else{
//El código de validación de la imagen está mal escrito.
$error_captcha = $captcha_respuesta->error;
}

Hacemos una llamada a la función recaptcha_check_answer() enviando los parámetros comentados y almacenamos el valor devuelto por la función en la variable $captcha_respuesta.

Después, hacemos la comprobación para saber si el atributo $captcha_respuesta->is_valid es true. Con esto, sabremos que el texto introducido de la imagen está validado correctamente y realizamos la función que tengamos dentro del formulario.

En caso de que  $captcha_respuesta->is_valid  sea falso, querrá decir que no se ha escrito bien el texto que se mostraba en la imagen. Podemos entonces actualizar la variable $error_captcha para que le indiquemos al usuario el error que ha habido.

El código completo te lo mostramos aquí:

<html>
<head>
<title>Página con formulario protegido por captcha</title>
</head>
<body>
<?
require_once('recaptchalib.php');
//Llaves de la captcha
$captcha_publickey = "6LfC?.";
$captcha_privatekey = "6LfC? ";
$error_captcha=null;
if ($_POST){
$captcha_respuesta = recaptcha_check_answer ($captcha_privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
if ($captcha_respuesta->is_valid) {
//todo correcto
//hacemos lo que se deba hacer una vez recibido el formulario válido
echo "Todo correcto!";
}else{
//El código de validación de la imagen está mal escrito.
echo "Has escrito mal el texto";
$error_captcha = $captcha_respuesta->error;
}
}
?>
<form action="/blogmiejemplo_formulario.php" method="post">
Nombre: <input type="text" name="nombre" size="30">
<br>
Edad: <input type="text" name="edad" size="3">
<br>
<?
//escribimos en la página lo que nos devuelve recaptcha_get_html()
echo recaptcha_get_html($captcha_publickey, $error_captcha);
?>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Proceso para poner captcha de google HTML

reCAPTCHA es un servicio de Google, que permite la verificación de los usuarios que usan un formulario en una página, simplemente marcando una casilla.

Accede a la página de reCAPTCHA usando tu cuenta de Google.

Indica la dirección URL del sitio donde se va a insertar el sistema de verificación, para validar el dominio o subdominios y copia las dos claves personales:

Clave del sitio. Se usa en el HTML de la página para cargar la API de reCAPTCHA.
Clave secreta. Se usa para autenticar la petición y respuesta entre el sitio y Google.

Inserta dentro del área del HEAD de la página específica, la siguiente instrucción:

<script async src="https://www.google.com/recaptcha/api.js"></script>

Agregamos la propiedad ASYNC para impedir el bloqueo de la página, en caso que por alguna razón el script de Google no esté disponible.

Puedes también definir cuáles de los 40 idiomas soportados estás usando agregando un parámetro a la cadena. Aquí estamos agregando es el cual nos dará el reCAPTCHA para el lenguaje Español.

<script async src='https://www.google.com/recaptcha/api.js?hl=es'></script>

Inserta en el lugar del formulario, donde deseas que se muestre el cuadro de verificación, entre las etiquetas <form></form>, el siguiente código.

<span class="msg-error error"></span>
<div id="recaptcha" class="g-recaptcha" data-sitekey="Clave del sitio"></div>

Sustituye "Clave del sitio" por la correspondiente.

Nota: el atributo data-sitekey mantendrá el valor de tu clave.

Hay otros atributos los cuales puedes agregar para personalizar la vista y funcionalidad de tu reCAPTCHA 

Por ejemplo, agregar data-theme="dark" a este div te dará una versión oscura, la cual podría encajar mejor en tu interfaz de usuario.

Armándolo



Ahora tenemos los ingredientes iniciales, es tiempo de ponerlos en un entorno funcional.

Paso 1 HTML

Vamos a poner nuestra etiqueta script y el placeholder en un simple formulario:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Como integrar “No CAPTCHA reCAPTCHA”</title>
  </head>
  <body>
    <form action="" method="post">
      <label for="name">Nombre:</label>
      <input name="name" required><br />
      <label for="email">Email:</label>
      <input name="email" type="email" required><br />
      <span class="msg-error error"></span>
<div id="recaptcha" class="g-recaptcha" data-sitekey="6Ld4Jh8TAAAAAD2tURa21kTFwMkKoyJCqaXb0uoK"></div>
      <input type="submit" value="Submit" />
    </form>
    <!--js-->
    <script src='https://www.google.com/recaptcha/api.js'></script>
  </body>
</html>

Paso 2 CSS

msg-error {
  color: #c65848;
}
.g-recaptcha.error {
  border: solid 2px #c64848;
  padding: .2em;
  width: 19em;
}

Paso 3 JS

$( '#btn-validate' ).click(function(){
  var $captcha = $( '#recaptcha' ),
      response = grecaptcha.getResponse();
    if (response.length === 0) {
    $( '.msg-error').text( "reCAPTCHA is mandatory" );
    if( !$captcha.hasClass( "error" ) ){
      $captcha.addClass( "error" );
    }
  } else {
    $( '.msg-error' ).text('');
    $captcha.removeClass( "error" );
    alert( 'reCAPTCHA marked' );
  }
})