{"id":29068,"date":"2021-06-07T13:40:00","date_gmt":"2021-06-07T10:40:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29068"},"modified":"2021-10-17T16:25:22","modified_gmt":"2021-10-17T13:25:22","slug":"una-guia-para-agregar-google-recaptcha-v3-a-su-sitio-web-de-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/una-guia-para-agregar-google-recaptcha-v3-a-su-sitio-web-de-laravel\/","title":{"rendered":"Una gu\u00eda para agregar Google reCAPTCHA v3 a su sitio web de Laravel"},"content":{"rendered":"

En el pasado, publiqu\u00e9 un art\u00edculo sobre c\u00f3mo agregar Google reCAPTCHA a los formularios de Laravel<\/a>. Luego, Google ha tra\u00eddo la pr\u00f3xima versi\u00f3n v3 de reCAPTCHA. Uno de nuestros lectores pregunt\u00f3 c\u00f3mo integrar reCAPTCHA v3 en una aplicaci\u00f3n de Laravel.<\/p>\n

reCAPTCHA v3 tiene un comportamiento ligeramente diferente. A diferencia de la versi\u00f3n anterior de reCAPTCHA, no es necesario que coloque captcha dentro de su formulario. En esta versi\u00f3n, sus visitantes no necesitan resolver un rompecabezas. En su lugar, ver\u00e1 el icono de reCAPTCHA en la esquina inferior derecha de su sitio web. Esta versi\u00f3n v3 de reCAPTCHA lucha contra los bots en segundo plano. Lo m\u00e1s importante es que no es necesario agregar captcha en todos los formatos. Solo agr\u00e9guelo una vez y proteger\u00e1 todas las formas de su sitio web.<\/p>\n

En este art\u00edculo, estudiamos c\u00f3mo un usuario puede agregar reCAPTCHA v3 a su sitio web de Laravel. Agregar reCAPTCHA protege su sitio web de bots y spam.<\/p>\n

Obtenga la clave del sitio y la clave secreta de reCAPTCHA<\/h3>\n

Para comenzar, primero debe registrar su sitio con Google reCAPTCHA. Vaya a Google reCAPTCHA<\/a> y haga clic en el icono ‘+’ para registrar su sitio. En la p\u00e1gina siguiente, agregue el dominio de su sitio web, elija la opci\u00f3n ‘reCAPTCHA v3’. Si desea probarlo en un servidor local, al campo de dominio debe agregar ‘localhost’.<\/p>\n

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

Una vez que presione el bot\u00f3n de enviar, obtendr\u00e1 la clave del sitio y la clave secreta. Copie estas claves. Requerir\u00e1n los siguientes pasos.<\/p>\n

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

Instalar y configurar la biblioteca reCAPTCHA de Laravel<\/h3>\n

Dir\u00edgete a tu proyecto Laravel e instala la biblioteca de biscolab,<\/a> que est\u00e1 dise\u00f1ada para integrar reCAPTCHA en Laravel. Abra la terminal en el directorio ra\u00edz de su proyecto y ejecute el comando:<\/p>\n

composer require biscolab\/laravel-recaptcha<\/code><\/pre>\n
Tras la instalaci\u00f3n de la biblioteca, publique el archivo de configuraci\u00f3n utilizando el comando a continuaci\u00f3n.<\/p>\n
php artisan vendor:publish --provider=\"BiscolabReCaptchaReCaptchaServiceProvider\"<\/code><\/pre>\n
Abra el .env<\/code>archivo en su editor y agregue su sitio y las claves secretas de reCAPTCHA como se muestra a continuaci\u00f3n.<\/p>\n
RECAPTCHA_SITE_KEY=ADD_YOUR_SITE_KEY\nRECAPTCHA_SECRET_KEY=ADD_YOUR_SECRET_KEY<\/code><\/pre>\n
Aseg\u00farese de reemplazar los marcadores de posici\u00f3n ‘ADD_YOUR_SITE_KEY’ y ‘ADD_YOUR_SECRET_KEY’ con los valores reales. A continuaci\u00f3n, abra config\/recaptcha.php<\/code>y configure la versi\u00f3n en v3.<\/p>\n
return [\n\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0'version' => 'v3',\n\u00a0\u00a0\u00a0\u00a0...\n];<\/code><\/pre>\n
Despu\u00e9s de esto, borre la cach\u00e9 de configuraci\u00f3n usando el comando:<\/p>\n
php artisan config:cache<\/code><\/pre>\n
Agregue Google reCAPTCHA v3 a su sitio web de Laravel<\/h3>\n
Hemos terminado con toda la configuraci\u00f3n y todo listo para agregar reCAPTCHA en el sitio web. Para esto, primero debe agregar la metaetiqueta HTML para csrf-token en la secci\u00f3n principal.<\/p>\n
<meta name=\"csrf-token\" content=\"{{ csrf_token() }}\"><\/code><\/pre>\n
Si su sitio web ya agreg\u00f3 esta etiqueta, simplemente ignore el paso anterior. Luego, inserte el htmlScriptTagJsApi()<\/code>ayudante antes de cerrar la etiqueta de la cabeza.<\/p>\n
<!DOCTYPE html>\n<html>\n\u00a0\u00a0\u00a0\u00a0<head>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{!! htmlScriptTagJsApi() !!}\n\u00a0\u00a0\u00a0\u00a0<\/head><\/code><\/pre>\n
Ahora vaya a su sitio web, vuelva a cargarlo y deber\u00eda ver el icono de reCAPTCHA en la esquina inferior derecha de una p\u00e1gina. Significa que su sitio web ahora est\u00e1 protegido con Google reCAPTCHA.<\/p>\n
Ha terminado de agregar Google reCAPTCHA en su sitio web de Laravel. Para mayor curiosidad, si desea ver la respuesta de reCAPTCHA, debe modificar ligeramente el c\u00f3digo en la etiqueta principal.<\/p>\n
<head>\n...\n<meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\n<script type=\"text\/javascript\">\nfunction callbackThen(response){\n\u00a0\u00a0\u00a0\u00a0\/\/ read HTTP status\n\u00a0\u00a0\u00a0\u00a0console.log(response.status);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ read Promise object\n\u00a0\u00a0\u00a0\u00a0response.json().then(function(data){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(data);\n\u00a0\u00a0\u00a0\u00a0});\n}\nfunction callbackCatch(error){\n\u00a0\u00a0\u00a0\u00a0console.error('Error:', error)\n}\n<\/script>\n\u00a0\n{!! htmlScriptTagJsApi([\n\u00a0\u00a0\u00a0\u00a0'callback_then' => 'callbackThen',\n\u00a0\u00a0\u00a0\u00a0'callback_catch' => 'callbackCatch'\n]) !!}\n<\/head><\/code><\/pre>\n
Vuelva a cargar la p\u00e1gina y verifique en la consola del navegador, ver\u00e1 la respuesta del reCAPTCHA de Google. En mi caso, se muestra como una captura de pantalla a continuaci\u00f3n.<\/p>\n
\"Una<\/a><\/p>\n
Art\u00edculos relacionados<\/h4>\n