Die neuen Preise für Google reCAPTCHA werden am 1. August eingeführt. Das bedeutet, dass Sie noch ein paar Tage Zeit haben, um auf eine günstigere Alternative umzusteigen oder sicherzustellen, dass Ihr Bankkonto gut gedeckt ist.

Ab 1 $ für 1.000 Verifizierungen wird es viel kosten. Bei Mailmeteor verwenden wir reCAPTCHA in großem Umfang, um unsere Dienste vor Bots zu schützen. Aufgrund der Preisänderung von Google haben wir berechnet, dass wir im Begriff sind, Tausende von Dollar pro Monat zu zahlen, um den reCAPTCHA-Dienst weiterhin zu nutzen.

Was ist ein CAPTCHA?

CAPTCHAs sind ein wesentlicher Bestandteil des Webs. Ziel ist es, gute Bürger von schlechten Akteuren zu trennen. Im Wesentlichen handelt es sich um einen Dienst, der im Frontend ausgeführt wird und ein Token generiert, das an das Backend übertragen wird. Das Backend überprüft dann, ob das Token legitim ist, und führt in diesem Fall die Aktion aus.

Google hat bei der Werbung für seinen eigenen Dienst großartige Arbeit geleistet, aber zum Glück gibt es einige Alternativen:

1. hCaptcha. Wir haben zunächst darüber nachgedacht, aber ihre Preise ähneln denen des neuen Google.
2. Cloudflare-Drehkreuz. Wir sind große Fans von Cloudflare und haben es uns auf jeden Fall angeschaut. Im Moment ist es ein kostenloser Service.

Lassen Sie uns eintauchen.

Weg von Google reCAPTCHA...

Eines unserer kostenlosen Tools ist ein AI Email Writer. Es handelt sich im Grunde genommen um eine HTML-Seite, die eine Anfrage an unser Backend sendet, die diese dann an eine KI-Lösung eines Drittanbieters weiterleitet.

Um es vor Missbrauch zu schützen, wurde Google reCAPTCHA vom ersten Tag an aktiviert. So wurde die Verifizierung bisher durchgeführt (Backend-Seite):

// 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 



Das ist ganz einfach und ein wesentlicher Grund, warum Google reCAPTCHA so beliebt war. Der Platzbedarf ist sehr begrenzt und die Implementierung ist wirklich einfach. Für die Neugierigsten haben wir das Express-Recaptcha-Paket genutzt, um die Implementierung wirklich einfach zu machen.


  
  
  ... zum Cloudflare Turnstile


Bei der Migration zu Turnstile konnten wir kein NPM-Paket finden, daher mussten wir eine Middleware schreiben, um das Token zu verarbeiten. So sieht es aus:



// 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 }




Sobald die Middleware vorhanden ist, können wir sie auf alle Anfragen anwenden:



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




Und innerhalb der Funktion, die die Anfrage verarbeitet, ist es ziemlich ähnlich zu dem, was wir zuvor hatten:



// 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' })
    }

    ...





  
  
  Abschluss


Die Migration von reCAPTCHA zu Turnstile ist unkompliziert und sollte nicht länger als ein paar Stunden dauern. Es funktioniert ganz ähnlich und spart Ihnen auf jeden Fall gleichzeitig eine Menge Geld.

Ich habe das Frontend in diesem Artikel nicht behandelt, da wir ein unsichtbares Widget verwenden, das unsere Benutzer nicht sehen. Die Dokumentation von Turnstile behandelt jedoch ausführlich die Verwendung ihrer interaktiven Widgets.

Nennen es einen Tag!