{"id":28913,"date":"2021-06-03T17:44:00","date_gmt":"2021-06-03T14:44:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28913"},"modified":"2021-10-17T16:29:35","modified_gmt":"2021-10-17T13:29:35","slug":"integre-google-invisible-recaptcha-con-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/integre-google-invisible-recaptcha-con-php\/","title":{"rendered":"Integre Google Invisible reCAPTCHA con PHP"},"content":{"rendered":"

Hoy en d\u00eda es necesario agregar captcha en los formularios del sitio web. De lo contrario, su bandeja de entrada y su base de datos se llenan de toneladas de spam. Simplemente desperdicia nuestro tiempo en la limpieza de correos electr\u00f3nicos y tambi\u00e9n ocupa espacio adicional en la base de datos del servidor.<\/p>\n

Google reCAPTCHA es una mejor manera de proteger sus formularios contra los bots. Con reCAPTCHA, proceder\u00e1 con sus formularios solo si tiene interacciones humanas reales.<\/p>\n

En este art\u00edculo, estudiamos c\u00f3mo integrar Google Invisible reCAPTCHA en los formularios de su sitio web con PHP. En el caso de Invisible reCAPTCHA, sus visitantes no necesitan resolver acertijos. Necesita validar la solicitud en segundo plano en el lado del servidor.<\/p>\n

Registre el sitio y obtenga claves API<\/h3>\n

Para comenzar, registre su sitio aqu\u00ed – <\/a>https:\/\/www.google.com\/recaptcha\/admin<\/a>.<\/p>\n

Elija una opci\u00f3n ‘Insignia reCAPTCHA invisible’ de ‘reCAPTCHA v2’.<\/p>\n

\"Integre<\/a><\/p>\n

Agrega tu dominio de la misma forma. Puede insertar tantos dominios como desee. Para un servidor local, agrega el dominio como localhost. Al enviar un formulario, obtendr\u00e1 las claves API. Copie estas claves. Ser\u00e1 necesario en los siguientes pasos.<\/p>\n

\"Integre<\/a><\/p>\n

Integre Google Invisible reCAPTCHA<\/h3>\n

Para agregar un reCAPTCHA invisible en el formulario, se requiere un enfoque un poco diferente. Tenemos que pasar atributos de datos al bot\u00f3n y enviar el formulario usando JavaScript de la siguiente manera.<\/p>\n

<form method=\"post\" id=\"userForm\">\n\u00a0\u00a0\u00a0\u00a0<p><input type=\"text\" class=\"form-control\" name=\"fullname\" placeholder=\"Enter full name\" \/><\/p>\n\u00a0\u00a0\u00a0\u00a0<p><button class=\"g-recaptcha btn btn-primary\" data-sitekey=\"YOUR_SITE_KEY\" data-callback=\"submitForm\">Submit<\/button><\/p>\n<\/form>\n\u00a0\n<script src='https:\/\/www.google.com\/recaptcha\/api.js'><\/script>\n<script>\nfunction submitForm() {\n\u00a0\u00a0\u00a0\u00a0document.getElementById('userForm').submit();\n}\n<\/script><\/code><\/pre>\n
Este c\u00f3digo agrega reCAPTCHA invisible en su formulario. Si vuelve a cargar la p\u00e1gina, ver\u00e1 el logotipo de reCAPTCHA en la esquina inferior derecha de la p\u00e1gina.<\/p>\n
Aqu\u00ed, hemos pasado la clave del sitio reCAPTCHA al atributo ‘data-sitekey’ y el nombre del m\u00e9todo ‘submitForm’ al atributo ‘data-callback’. Cuando el usuario hace clic en el bot\u00f3n, llama al m\u00e9todo de devoluci\u00f3n de llamada que env\u00eda un formulario utilizando JavaScript.<\/p>\n
Ahora es el momento de la validaci\u00f3n del lado del servidor. Verificaremos el valor de la respuesta reCAPTCHA con la URL de la API de Google de la siguiente manera.<\/p>\n
if (isset($_POST['g-recaptcha-response'])) {\n\u00a0\u00a0\u00a0\u00a0$secret_key = 'YOUR_SECRET_KEY';\n\u00a0\u00a0\u00a0\u00a0$url = 'https:\/\/www.google.com\/recaptcha\/api\/siteverify?secret='.$secret_key.'&response='.$_POST['g-recaptcha-response'];\n\u00a0\u00a0\u00a0\u00a0$curl = curl_init();\n\u00a0\u00a0\u00a0\u00a0curl_setopt($curl, CURLOPT_URL, $url);\n\u00a0\u00a0\u00a0\u00a0curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);\n\u00a0\u00a0\u00a0\u00a0curl_setopt($curl, CURLOPT_HEADER, false);\n\u00a0\u00a0\u00a0\u00a0$data = curl_exec($curl);\n\u00a0\u00a0\u00a0\u00a0curl_close($curl);\n\u00a0\u00a0\u00a0\u00a0$responseCaptchaData = json_decode($data);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if($responseCaptchaData->success) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo 'Captcha verified';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/proceed with form values\n\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo 'Verification failed';\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Cuando un humano real env\u00eda su formulario, genera una respuesta reCAPTCHA que luego el c\u00f3digo anterior verifica con la API de Google. Si el formulario se env\u00eda a trav\u00e9s de bots, la verificaci\u00f3n anterior falla. Debe continuar con el formulario solo en caso de que la respuesta sea correcta.<\/p>\n
Nuestro c\u00f3digo final es el siguiente.<\/p>\n
<?php\nif (isset($_POST['g-recaptcha-response'])) {\n\u00a0\u00a0\u00a0\u00a0$secret_key = 'YOUR_SECRET_KEY';\n\u00a0\u00a0\u00a0\u00a0$url = 'https:\/\/www.google.com\/recaptcha\/api\/siteverify?secret='.$secret_key.'&response='.$_POST['g-recaptcha-response'];\n\u00a0\u00a0\u00a0\u00a0$curl = curl_init();\n\u00a0\u00a0\u00a0\u00a0curl_setopt($curl, CURLOPT_URL, $url);\n\u00a0\u00a0\u00a0\u00a0curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);\n\u00a0\u00a0\u00a0\u00a0curl_setopt($curl, CURLOPT_HEADER, false);\n\u00a0\u00a0\u00a0\u00a0$data = curl_exec($curl);\n\u00a0\u00a0\u00a0\u00a0curl_close($curl);\n\u00a0\u00a0\u00a0\u00a0$responseCaptchaData = json_decode($data);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if($responseCaptchaData->success) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo 'Captcha verified';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/proceed with form values\n\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo 'Verification failed';\n\u00a0\u00a0\u00a0\u00a0}\n}\n?>\n<form method=\"post\" id=\"userForm\">\n\u00a0\u00a0\u00a0\u00a0<p><input type=\"text\" class=\"form-control\" name=\"fullname\" placeholder=\"Enter full name\" \/><\/p>\n\u00a0\u00a0\u00a0\u00a0<p><button class=\"g-recaptcha btn btn-primary\" data-sitekey=\"YOUR_SITE_KEY\" data-callback=\"submitForm\">Submit<\/button><\/p>\n<\/form>\n\u00a0\n<script src='https:\/\/www.google.com\/recaptcha\/api.js'><\/script>\n<script>\nfunction submitForm() {\n\u00a0\u00a0\u00a0\u00a0document.getElementById('userForm').submit();\n}\n<\/script><\/code><\/pre>\n
\u00a1Eso es! Disfrute de formularios libres de spam en su sitio web. Me gustar\u00eda escuchar sus pensamientos y sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n