Cloudflare Turnstile替代reCAPTCHA

meta-description: Cloudflare Turnstile替代reCAPTCHA完整教程，详解无摩擦人机验证的配置和集成。

keywords: Cloudflare Turnstile,reCAPTCHA替代,人机验证,无摩擦验证,WordPress安全

# Cloudflare Turnstile替代reCAPTCHA

本文介绍使用Cloudflare Turnstile替代Google reCAPTCHA，实现无摩擦的人机验证。

## Turnstile优势

| 特性 | Turnstile | reCAPTCHA v2 | reCAPTCHA v3 |

|------|-----------|---------------|---------------|

| 用户交互 | 无摩擦 | 需要点击 | 无交互 |

| 隐私友好 | ✓ | ✗ | ✗ |

| 移动端体验 | 优秀 | 差 | 优秀 |

| 免费额度 | 无限 | 有限 | 有限 |

| 数据收集 | 不收集 | 收集 | 收集 |

## 获取Turnstile密钥

### 步骤

1. 登录 [Cloudflare Dashboard](https://dash.cloudflare.com/)

2. 左侧菜单 → Turnstile

3. 点击"Add Site"

4. 输入站点名称：example.com

5. Widget Mode选择：Managed（推荐）

6. 点击"Create"

7. 记录 Site Key 和 Secret Key

## WordPress集成

### 安装官方插件

1. 后台 → 插件 → 安装插件

2. 搜索"Cloudflare Turnstile"

3. 安装并启用

### 手动配置（functions.php）

// 注册Turnstile脚本
function enqueue_turnstile() {
    wp_enqueue_script('turnstile', 'https://challenges.cloudflare.com/turnstile/v0/api.js', [], null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_turnstile');

// 在表单中添加Turnstile
function add_turnstile_to_form() {
    $site_key = 'YOUR_SITE_KEY';
    echo '
';
}
add_action('comment_form_after_fields', 'add_turnstile_to_form');

### 验证Token

function verify_turnstile($token) {
    $secret_key = 'YOUR_SECRET_KEY';
    
    $response = wp_remote_post('https://challenges.cloudflare.com/turnstile/v0/siteverify', [
        'body' => [
            'secret'   => $secret_key,
            'response' => $token,
            'remoteip' => $_SERVER['REMOTE_ADDR'],
        ]
    ]);
    
    $body = wp_remote_retrieve_body($response);
    $data = json_decode($body, true);
    
    return $data['success'] ?? false;
}

// 在评论提交时验证
function check_turnstile_before_comment($commentdata) {
    $token = $_POST['cf-turnstile-response'] ?? '';
    
    if (!verify_turnstile($token)) {
        wp_die('人机验证失败，请重试。');
    }
    
    return $commentdata;
}
add_filter('preprocess_comment', 'check_turnstile_before_comment');

## 不同场景集成

### 登录表单

// 在登录表单添加Turnstile
function add_turnstile_to_login() {
    $site_key = 'YOUR_SITE_KEY';
    echo '
';
}
add_action('login_form', 'add_turnstile_to_login');

// 验证登录
function verify_login_turnstile($user, $username, $password) {
    $token = $_POST['cf-turnstile-response'] ?? '';
    
    if (!verify_turnstile($token)) {
        return new WP_Error('turnstile_error', '人机验证失败');
    }
    
    return $user;
}
add_filter('authenticate', 'verify_login_turnstile', 30, 3);

### 注册表单

function add_turnstile_to_register() {
    $site_key = 'YOUR_SITE_KEY';
    echo '
';
}
add_action('register_form', 'add_turnstile_to_register');

function verify_registration_turnstile($errors, $sanitized_user_login, $user_email) {
    $token = $_POST['cf-turnstile-response'] ?? '';
    
    if (!verify_turnstile($token)) {
        $errors->add('turnstile_error', '人机验证失败');
    }
    
    return $errors;
}
add_filter('registration_errors', 'verify_registration_turnstile', 10, 3);

### 联系表单（Contact Form 7）

// 在CF7中添加Turnstile
// 在表单编辑器中添加：
// [turnstile cf-turnstile]

// 验证
add_filter('wpcf7_validate', function($result, $tags) {
    $token = $_POST['cf-turnstile-response'] ?? '';
    
    if (!verify_turnstile($token)) {
        $result->invalidate([
            'type' => 'turnstile',
            'name' => 'cf-turnstile',
        ], '人机验证失败');
    }
    
    return $result;
}, 10, 2);

## Widget模式选择

| 模式 | 说明 | 适用场景 |

|------|------|----------|

| Managed | 自动判断交互方式 | 通用 |

| Non-Interactive | 完全无交互 | 低风险 |

| Invisible | 不可见 | 高信任用户 |

### 配置示例

## 主题定制

### CSS样式

/* 自定义Turnstile外观 */
.cf-turnstile {
    margin: 10px 0;
}

/* 响应式 */
@media (max-width: 480px) {
    .cf-turnstile iframe {
        max-width: 100% !important;
    }
}

## 测试与调试

### 测试模式

// 在开发环境使用测试密钥
if (WP_ENVIRONMENT_TYPE === 'development') {
    $site_key = '1x00000000000000000000AA';  // 总是通过
    $secret_key = '1x0000000000000000000000000000000AA';  // 总是通过
}

### 调试技巧

// 监听Turnstile事件
document.addEventListener('turnstile-callback', function(e) {
    console.log('Token:', e.detail.token);
});

document.addEventListener('turnstile-expired', function() {
    console.log('Token已过期');
});

document.addEventListener('turnstile-error', function(e) {
    console.error('错误:', e.detail.error);
});

## 性能优化

### 延迟加载

// 只在需要时加载Turnstile
function loadTurnstile() {
    if (window.turnstile) return;
    
    const script = document.createElement('script');
    script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
    script.async = true;
    document.head.appendChild(script);
}

// 在表单显示时加载
const observer = new IntersectionObserver(function(entries) {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            loadTurnstile();
        }
    });
});

document.querySelectorAll('form').forEach(form => observer.observe(form));

## 常见问题

| 问题 | 解决方案 |

|------|----------|

| Token验证失败 | 检查Secret Key是否正确 |

| 不显示验证框 | 检查域名是否在Cloudflare添加 |

| 移动端显示异常 | 使用响应式CSS |

| 与缓存插件冲突 | 排除Turnstile脚本缓存 |

## 迁移从reCAPTCHA

### 步骤

1. 在Cloudflare获取Turnstile密钥

2. 替换前端reCAPTCHA脚本

3. 替换后端验证API调用

4. 测试所有表单

5. 删除reCAPTCHA插件

Cloudflare Turnstile是更优的人机验证方案，既保护隐私又提升用户体验。