recaptcha-acceso-wp

Integrar No Captcha reCaptcha en WP

Hay muchas soluciones diferentes para evitar la presencia de los robots en los formularios web. Pero una de las soluciones más populares fue el uso de reCaptcha.

reCaptcha muestra una imagen con un texto en la misma y el usuario tiene que introducir el texto para enviar el formulario correctamente. Era difícil para los robots leer el texto en la imagen. Pero como los algoritmos de los bots se vuelvieron más avanzados comenzaron a romper esta seguridad. Ya no era tan seguro. Google ha mejorado el sistema de Captcha con el nuevo No Captcha reCaptcha.

En este tutorial vamos a ver qué es exactamente no Captcha reCaptcha y cómo crear un plugin para integrar reCaptcha en WordPress.

Un vistazo a No Captcha reCaptcha

recaptchaNo Captcha reCaptcha solo muestra una casilla pidiendo al usuario que la marque para comprobar si no es un bot. Puede parecer muy hackeable pero internamente Google utiliza algoritmos y métodos avanzados para encontrar si el usuario es un bot o no. Este nuevo modelo es más fácil de usar y seguro que la anterior.

Registrando tu sitio y obteniendo tus Claves

Primero tienes que registrar tu página web para obtener la clave de sitio y la clave secreta.

Creando nuestro plugin Recaptcha

Crea un archivo php con el siguiente código.

<?php
/*
Plugin Name: Nuestro reCaptcha Guay
Plugin URI: http://www.freelanceevolution.com
Description: Pon nocaptcha Recaptcha en tu web WP.
Version: 1.0
Author: FE
Author URI: http://www.freelanceevolution.com
License: GPL2
*/

Cambia los datos por los tuyos.

Crearemos una página de configuración para el plugin que permita al administrador de WordPress instalar la clave del sitio y la clave secreta, obtenidas del panel de administración reCaptcha.

Añade el siguiente código

function no_captcha_recaptcha_menu() {
 add_menu_page("Opciones reCapatcha", "Opciones reCapatcha", "manage_options", "recaptcha-opciones", "recaptcha_options_page", "", 100);
}
function recaptcha_options_page() { ?>
 <div class="wrap">
 <h1>Opciones de reCaptcha</h1>
 <form method="post" action="options.php">
 <?php settings_fields("header_section");
 do_settings_sections("recaptcha-opciones");
 submit_button(); ?> 
 </form>
 </div>
<?php }
add_action("admin_menu", "no_captcha_recaptcha_menu");
function display_recaptcha_options() {
 add_settings_section("header_section", "Claves de reCaptcha", "display_recaptcha_content", "recaptcha-opciones");
 add_settings_field("captcha_site_key", __("Clave del sitio"), "display_captcha_site_key_element", "recaptcha-opciones", "header_section");
 add_settings_field("captcha_secret_key", __("Clave secreta"), "display_captcha_secret_key_element", "recaptcha-opciones", "header_section");
 register_setting("header_section", "captcha_site_key");
 register_setting("header_section", "captcha_secret_key");
}
function display_recaptcha_content() {
 echo __('<p>Necesitas <a href="https://www.google.com/recaptcha/admin" rel="external">registrar tu dominio</a> y obtener las claves para hacer que este plugin funcione.</p>');
 echo __("Introduce los detalles de las clave abajo");
}
function display_captcha_site_key_element() { ?>
 <input type="text" name="captcha_site_key" id="captcha_site_key" value="<?php echo get_option('captcha_site_key'); ?>" />
<?php }
function display_captcha_secret_key_element() { ?>
 <input type="text" name="captcha_secret_key" id="captcha_secret_key" value="<?php echo get_option('captcha_secret_key'); ?>" />
<?php }
add_action("admin_init", "display_recaptcha_options");

recaptcha-opcionesEsta página muestra la configuración de dos campos de entrada de texto. Estos campos son para la clave del sitio y la clave secreta.

Estas claves se almacenan como opciones de WordPress. Nombramos las opciones como site_key y secret_key.

Si en estos momentos, activas el plugin verás la opción nueva en el menú de la izquierda. Si accedes, verás la página de bienvenida/configuración del plugin donde puedes poner las claves.

Nota

Puede que te de este error al activarlo

“El plugin ha generado 3 caracteres de salida inesperada durante la activación. Si te sale el mensaje de advertencia “headers already sent” (cabeceras ya enviadas), problemas con las feeds u otros problemas, prueba a desactivar o eliminar este plugin.”

En mi caso la solución fue codificar el archivo con codificación ANSI, y resuelto.

Integrar No Captcha reCaptcha en WordPress

Una vez rellenados los datos de las claves sólo resta mostrar el noCaptcha Recaptcha.

Integrando No Captcha reCaptcha en el Formulario de acceso WP

Necesitamos integrar reCaptcha en el formulario de inicio de sesión de administrador para evitar que los robots ejecuten un ataque de fuerza bruta para descifrar contraseñas. Este es el código para integrarlo.

function login_recaptcha_script() {
 wp_register_script("recaptcha_login", "https://www.google.com/recaptcha/api.js");
 wp_enqueue_script("recaptcha_login");
}
add_action("login_enqueue_scripts", "login_recaptcha_script");
function mostrar_login_captcha() { ?>
 <div class="g-recaptcha" data-sitekey="<?php echo get_option('captcha_site_key'); ?>"></div>
<?php }
add_action( "login_form", "mostrar_login_captcha" );
function verificar_login_captcha($user, $password) {
 if (isset($_POST['g-recaptcha-response'])) {
 $recaptcha_secret = get_option('captcha_secret_key');
 $response = wp_remote_get("https://www.google.com/recaptcha/api/siteverify?secret=". $recaptcha_secret ."&response=". $_POST['g-recaptcha-response']);
 $response = json_decode($response["body"], true);
 if (true == $response["success"]) {
 return $user;
 } else {
 return new WP_Error("Captcha Invalid", __("<strong>ERROR</strong>: Eres un bot"));
 } 
 } else {
 return new WP_Error("Captcha Invalid", __("<strong>ERROR</strong>: Eres un bot. Si no lo eres, habilita JavaScript"));
 } 
}
add_filter("wp_authenticate_user", "verificar_login_captcha", 10, 2);

Vamos a ver cómo funciona el código de seguridad:

recaptcha-acceso-wpHacemos una llamada al archivo de Google reCaptcha JavaScript en el formulario de acceso a la administración WordPress mediante el uso de la acción login_enqueue_scripts.

Mostramos la casilla de verificación, con la acción login_form.

Antes de producir la autenticación Resultado final WordPress usa el filtro wp_authenticate_user para que podamos añadir un paso de validación adicional. Comprobamos si el usuario es bot o humano dentro de este filtro.

Si es humano volvemos el objeto de usuario demás volvemos y WordPress objeto de error.

 

Fuente

Perishablepress

 

Referencias WordPress

wp_authenticate_user

wp_enqueue_scripts

wp_remote_get

add_action

Y tú. ¿Usas noCaptcha reCaptcha en WordPress?

Comenta, comparte, difunde. Gracias

Carlos A para FreelanceEvolution®

 

Deja un comentario

Your email address will not be published.Los campos requeridos están marcados *