El nuevo precio de Google reCAPTCHA se implementará el 1 de agosto, lo que significa que le quedan unos días para migrar a una alternativa más económica o asegurarse de que su cuenta bancaria esté bien financiada.

A partir de $1 por 1000 verificaciones, va a costar mucho. En Mailmeteor, utilizamos ampliamente reCAPTCHA para proteger nuestros servicios de los bots. Con el cambio de precios de Google, calculamos que estamos a punto de pagar miles de dólares al mes para seguir usando su servicio reCAPTCHA.

¿Qué es un CAPTCHA?

Los CAPTCHA son una parte esencial de la web. Su objetivo es separar a los buenos ciudadanos de los malos actores. Básicamente, es un servicio que operará en el frontend y generará un token que se transmite al backend. Luego, el backend verifica que el token sea legítimo y, de ser así, realiza la acción.

Google hizo un gran trabajo promocionando su propio servicio, pero afortunadamente, existen algunas alternativas:

1. hCaptcha. Lo consideramos al principio, pero su precio es bastante similar al del nuevo Google.
2. Torniquete Cloudflare. Somos grandes admiradores de Cloudflare y definitivamente lo investigamos. Por ahora, es un servicio gratuito.

Vamos a profundizar en.

Alejándonos de Google reCAPTCHA...

Una de nuestras herramientas gratuitas es un escritor de correo electrónico con IA. Básicamente es una página HTML que envía una solicitud a nuestro backend, que luego se dirige a una solución de inteligencia artificial de terceros.

Para protegerlo del abuso, Google reCAPTCHA se habilitó desde el primer día. Así es como se realizó la verificación hasta ahora (backend):

// index.js
app.post('/api/email-ai-writer', recaptcha.middleware.verify, aiEmailWriter)

// ai_email_writer.js
async function aiEmailWriter(request, response) {
  try {
    // Recaptcha
    if (!request.recaptcha || request.recaptcha.error || !request.recaptcha.data) {
      console.warn('Recaptcha: verification failed.')
      return response.status(403).send({ error: true, message: 'Recaptcha: verification failed' })
    } else if (request.recaptcha.data.action !== 'aiemailwriter') {
      console.warn('Recaptcha: bad action name')
      return response.status(403).send({ error: true, message: 'Recaptcha: bad action name' })
    } else if (request.recaptcha.data.score 



Eso es bastante simple y es una parte esencial de por qué Google reCAPTCHA fue tan popular. El espacio que ocupa es muy limitado y es realmente fácil de implementar. Para los más curiosos, aprovechamos el paquete express-recaptcha para que sea realmente fácil de implementar.


  
  
  ... al torniquete Cloudflare


Al migrar a Turnstile, no pudimos encontrar un paquete NPM, por lo que tuvimos que escribir un middleware para procesar el token. Así es como se ve:


// middlewares/turnstile.js
const turnstile = async (request, response, next) => {
  try {
    // Turnstile injects a token in "cf-turnstile-response".
    const token = request.query['cf-turnstile-response']
    const ip = request.header('CF-Connecting-IP')

    if (!token) {
      throw new Error('Missing CloudFlare Turnstile Token')
    }

    // Validate the token by calling the
    // "/siteverify" API endpoint.
    const formData = new FormData()
    formData.append('secret', process.env.CLOUDFLARE_TURNSTILE_SECRET_KEY)
    formData.append('response', token)
    if (ip) formData.append('remoteip', ip)

    const url = 'https://challenges.cloudflare.com/turnstile/v0/siteverify'
    const result = await fetch(url, {
      body: formData,
      method: 'POST',
    })

    // Process the verification outcome
    const outcome = await result.json()

    if (!outcome.success) {
      throw new Error('CloudFlare Turnstile declined the token')
    }

    request.turnstile = outcome

    // If authentified, go to next middleware
    next()
  } catch (err) {
    console.error(err)
    return response.status(403).send('Forbidden')
  }
}

export { turnstile }




Una vez que el middleware esté implementado, podemos aplicarlo a cualquier solicitud:


// index.js
app.post('/api/ai-email-writer', aiRateLimiter, turnstile, aiEmailWriter)




Y dentro de la función que trata la solicitud, es bastante similar a la que teníamos anteriormente:


// ai_email_writer.js
async function aiEmailWriter(request, response) {
  try {
    // CloudFlare Turnstile protection
    if (!request.turnstile || request.turnstile.error) {
      console.warn('Recaptcha: verification failed.')
      return response.status(403).json({ error: true, message: 'Recaptcha: verification failed' })
    } else if (request.turnstile.action !== 'aiemailwriter') {
      console.warn('Recaptcha: bad action name')
      return response.status(403).json({ error: true, message: 'Recaptcha: bad action name' })
    }

    ...





  
  
  Conclusión


La migración de reCAPTCHA a Turnstile es sencilla y no debería llevar más de unas pocas horas. Funciona de manera bastante similar y definitivamente le permitirá ahorrar mucho dinero al mismo tiempo.

No cubrí la interfaz en este artículo porque usamos un widget invisible que nuestros usuarios no ven. Pero la documentación de Turnstile cubre ampliamente cómo usar sus widgets interactivos.

¡Terminar!