Veamos c\u00f3mo podemos a\u00f1adir reCaptcha a un formulario personalizado de WordPress sin plugins, es decir, en un desarrollo de sitio web personalizado. Para instalar la \u00faltima versi\u00f3n de google reCaptcha (el \u00abno soy un robot\u00bb), es necesario tener una cuenta de google y acceder a Google reCaptcha.<\/p>\n\n\n\n
Una vez registrado, se accede al panel de administraci\u00f3n del sitio, donde se muestran tres opciones:<\/p>\n\n\n\n
Claves: clave del sitio y clave secreta
Paso 1: Migraci\u00f3n del lado del cliente
Paso 2: Migraci\u00f3n del lado del servidor<\/p>\n\n\n\n
Vamos a crear un sencillo formulario con un campo Nombre para mostrar en un ejemplo pr\u00e1ctico c\u00f3mo a\u00f1adir Google reCaptcha:<\/p>\n\n\n\n
<form id=\"contact-form\" name=\"contact-form\" action=\"<?php echo get_permalink();?>#contact-form\" method=\"post\">\n<?php \/\/Comprobamos si el formulario ha sido enviado\nif (isset( $_POST['btn-submit'] )) {\n\/\/Crear una variable para almacenar los errores\nglobal $reg_errors;\n$reg_errors = new WP_Error;\n\n\/\/ Recogemos en las variables los datos enviados en el formulario y los saneamos.\n\/\/ Si detectamos alg\u00fan error, podemos rellenar los campos del formulario con los datos enviados, para no tener que empezar el formulario desde cero\n$f_name = sanitize_text_field($_POST['f_name']);\n\n\/\/El campo Nombre es obligatorio, comprobamos que no est\u00e9 vac\u00edo y si no, creamos un registro de error\nif ( empty( $f_name ) ) {\n$reg_errors->add(\"nombre-vac\u00edo\", \"El campo nombre es obligatorio\")\n}\n\/\/ Comprobar el recaptcha\n$response = wp_remote_post( \"https:\/\/www.google.com\/recaptcha\/api\/siteverify\", array(\n'method' => 'POST',\n'timeout' => 45,\n'redirecci\u00f3n' => 5,\n'httpversion' => '1.0',\n'bloqueo' => true,\n'headers' => array(),\n'body' => array(\n'secret' => \"su clave secreta\",\n'response' => esc_attr($_POST['g-recaptcha-response'])),\n'cookies' => array()\n)\n);\n\n\/\/Verificamos se h\u00e1 algum tipo de erro na conex\u00e3o com o google\nif ( is_wp_error( $response ) ) {\n$reg_errors->add( \"invalid-captcha\", \"Ocorreu um erro ao verificar o captcha\" );\n} else {\n\/\/Si nos conectamos con \u00e9xito a google, comprobamos si la respuesta es verdadera o falsa\n$g_response = json_decode($response[\"body\"]);\nif ($g_response->success == false) {\n$reg_errors->add( \"invalid-captcha\", \"Se ha producido un error al comprobar el captcha\" );\n}\n}\n}?>\n\n<div class=\"form-group\">\n<label for=\"f_name\">Nome <span class=\"asterisk\">*<\/span><\/label>\n<input type=\"text\" id=\"f_name\" name=\"f_name\" class=\"form-control\" value=\"<?php echo $f_name;?>\" placeholder=\"Escriba su nombre completo\" required aria-required=\"true\">\n\n<?php \/\/Comprobamos errores en la validaci\u00f3n del campo Nombre\nif ( is_wp_error( $reg_errors ) ) {\nif ($reg_errors->get_error_message(\"empty-name\")) {?>\n<br class=\"clearfix\" \/>\n<div class=\"alert alert-danger alert-dismissable\">\n<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">×<\/button>\n<p><?php echo $reg_errors->get_error_message(\"empty-name\");?><\/p>\n<\/div>\n<?php }\n}?>\n<\/div>\n\n<div class=\"form-group\">\n<div class=\"g-recaptcha\" data-sitekey=\"sua-chave-secreta-do-site\"><\/div>\n<\/div>\n\n<button type=\"submit\" id=\"btn-submit\" name=\"btn-submit\" class=\"btn btn-default\">Enviar<\/button>\n<\/form><\/code><\/pre>\n\n\n\nDespu\u00e9s de a\u00f1adir el JS a la API, para cambiar el color del bot\u00f3n, s\u00f3lo hay que pegar el fragmento con la clave del sitio (esta informaci\u00f3n se puede obtener en el paso 1 del panel reCaptcha):<\/p>\n\n\n\n
Con esto, ya podemos visualizar el c\u00f3digo reCaptcha en nuestro formulario. Para procesar los datos en el servidor, necesitamos hacer una petici\u00f3n a https:\/\/www.google.com\/recaptcha\/api\/siteverify y enviar nuestra respuesta por POST para validarla.<\/p>\n\n\n\n
Como vemos en el c\u00f3digo, nos conectamos a google usando la funci\u00f3n wp_remote_post () y POST la variable g-recaptcha-response, es decir, la respuesta que elegimos en el recaptcha. En primer lugar, validamos si la respuesta con google es correcta o no y si es as\u00ed, comprobamos la respuesta en google. Devolver\u00e1 un json con dos datos: c\u00f3digos de \u00e9xito y de error. El \u00e9xito es verdadero o falso, por lo que sabremos si el reCaptcha que hemos introducido es bueno o no. Tambi\u00e9n obtendremos un c\u00f3digo de error si alguno de los par\u00e1metros de configuraci\u00f3n es incorrecto, lo cual puede ser:<\/p>\n\n\n\n
Missing-input-secret: par\u00e1metro de clave secreta no encontrado
Invalid-input-secret: el par\u00e1metro de la clave secreta es incorrecto
missing-input-response: no se ha encontrado el par\u00e1metro de respuesta
invalid-input-response: el par\u00e1metro de respuesta es incorrecto<\/p>\n","protected":false},"excerpt":{"rendered":"
Veamos c\u00f3mo podemos a\u00f1adir reCaptcha a un formulario personalizado de WordPress sin plugins, es decir, en un desarrollo de sitio web personalizado. Para instalar la \u00faltima versi\u00f3n de google reCaptcha (el \u00abno soy un robot\u00bb), es necesario tener una cuenta de google y acceder a Google reCaptcha. Una vez registrado, se accede al panel de […]<\/p>\n","protected":false},"author":1,"featured_media":937,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-935","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articulos"],"_links":{"self":[{"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/posts\/935","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/comments?post=935"}],"version-history":[{"count":0,"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/posts\/935\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/media\/937"}],"wp:attachment":[{"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/media?parent=935"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/categories?post=935"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/tags?post=935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}