フロントエンド側
.cf-turnstileは固定されたフォーマットなので、変更不可。

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="サイトキー" data-callback="onTurnstileSuccess" data-expired-callback="onTurnstileExpired" data-error-callback="onTurnstileError" data-language="ja"></div>
<script>
  let turnstileToken = null;

  function onTurnstileSuccess(token) {
    console.log("✅ Turnstile 成功:", token);
    turnstileToken = token;
    document.getElementById("submit-btn").disabled = false;
  }

  function onTurnstileExpired() {
    console.log("⏳ Turnstile 期限切れ");
    turnstileToken = null;
    document.getElementById("submit-btn").disabled = true;
  }

  function onTurnstileError() {
    console.log("❌ Turnstile エラー");
    turnstileToken = null;
    document.getElementById("submit-btn").disabled = true;
  }

  function isTurnstileCompleted() {
    return !!turnstileToken;
  }
</script>

サーバー側

$token = $_POST['cf-turnstile-response'] ?? '';

if ($token === '') {
	wp_send_json([
		'message' => '送信ができませんでした。送信手順が正しくない可能性があります。',
	], 403);
	exit;
}

$data = [];
$data['secret'] = 'YOUR_SECRET_KEY';
$data['response'] = $token;

$data = http_build_query($data, '', '&');

$curl = curl_init();

curl_setopt_array($curl, [
	CURLOPT_URL => 'https://challenges.cloudflare.com/turnstile/v0/siteverify',
	CURLOPT_RETURNTRANSFER => true,
	CURLOPT_POST => true,
	CURLOPT_POSTFIELDS => $data,
	CURLOPT_TIMEOUT => 10,
]);

$res = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err || $res === false) {
	wp_send_json([
		'message' => '送信ができませんでした。送信手順が正しくない可能性があります。',
	], 403);
	exit;
}

$result = json_decode($res, true);

if (
	!is_array($result) ||
	($result['success'] ?? false) !== true
) {
	wp_send_json([
		'message' => '送信ができませんでした。送信手順が正しくない可能性があります。',
	], 403);
	exit;
}
カテゴリー: All