如何在Marionette ItemView中渲染并验证reCaptcha V2.0（Java后端）

我之前在做一个Marionette.js前端+Java后端的项目时，卡在了谷歌reCaptcha v2.0的渲染和后端验证环节上，查了好多资料踩了不少坑才搞定，现在把完整的解决方案分享出来，希望能帮到遇到同样问题的朋友。

问题描述 #

如何在搭载Java后端的Marionette.js应用中渲染谷歌reCaptcha v2.0组件，并完成后端的有效性验证？

解决方案 #

一、前端（Marionette.js 实现） #

1. 在视图模板中添加reCaptcha挂载容器

首先，在需要展示reCaptcha的Marionette视图模板里，添加一个指定的div容器，用于挂载reCaptcha组件：

<!-- 替换data-sitekey为你在谷歌reCaptcha控制台申请的站点密钥 -->
<div id="recaptcha-container" class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>

2. 动态加载reCaptcha脚本

由于Marionette是单页应用，建议在目标视图的onRender钩子中动态加载reCaptcha脚本，避免全局加载阻塞页面：

onRender: function() {
  // 检查脚本是否已加载，防止重复加载
  if (!document.querySelector('script[src="https://www.google.com/recaptcha/api.js"]')) {
    const recaptchaScript = document.createElement('script');
    recaptchaScript.src = 'https://www.google.com/recaptcha/api.js';
    recaptchaScript.async = true;
    recaptchaScript.defer = true;
    document.body.appendChild(recaptchaScript);
  }
}

脚本加载完成后，会自动识别带有g-recaptcha类的容器，并渲染出reCaptcha验证组件。

3. 获取验证令牌并提交给后端

当用户完成验证后，在表单提交时调用grecaptcha.getResponse()获取验证令牌，和表单数据一起发送给后端：

submitForm: function() {
  const recaptchaToken = grecaptcha.getResponse();
  
  // 先判断用户是否完成验证
  if (!recaptchaToken) {
    alert('请先完成人机验证');
    return;
  }

  // 组装表单数据，包含reCaptcha令牌
  const formPayload = {
    // 你的表单其他字段
    username: this.$el.find('#username').val(),
    password: this.$el.find('#password').val(),
    recaptchaResponse: recaptchaToken
  };

  // 发送请求到后端验证接口
  $.post('/api/auth/verify-recaptcha', formPayload, (res) => {
    if (res.success) {
      // 验证成功，执行后续业务逻辑（比如登录、提交表单）
      alert('验证通过，正在处理请求...');
    } else {
      // 验证失败，重置reCaptcha组件并提示用户
      grecaptcha.reset();
      alert('人机验证失败，请重试');
    }
  }).fail(() => {
    alert('请求出错，请稍后再试');
  });
}

二、后端（Java 实现） #

1. 准备reCaptcha保密密钥

在谷歌reCaptcha控制台获取你的密钥对，前端用站点密钥，后端用保密密钥，保密密钥一定要妥善保管，不能泄露到前端。

2. 编写后端验证接口

以下是基于Spring Boot的示例代码，核心逻辑是调用谷歌官方的验证API校验前端传来的令牌有效性：

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.client.RestTemplate;
import java.util.HashMap;
import java.util.Map;

@RestController
public class RecaptchaVerificationController {

    // 替换为你的reCaptcha保密密钥
    private static final String RECAPTCHA_SECRET_KEY = "YOUR_SECRET_KEY";
    private static final String RECAPTCHA_VERIFY_URL = "https://www.google.com/recaptcha/api/siteverify";

    @PostMapping("/api/auth/verify-recaptcha")
    public Map<String, Object> verifyRecaptcha(
            @RequestParam("recaptchaResponse") String recaptchaToken,
            // 可选：获取用户IP，增强验证准确性
            @RequestParam(value = "remoteIp", required = false) String remoteIp) {
        
        Map<String, Object> result = new HashMap<>();
        RestTemplate restTemplate = new RestTemplate();

        // 构建请求参数
        Map<String, String> requestParams = new HashMap<>();
        requestParams.put("secret", RECAPTCHA_SECRET_KEY);
        requestParams.put("response", recaptchaToken);
        if (remoteIp != null) {
            requestParams.put("remoteip", remoteIp);
        }

        // 调用谷歌验证API
        Map<String, Object> verifyResponse = restTemplate.postForObject(
                RECAPTCHA_VERIFY_URL, requestParams, Map.class);

        boolean isVerified = (boolean) verifyResponse.get("success");
        result.put("success", isVerified);
        
        // 如果验证失败，返回错误码（可选）
        if (!isVerified) {
            result.put("errorCodes", verifyResponse.get("error-codes"));
        }

        return result;
    }
}

注意：生产环境中建议对RestTemplate配置超时时间，避免请求阻塞；同时可以添加日志记录，方便排查验证失败的原因。

3. 处理验证结果

后端验证完成后，将结果返回给前端，前端根据success字段判断是否通过验证，失败时记得调用grecaptcha.reset()重置reCaptcha组件，让用户可以重新进行验证。

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