reCAPTCHA v3 muestra una puntuación por cada solicitud sin inconvenientes para el usuario. La puntuación se basa en las interacciones con tu sitio y te permite tomar las medidas adecuadas para tu sitio. Registra las claves de reCAPTCHA v3 en la Consola del administrador de reCAPTCHA.
En esta página, se explica cómo habilitar y personalizar reCAPTCHA v3 en tu página web.
Ubicación en tu sitio web
reCAPTCHA v3 nunca interrumpirá a tus usuarios, por lo que puedes ejecutarlo cuando quieras sin afectarlo conversión. reCAPTCHA funciona mejor cuando tiene más contexto sobre las interacciones con tu sitio que proviene de detectar comportamientos legítimos y abusivos. Por este motivo, te recomendamos incluida la verificación de reCAPTCHA en formularios o acciones, así como en segundo plano de páginas para de análisis de datos en la nube.
Puedes ejecutar reCAPTCHA en tantas acciones como desees en la misma página.
Vincular automáticamente el desafío a un botón
El método más fácil de usar reCAPTCHA v3 en tu página es incluir el el recurso JavaScript necesario y agregarás algunos atributos a tu botón HTML.
Carga la API de JavaScript.
<script src="https://www.google.com/recaptcha/api.js"></script>
Agrega una función de devolución de llamada para controlar el token.
<script> function onSubmit(token) { document.getElementById("demo-form").submit(); } </script>
Agrega atributos al botón HTML.
<button class="g-recaptcha" data-sitekey="reCAPTCHA_site_key" data-callback='onSubmit' data-action='submit'>Submit</button>
Invoca el desafío de forma programática
Si quieres tener más control sobre cuándo se ejecuta reCAPTCHA, puedes usar el
Método execute
en el objeto grecaptcha
. Para ello,
Debes agregar un parámetro render
a la carga de la secuencia de comandos de reCAPTCHA.
Carga la API de JavaScript con tu clave del sitio.
<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
Llama a
grecaptcha.execute
en cada acción que desees proteger.<script> function onClick(e) { e.preventDefault(); grecaptcha.ready(function() { grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) { // Add your logic to submit to your backend server here. }); }); } </script>
Envía el token de inmediato a tu backend con la solicitud a verificar.
Interpreta la puntuación
reCAPTCHA v3 devuelve una puntuación (1.0 es muy probable que sea una interacción buena, 0.0 es muy probable que sea un bot). Según la puntuación, puedes tomar medidas variables según el contexto de tu sitio. Todos los sitios son diferentes, pero a continuación se muestran algunos ejemplos de cómo los sitios utilizan esta puntuación. Como en los ejemplos a continuación, toma realizar acciones en segundo plano en lugar de bloquear el tráfico para proteger mejor tu sitio.
Caso de uso | Recomendación |
---|---|
homepage | Obtén una vista coherente de tu tráfico en la Consola del administrador mientras filtras los scrapers. |
acceder | Con puntuaciones bajas, se requiere autenticación de 2 factores o verificación por correo electrónico para evitar ataques de uso excesivo de credenciales. |
social | Limita las solicitudes de amistad sin responder de usuarios con comportamiento inadecuado y envía los comentarios riesgosos con moderación. |
Comercio electrónico | Priorice sus ventas reales con las de los bots e identifique las transacciones riesgosas. |
reCAPTCHA observa el tráfico real en tu sitio para aprender. Por este motivo, las puntuaciones en una etapa o poco después de la implementación podría ser diferente de la producción. Como reCAPTCHA v3 nunca para interrumpir el flujo de usuarios, primero puedes ejecutar reCAPTCHA sin tomar medidas y, luego, de acuerdo con el tráfico en la Consola del administrador. De predeterminado, puedes usar un umbral de 0.5.
Acciones
reCAPTCHA v3 presenta un concepto nuevo: las acciones. Cuando especificas un nombre de acción En cada lugar en el que ejecutas reCAPTCHA, habilitas las siguientes funciones nuevas:
- Un desglose detallado de los datos de tus diez acciones principales en el Consola del administrador
- Análisis de riesgo adaptativo basado en el contexto de la acción, porque es abusivo el comportamiento de los usuarios puede variar.
Es importante destacar que, cuando verificas la respuesta de reCAPTCHA, debes comprobar que el action name es el nombre que esperas.
Respuesta de verificación del sitio
Realiza la solicitud para verificar el token de respuesta, como con reCAPTCHA v2. reCAPTCHA invisible.
La respuesta es un objeto JSON:
{
"success": true|false, // whether this request was a valid reCAPTCHA token for your site
"score": number // the score for this request (0.0 - 1.0)
"action": string // the action name for this request (important to verify)
"challenge_ts": timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
"hostname": string, // the hostname of the site where the reCAPTCHA was solved
"error-codes": [...] // optional
}
Sugerencias
grecaptcha.ready()
ejecuta tu función cuando se carga la biblioteca de reCAPTCHA. Para Evita las condiciones de carrera con elapi.js
, incluye elapi.js
antes de tu que llamen a grecaptcha o sigan usando la función La devolución de llamada de onload que se define con la API v2.- Intenta conectar la llamada a
execute
con acciones interesantes o sensibles, como Registrarse, Restablecer la contraseña, Comprar o Jugar. - Usa
https://www.google.com/recaptcha/api.js?trustedtypes=true
para cargar código compatible con Trusted Types.