如何强制CloudFlare Turnstile始终显示验证复选框？

要实现始终显示复选框并强制用户手动完成验证，核心是将Turnstile的运行模式设置为challenge——这个模式会跳过自动验证逻辑，直接显示需要手动勾选的验证界面，和CloudFlare登录页的行为完全一致。

以下是适配LAMP环境的完整示例代码：

前端HTML/JavaScript部分 #

先在表单中添加Turnstile的容器，再通过显式方式渲染组件：

<form method="POST" action="verify-turnstile.php">
    <!-- 自定义表单字段，比如用户名、密码等 -->
    <div>
        <label>用户名：</label>
        <input type="text" name="username" required>
    </div>
    <!-- Turnstile验证容器 -->
    <div id="turnstile-container" style="margin: 15px 0;"></div>
    <button type="submit">提交表单</button>
</form>

<!-- 引入CloudFlare Turnstile官方脚本 -->
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

<script>
// 页面加载完成后显式渲染Turnstile组件
window.onload = function() {
    window.turnstile.render('#turnstile-container', {
        sitekey: '你的Turnstile站点密钥', // 替换为你自己的Site Key
        mode: 'challenge', // 核心参数：强制显示手动验证复选框
        theme: 'light', // 可选：支持light/dark/auto三种主题
        callback: function(token) {
            // 可选：验证成功后的自定义逻辑，比如启用提交按钮
            console.log("验证成功，令牌：", token);
        }
    });
};
</script>

后端PHP验证部分 #

用户提交表单后，必须在后端验证Turnstile返回的令牌，防止前端绕过验证：

<?php
// verify-turnstile.php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 获取前端提交的Turnstile令牌
    $turnstileToken = $_POST['cf-turnstile-response'] ?? '';
    $secretKey = '你的Turnstile密钥'; // 替换为你自己的Secret Key

    // 构造验证请求参数
    $verifyData = [
        'secret' => $secretKey,
        'response' => $turnstileToken,
        'remoteip' => $_SERVER['REMOTE_ADDR']
    ];

    // 发送验证请求到CloudFlare
    $options = [
        'http' => [
            'header'  => "Content-type: application/x-www-form-urlencoded\r\n",
            'method'  => 'POST',
            'content' => http_build_query($verifyData)
        ]
    ];
    $context = stream_context_create($options);
    $verifyResult = file_get_contents('https://challenges.cloudflare.com/turnstile/v0/siteverify', false, $context);
    $response = json_decode($verifyResult);

    // 处理验证结果
    if ($response->success) {
        // 验证通过，执行表单提交逻辑（比如写入数据库）
        $username = $_POST['username'] ?? '';
        echo "欢迎你，{$username}！验证通过，表单已提交。";
    } else {
        // 验证失败，返回错误提示
        $errorCodes = implode(', ', $response->{'error-codes'});
        echo "验证失败，请重新尝试。错误码：{$errorCodes}";
    }
}
?>

关键注意事项 #

• mode: 'challenge'：这是实现需求的核心，该模式会直接触发手动验证界面，完全跳过CloudFlare的自动通过判定逻辑，确保用户必须手动勾选完成验证。
• 显式渲染方式：通过window.turnstile.render初始化组件，比自动渲染更灵活，便于自定义配置和后续扩展。
• 后端验证不可省略：必须在后端完成令牌验证，避免恶意用户通过前端篡改绕过验证机制。

内容的提问来源于stack exchange，提问作者nlvrocks