ホームページ  >  記事  >  ウェブフロントエンド  >  Google の reCAPTCHA から Cloudflare Turnstile に移行しますか?

Google の reCAPTCHA から Cloudflare Turnstile に移行しますか?

王林
王林オリジナル
2024-07-23 12:19:58364ブラウズ

Migrating from Google

Google reCAPTCHA の新しい料金設定は 8 月 1 日に開始されます。つまり、より安価な代替品に移行するか、銀行口座に十分な資金があることを確認するまでに、数日残っています。

1,000 件の検証で 1 ドルから始まり、かなりの費用がかかります。 Mailmeteor では、サービスをボットから保護するために reCAPTCHA を広範囲に使用しています。 Google の価格変更により、reCAPTCHA サービスを使い続けるには毎月数千ドルを支払うことになると計算されました。

キャプチャとは何ですか?

CAPTCHA はウェブの重要な部分です。善良な市民を悪者から分離することを目的としています。基本的に、これはフロントエンドで動作し、バックエンドに送信されるトークンを生成するサービスです。次に、バックエンドはトークンが正当であることを検証し、正当である場合はアクションを実行します。

Google は自社サービスの宣伝に素晴らしい仕事をしましたが、ありがたいことに代替手段がいくつかあります。

  1. hキャプチャ。最初は検討しましたが、その価格設定は新しい Google の価格設定と非常に似ています。
  2. クラウドフレア回転木戸。私たちは Cloudflare の大ファンなので、間違いなく検討しました。現時点では無料サービスです。

詳しく見てみましょう。

Google reCAPTCHA から遠ざかります...

弊社の無料ツールの 1 つは、AI Email Writer です。これは基本的に、バックエンドにリクエストを送信する 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 パッケージを活用して実装を非常に簡単にしました。

...クラウドフレア改札口へ

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 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。