将Google reCaptcha与Spring Boot应用程序结合使用

最新推荐文章于 2024-09-12 09:48:17 发布

dnc8371

最新推荐文章于 2024-09-12 09:48:17 发布

阅读量517

点赞数

本文详细介绍了如何将Google reCaptcha集成到基于Spring Boot的Web应用程序中，包括创建API密钥、构建示例Spring Boot应用、创建带有reCaptcha的表单以及实现验证码验证的后端API处理。

摘要由CSDN通过智能技术生成

介绍

Google的reCaptcha是一个用于防止漫游器向您的公共表单提交数据或访问您的公共数据的库。

在本文中，我们将研究如何将reCaptcha与基于Spring Boot的Web应用程序集成

设置验证码

您应该从管理面板创建API密钥。您必须创建一个示例应用程序，如下所示：

发布您应该能够看到密钥和秘密以及一些足以入门的说明，如下所示：

创建示例Spring Boot应用

像往常一样，导航到start.spring.io并按如下所示填写并下载项目：

在您喜欢的IDE中打开，然后运行RecaptchaDemoApplication并从http：// localhost：8080访问该应用。由于未定义控制器，因此您将看到错误。

使用表单创建公共页面

我们将利用：

启用了reCaptcha的表单HTML是：

<form id="signup-form" class="form-horizontal" method="POST" 
      th:action="@{/api/signup}" th:object="${user}">
      <div class="form-group">
        <label class="control-label required">First Name</label>
        <input type="text" th:field="*{firstName}" 
          class="form-control required" />
      </div>
      <div class="form-group">
        <label class="control-label required">Last Name</label>
        <input type="text" th:field="*{lastName}" 
          class="form-control required" />
      </div>
      <div class="form-group">
        <label class="control-label required">Email</label>
        <input type="text" th:field="*{email}" 
          class="form-control required" />
      </div>
      <div class="form-group">
        <label class="control-label required">Password</label>
        <input type="password" th:field="*{password}" 
          class="form-control required" />
      </div>
      <div class="form-group">
        <label class="control-label required">Confirm Password</label>
        <input type="password" th:field="*{confirmPassword}" 
          class="form-control required" />
      </div>
      <div class="g-recaptcha" 
        data-sitekey="6LdGeDcUAAAAALfoMZ2Ltv4EE6AHIYb8nSxhCRh_">
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>

上面重要的部分是具有g-recaptcha类的div ，它具有公共站点密钥。另一个密钥应在您的服务器中安全，您可以使用该密钥来验证来自Google服务器的验证码。另外，请确保reCaptcha JS位于“。”之前。

加载URL http：// localhost：8080 /将呈现以下形式：

创建用于表单处理的API

接下来是在处理添加用户API时验证验证码。 Google提供了一个端点，我们将在该端点上发布以验证验证码。以下是验证验证码的代码：

@Slf4j
@Service
public class RecaptchaService {

  @Value("${google.recaptcha.secret}") 
  String recaptchaSecret;
  
  private static final String GOOGLE_RECAPTCHA_VERIFY_URL =
    "https://www.google.com/recaptcha/api/siteverify";
  
  @Autowired 
  RestTemplateBuilder restTemplateBuilder;

  public String verifyRecaptcha(String ip, 
    String recaptchaResponse){
    Map<String, String> body = new HashMap<>();
    body.put("secret", recaptchaSecret);
    body.put("response", recaptchaResponse);
    body.put("remoteip", ip);
    log.debug("Request body for recaptcha: {}", body);
    ResponseEntity<Map> recaptchaResponseEntity = 
      restTemplateBuilder.build()
        .postForEntity(GOOGLE_RECAPTCHA_VERIFY_URL+
          "?secret={secret}&response={response}&remoteip={remoteip}", 
          body, Map.class, body);
            
    log.debug("Response from recaptcha: {}", 
      recaptchaResponseEntity);
    Map<String, Object> responseBody = 
      recaptchaResponseEntity.getBody();
      
    boolean recaptchaSucess = (Boolean)responseBody.get("success");
    if ( !recaptchaSucess) {
      List<String> errorCodes = 
        (List)responseBody.get("error-codes");
      
      String errorMessage = errorCodes.stream()
          .map(s -> RecaptchaUtil.RECAPTCHA_ERROR_CODE.get(s))
          .collect(Collectors.joining(", "));
          
      return errorMessage;
    }else {
      return StringUtils.EMPTY;
    }
  }
 }

我们创建了一个地图，该地图将响应代码与Google提供的响应消息进行映射，如下所示：

public class RecaptchaUtil {

  public static final Map<String, String> 
    RECAPTCHA_ERROR_CODE = new HashMap<>();

  static {
    RECAPTCHA_ERROR_CODE.put("missing-input-secret", 
        "The secret parameter is missing");
    RECAPTCHA_ERROR_CODE.put("invalid-input-secret", 
        "The secret parameter is invalid or malformed");
    RECAPTCHA_ERROR_CODE.put("missing-input-response", 
        "The response parameter is missing");
    RECAPTCHA_ERROR_CODE.put("invalid-input-response", 
        "The response parameter is invalid or malformed");
    RECAPTCHA_ERROR_CODE.put("bad-request", 
        "The request is invalid or malformed");
  }
}

让我们以api形式使用RecaptchaService ，如下所示：

@PostMapping("/signup")
public ResponseEntity<?> signup(@Valid User user, 
  @RequestParam(name="g-recaptcha-response") String recaptchaResponse,
  HttpServletRequest request
){

  String ip = request.getRemoteAddr();
  String captchaVerifyMessage = 
      captchaService.verifyRecaptcha(ip, recaptchaResponse);

  if ( StringUtils.isNotEmpty(captchaVerifyMessage)) {
    Map<String, Object> response = new HashMap<>();
    response.put("message", captchaVerifyMessage);
    return ResponseEntity.badRequest()
      .body(response);
  }
  userRepository.save(user);
  return ResponseEntity.ok().build();
}

UI上的验证码在响应中作为带有g-recaptcha-response键的请求参数传递。因此，我们使用此响应密钥和选项ip地址调用验证码验证服务。验证的结果是成功还是失败。如果消息失败，我们将捕获该消息并将其返回给客户端。

此示例的完整代码可以在此处找到。