首页 >web前端 >js教程 >从 Google 的 reCAPTCHA 迁移到 Cloudflare Turnstile?

从 Google 的 reCAPTCHA 迁移到 Cloudflare Turnstile?

王林
王林原创
2024-07-23 12:19:58392浏览

Migrating from Google

Google reCAPTCHA 新定价将于 8 月 1 日推出,这意味着您还有几天时间迁移到更便宜的替代方案或确保您的银行帐户资金充足。

1,000 次验证的起价为 1 美元,这将花费很多。在 Mailmeteor,我们广泛使用 reCAPTCHA 来保护我们的服务免受机器人攻击。随着 Google 定价的变化,我们计算出我们每月需要支付数千美元才能继续使用他们的 reCAPTCHA 服务。

什么是验证码?

验证码是网络的重要组成部分。它的目的是将好公民与坏行为者区分开来。本质上,它是一项在前端运行并生成传输到后端的令牌的服务。然后后端验证令牌是否合法,如果是,则执行操作。

Google 在推广自己的服务方面做得很好,但值得庆幸的是,还有一些替代方案:

  1. h验证码。我们一开始也考虑过,但他们的定价与新 Google 的定价非常相似。
  2. Cloudflare 十字转门。我们是 Cloudflare 的忠实粉丝,并且确实对其进行了研究。目前来说,这是一项免费服务。

让我们深入挖掘。

远离 Google reCAPTCHA...

我们的免费工具之一是人工智能电子邮件编写器。它基本上是一个 HTML 页面,将请求发送到我们的后端,然后发送到第三方 AI 解决方案。

为了防止滥用,从第一天起就启用了 Google reCAPTCHA。到目前为止,验证是如何完成的(后端):

// 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 < 0.3) {
      const score = request.recaptcha.data.score
      console.warn(`Recaptcha: score is below 0.3 (${score})`)
      return response.status(403).send({ error: true, message: 'Recaptcha: score too low' })
    }

    ...

这非常简单,也是 Google reCAPTCHA 如此受欢迎的重要组成部分。占地面积非常有限,而且非常容易实施。对于最好奇的人,我们利用了express-recaptcha 包来使其非常容易实现。

...到 Cloudflare Turnstile

迁移到Turnstile时,我们找不到NPM包,所以我们不得不编写一个中间件来处理令牌。它是这样的:

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

中间件到位后,我们可以将其应用于任何请求:

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

在处理请求的函数内部,它与我们之前的非常相似:

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

    ...

结论

从 reCAPTCHA 迁移到 Turnstile 非常简单,不会超过几个小时。它的工作原理非常相似,同时肯定会为您节省很多钱。

我没有在本文中介绍前端,因为我们使用用户看不到的不可见小部件。但 Turnstile 的文档广泛涵盖了如何使用其交互式小部件。

今天就到此为止吧!

以上是从 Google 的 reCAPTCHA 迁移到 Cloudflare Turnstile?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn