ホームページ >ウェブフロントエンド >jsチュートリアル >Google の reCAPTCHA から Cloudflare Turnstile に移行しますか?
Google reCAPTCHA の新しい料金設定は 8 月 1 日に開始されます。つまり、より安価な代替品に移行するか、銀行口座に十分な資金があることを確認するまでに、数日残っています。
1,000 件の検証で 1 ドルから始まり、かなりの費用がかかります。 Mailmeteor では、サービスをボットから保護するために reCAPTCHA を広範囲に使用しています。 Google の価格変更により、reCAPTCHA サービスを使い続けるには毎月数千ドルを支払うことになると計算されました。
CAPTCHA はウェブの重要な部分です。善良な市民を悪者から分離することを目的としています。基本的に、これはフロントエンドで動作し、バックエンドに送信されるトークンを生成するサービスです。次に、バックエンドはトークンが正当であることを検証し、正当である場合はアクションを実行します。
Google は自社サービスの宣伝に素晴らしい仕事をしましたが、ありがたいことに代替手段がいくつかあります。
詳しく見てみましょう。
弊社の無料ツールの 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 サイトの他の関連記事を参照してください。