Cloudflare Turnstile の実装パターン

概要

reCAPTCHA v3 から Cloudflare Turnstile へ移行する際の実装パターン。Turnstile は無料・プライバシーフレンドリーで CF Pages ネイティブ対応。

キー情報

• テストキー
  • サイトキー: 1x00000000000000000000AA
  • シークレット: 1x0000000000000000000AA
• 本番環境: Cloudflare Dashboard で生成

クライアント側（React/Svelte）

// CDN 読み込み（head に挿入）
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

// Explicit rendering（推奨）
turnstile.render('#turnstile-container', {
  siteKey: import.meta.env.PUBLIC_TURNSTILE_KEY,
  theme: 'light',
  callback: (token) => {
    // トークン取得後の処理（フォーム送信など）
    console.log('Turnstile token:', token);
  }
});

// リセット（フォーム送信後）
turnstile.reset();

サーバー側（CF Pages Functions / Node.js）

// POST /api/verify-captcha
const response = await fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    secret: env.TURNSTILE_SECRET_KEY,
    response: token
  })
});

const data = await response.json();
if (!data.success) {
  throw new Error('Captcha verification failed');
}

メリット

• reCAPTCHA より実装が簡単
• ユーザー側のプライバシー尊重（データ共有なし）
• CF Pages との相性が良い
• 無料で使用可能