{"id":1352,"date":"2019-12-01T12:00:00","date_gmt":"2019-12-01T11:00:00","guid":{"rendered":"https:\/\/agenciaseonetbulb.com\/noticias\/?p=1352"},"modified":"2024-11-05T15:14:20","modified_gmt":"2024-11-05T14:14:20","slug":"tutorial-para-configurar-google-recaptcha-v3-ejemplo-en-php","status":"publish","type":"post","link":"https:\/\/agenciaseonetbulb.com\/noticias\/tutorial-para-configurar-google-recaptcha-v3-ejemplo-en-php\/","title":{"rendered":"Tutorial para configurar Google reCAPTCHA V3. Ejemplo en PHP"},"content":{"rendered":"<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"200\" height=\"200\" src=\"https:\/\/agenciaseonetbulb.com\/noticias\/wp-content\/uploads\/2020\/01\/hero-recaptcha-invisible.gif\" alt=\"\" class=\"wp-image-1358\" title=\"\"><\/figure>\n<\/div>\n\n\n<p>Recientemente he tenido que configurar&nbsp;<strong>Google reCaptcha v3<\/strong>&nbsp;para un cliente por motivos de spam y a continuaci\u00f3n os damos la soluci\u00f3n que hemos realizado.<\/p>\n\n\n\n<p>Google lanz\u00f3 en 2018 reCAPTCHA v3 para evitar bots de spam sin ninguna interacci\u00f3n del usuario.<\/p><br \/><iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/tbvxFW4UJdU\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe>\n\n\n\n<p>En este tutorial, os mostrar\u00e9 c\u00f3mo integrar Google reCAPTCHA v3 en tu p\u00e1gina web.&nbsp;<br \/><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Registra tu p\u00e1gina web y obt\u00e9n la clave secreta<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"464\" src=\"https:\/\/agenciaseonetbulb.com\/noticias\/wp-content\/uploads\/2020\/01\/tutorial-configurar-Google-reCAPTCHA-V3-1024x464.jpg\" alt=\"\" class=\"wp-image-1357\" title=\"\" srcset=\"https:\/\/agenciaseonetbulb.com\/noticias\/wp-content\/imagenes\/2020\/01\/tutorial-configurar-Google-reCAPTCHA-V3-1024x464.jpg 1024w, https:\/\/agenciaseonetbulb.com\/noticias\/wp-content\/imagenes\/2020\/01\/tutorial-configurar-Google-reCAPTCHA-V3-300x136.jpg 300w, https:\/\/agenciaseonetbulb.com\/noticias\/wp-content\/imagenes\/2020\/01\/tutorial-configurar-Google-reCAPTCHA-V3.jpg 1854w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Lo primero que tienes que hacer es registrar tu p\u00e1gina web en Google reCAPTCHA. Para ello puedes hacerlo pinchando&nbsp;<strong><a rel=\"noreferrer noopener\" href=\"https:\/\/www.google.com\/recaptcha\/admin\" target=\"_blank\">aqu\u00ed<\/a><\/strong>. <\/p>\n\n\n\n<p> Para ello, necesitar\u00e1s inicar sesi\u00f3n en tu cuenta de Google y crea la aplicaci\u00f3n completando el formulario.&nbsp;Seleccione el reCAPTCHA v3 y seleccione la casilla de verificaci\u00f3n \u00abNo soy un robot\u00bb. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"557\" src=\"https:\/\/agenciaseonetbulb.com\/noticias\/wp-content\/uploads\/2020\/01\/tutorial-onfigurar-Google-reCAPTCHA-V3-1024x557.jpg\" alt=\"\" class=\"wp-image-1353\" title=\"\" srcset=\"https:\/\/agenciaseonetbulb.com\/noticias\/wp-content\/imagenes\/2020\/01\/tutorial-onfigurar-Google-reCAPTCHA-V3-1024x557.jpg 1024w, https:\/\/agenciaseonetbulb.com\/noticias\/wp-content\/imagenes\/2020\/01\/tutorial-onfigurar-Google-reCAPTCHA-V3-300x163.jpg 300w, https:\/\/agenciaseonetbulb.com\/noticias\/wp-content\/imagenes\/2020\/01\/tutorial-onfigurar-Google-reCAPTCHA-V3.jpg 1854w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"> <a href=\"https:\/\/www.google.com\/recaptcha\/admin\/create\" target=\"_blank\" rel=\"noopener\">https:\/\/www.google.com\/recaptcha\/admin\/create<\/a> <\/figcaption><\/figure>\n\n\n\n<p>Una vez enviado, Google te proporcionar\u00e1 las siguientes dos informaciones.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Clave del sitio<\/li>\n\n\n\n<li>Llave secreta<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"535\" src=\"https:\/\/agenciaseonetbulb.com\/noticias\/wp-content\/uploads\/2020\/01\/configurar-Google-reCAPTCHA-V3-1024x535.jpg\" alt=\"\" class=\"wp-image-1354\" title=\"\" srcset=\"https:\/\/agenciaseonetbulb.com\/noticias\/wp-content\/imagenes\/2020\/01\/configurar-Google-reCAPTCHA-V3-1024x535.jpg 1024w, https:\/\/agenciaseonetbulb.com\/noticias\/wp-content\/imagenes\/2020\/01\/configurar-Google-reCAPTCHA-V3-300x157.jpg 300w, https:\/\/agenciaseonetbulb.com\/noticias\/wp-content\/imagenes\/2020\/01\/configurar-Google-reCAPTCHA-V3.jpg 1854w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo integrar Google reCAPTCHA en tu p\u00e1gina web<\/h2>\n\n\n\n<p>Para integrar google reCAPTCHA en tu p\u00e1gina web, debes colocarlo en el lado del cliente y en el lado del servidor.&nbsp;En la p\u00e1gina HTML del cliente, debes integrar esta l\u00ednea entre las etiquetas&nbsp;<em>&lt;head&gt;&lt;\/head&gt;<\/em>&nbsp;de la p\u00e1gina del formulario <\/p>\n\n\n\n<p> \ud83d\udcc4  <strong>DESCARGAR C\u00d3DIGO<\/strong> | <a href=\"https:\/\/agenciaseonetbulb.com\/documentos\/codigo-google-reCAPTCHA.txt\">https:\/\/bit.ly\/codigoGoogleReCAPTCHA <\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src='https:\/\/www.google.com\/recaptcha\/api.js?render=CLAVE_SITIO_WEB'&gt; \n&lt;\/script&gt;\n&lt;script&gt;\n    grecaptcha.ready(function() {\n    grecaptcha.execute('CLAVE_SITIO_WEB', {action: 'formulario'})\n    .then(function(token) {\n    var recaptchaResponse = document.getElementById('recaptchaResponse');\n    recaptchaResponse.value = token;\n    });});\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p><em>* Reemplace &#8216;<\/em>CLAVE_SITIO_WEB<em>&#8216; con la clave que se le proporcion\u00f3 en el panel de control de reCAPTCHA <\/em><\/p>\n\n\n\n<p>Luego ponemos un campo oculto en el formulario para el <em>reCAPTCH<\/em>A:<\/p>\n\n\n\n<p> \ud83d\udcc4<strong> DESCARGAR<\/strong> | <a href=\"https:\/\/agenciaseonetbulb.com\/documentos\/recapcha.txt\" target=\"_blank\" rel=\"noreferrer noopener\"> https:\/\/bit.ly\/CampoOculto<\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"hidden\" name=\"recaptcha_response\" id=\"recaptchaResponse\"&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Insertar <em>reCAPTCHA <\/em>  en PHP para la integraci\u00f3n del lado del servidor<\/h2>\n\n\n\n<p>A continuaci\u00f3n os dejamos dos m\u00e9todos para insertarlo ya que los servidores o distintos hostings pueden tener distinta configuraci\u00f3n y tendr\u00e1s que utilizar uno u otro c\u00f3digo de reCaptcha v3:<\/p>\n\n\n\n<p><strong>M\u00c9TODO 1<\/strong><\/p>\n\n\n\n<p>\ud83d\udcc4<strong> DESCARGAR C\u00d3DIGO 1<\/strong> | <a href=\"https:\/\/agenciaseonetbulb.com\/documentos\/codigo-1-ReCAPTCHA.txt\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/bit.ly\/codigo1ReCAPTCHA<\/a> <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (isset($_POST&#91;'action']) &amp;&amp; ($_POST&#91;'action'] == 'process')) {\n\n$recaptcha_url = 'https:\/\/www.google.com\/recaptcha\/api\/siteverify'; \n$recaptcha_secret = 'CLAVE_SECRETA'; \n$recaptcha_response = $_POST&#91;'recaptcha_response']; \n$recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&amp;response=' . $recaptcha_response); \n$recaptcha = json_decode($recaptcha); \n\nif($recaptcha-&gt;score &gt;= 0.7){\n\n  \/\/ c\u00f3digo para procesar los campos y enviar el form\n\n} else {\n\n  \/\/ c\u00f3digo para lanzar aviso de error en el env\u00edo\n\n}\n\n}<\/code><\/pre>\n\n\n\n<p><strong>M\u00c9TODO 2<\/strong><\/p>\n\n\n\n<p>\ud83d\udcc4  <strong>DESCARGAR C\u00d3DIGO 2<\/strong> |  <a href=\"https:\/\/agenciaseonetbulb.com\/documentos\/codigo-2-ReCAPTCHA.txt\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/bit.ly\/codigo2ReCAPTCHA <\/a> <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$recaptcha_secret = 'CLAVE_SECRETA'; \n$recaptcha_response = $_POST&#91;'recaptcha_response']; \n$url = 'https:\/\/www.google.com\/recaptcha\/api\/siteverify'; \n\n$data = array( 'secret' =&gt; $recaptcha_secret, 'response' =&gt; $recaptcha_response, 'remoteip' =&gt; $_SERVER&#91;'REMOTE_ADDR'] ); \n$curlConfig = array( CURLOPT_URL =&gt; $url, CURLOPT_POST =&gt; true, CURLOPT_RETURNTRANSFER =&gt; true, CURLOPT_POSTFIELDS =&gt; $data ); \n$ch = curl_init(); \ncurl_setopt_array($ch, $curlConfig); \n$response = curl_exec($ch); \ncurl_close($ch);\n\n$jsonResponse = json_decode($response);\nif ($jsonResponse-&gt;success === true) { \n    \/\/ C\u00f3digo para procesar el formulario\n} else {\n   \/\/ C\u00f3digo para aviso de error\n}<\/code><\/pre>\n\n\n\n<p> <em>* Reemplace &#8216;<\/em>CLAVE_SECRETA<em>&#8216; con la clave que se le proporcion\u00f3 en el panel de control de reCAPTCHA <\/em> <\/p>\n\n\n\n<p>Una vez realizado este proceso. Cuando entres en la p\u00e1gina web, ver\u00e1 en el extremo derecho un \u00edcono de Google reCAPTCHA:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"282\" height=\"98\" src=\"https:\/\/agenciaseonetbulb.com\/noticias\/wp-content\/uploads\/2020\/01\/integrar-google-recaptcha-v3.png\" alt=\"\" class=\"wp-image-1356\" style=\"width:163px;height:57px\" title=\"\"><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p> M\u00e1s informaci\u00f3n |&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/developers.google.com\/recaptcha\" target=\"_blank\">https:\/\/developers.google.com\/recaptcha<\/a> <\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Recientemente he tenido que configurar&nbsp;Google reCaptcha v3&nbsp;para un cliente por motivos de spam y a continuaci\u00f3n os damos la soluci\u00f3n que hemos realizado. Google lanz\u00f3 en 2018 reCAPTCHA v3 para evitar bots de spam sin ninguna interacci\u00f3n del usuario. En este tutorial, os mostrar\u00e9 c\u00f3mo integrar Google reCAPTCHA v3 en tu p\u00e1gina web.&nbsp; Registra tu [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":1359,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[11],"tags":[390,168],"class_list":{"0":"post-1352","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-diseno-web","8":"tag-recaptcha","9":"tag-tutoriales"},"acf":[],"_links":{"self":[{"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/posts\/1352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/comments?post=1352"}],"version-history":[{"count":2,"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/posts\/1352\/revisions"}],"predecessor-version":[{"id":5928,"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/posts\/1352\/revisions\/5928"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/media\/1359"}],"wp:attachment":[{"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/media?parent=1352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/categories?post=1352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/tags?post=1352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}