如何延长Recaptcha v2活跃时长或保持验证后持续有效？

方案1：延迟生成Recaptcha令牌（推荐） #

核心思路是等文件上传完成后，再让用户完成Recaptcha验证，从根源上避免令牌因上传耗时过期。

• 实现步骤：
  1. 页面预留Recaptcha容器，但不自动渲染：

     <div id="recaptcha-container"></div>
     <input type="hidden" id="recaptcha-token" name="g-recaptcha-response">
     <form id="upload-form">
       <input type="file" id="file-input">
       <button type="button" onclick="startFileUpload()">开始上传</button>
     </form>
     

  2. 编写文件上传的AJAX逻辑，在上传成功回调中动态渲染Recaptcha：

     function startFileUpload() {
       const file = document.getElementById('file-input').files[0];
       const formData = new FormData();
       formData.append('file', file);
     
       // 发起文件上传请求
       fetch('/upload', {
         method: 'POST',
         body: formData
       })
       .then(res => {
         if (res.ok) {
           // 文件上传完成，渲染Recaptcha
           grecaptcha.render('recaptcha-container', {
             sitekey: '你的站点密钥',
             callback: function(token) {
               // 存入令牌并提交最终表单
               document.getElementById('recaptcha-token').value = token;
               document.getElementById('upload-form').submit();
             }
           });
         } else {
           alert('文件上传失败，请重试');
         }
       });
     }
     

方案2：定期刷新Recaptcha令牌 #

如果希望用户提前完成验证，可在文件上传过程中定期刷新令牌，保证提交时令牌处于有效期内（Recaptcha v2令牌默认有效期约2分钟）。

• 代码示例：

  // 页面加载完成后初始化Recaptcha
  window.onload = function() {
    grecaptcha.render('recaptcha-container', {
      sitekey: '你的站点密钥',
      callback: function(token) {
        document.getElementById('recaptcha-token').value = token;
      }
    });
  
    // 每隔55秒刷新一次令牌（提前5秒刷新，避免刚好过期）
    setInterval(function() {
      if (grecaptcha.getResponse()) {
        grecaptcha.reset();
        // 重新执行验证获取新令牌
        grecaptcha.execute();
      }
    }, 55000);
  };
  

• 注意：刷新频率不要过高，避免触发谷歌的请求限制；后端仍需严格校验令牌有效性。

方案3：拆分请求，先验证Recaptcha再上传文件 #

将流程拆分为Recaptcha验证和文件上传两个独立步骤，用后端生成的临时会话标识关联两次请求。

• 前端逻辑：

  // 第一步：完成Recaptcha验证
  function verifyCaptcha() {
    const token = grecaptcha.getResponse();
    if (!token) {
      alert('请完成人机验证');
      return;
    }
  
    fetch('/verify-captcha', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ token: token })
    })
    .then(res => res.json())
    .then(data => {
      if (data.success) {
        // 验证通过，获取会话ID并开始上传文件
        uploadFile(data.sessionId);
      } else {
        alert('验证失败，请重试');
        grecaptcha.reset();
      }
    });
  }
  
  // 第二步：上传文件
  function uploadFile(sessionId) {
    const file = document.getElementById('file-input').files[0];
    const formData = new FormData();
    formData.append('file', file);
    formData.append('sessionId', sessionId);
  
    fetch('/upload-file', {
      method: 'POST',
      body: formData
    })
    .then(res => res.json())
    .then(data => {
      data.success ? alert('上传成功') : alert('上传失败');
    });
  }
  

• 后端逻辑：
  1. 接收Recaptcha令牌，调用谷歌API验证有效性，通过则生成唯一会话ID存入缓存（有效期可设为10-15分钟）。
  2. 文件上传接口校验会话ID的有效性，通过则处理文件上传。

关键注意事项 #

• 所有方案都必须配合后端严格校验Recaptcha令牌，不能仅依赖前端处理，防止恶意绕过。
• 延迟渲染方案需给用户明确提示（如“文件上传中，请稍候完成人机验证”），提升体验。
• 刷新令牌时需避免频繁请求，建议间隔50-55秒，防止触发谷歌的频率限制。

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