如何检查用户是否已经选中了Google Recaptcha复选框

本文概述

如果你不熟悉Google Recaptcha服务, 则可能已经注意到, 如果你正常提交表单并且用户未解决Recaptcha复选框, 则将提交表单, 而无需检查用户是否已经填写了Recaptcha字段。

发生这种情况的原因是, 除非用户选中此表单字段(通过JavaScript由Google Recaptcha字符串附加在JavaScript后面), 否则始终为空(这意味着直到用户解决该问题才存在)。

为避免这种情况, 根据Google recaptcha api文档, 当最终用户解决reCAPTCHA时, 将在HTML中填充一个新字段(g-recaptcha-response)。

你可以通过以下三种方式之一验证用户的响应(其中两种是客户端)：

向你的reCAPTCHA小部件添加一个新参数(数据回调)：

<div class="g-recaptcha" data-sitekey="your_site_key" data-callback="callback"></div>

data回调参数期望要执行的函数的名称, 在先前的小部件中, 回调函数的名称为callback, 因此该函数应命名为callback：

function callback(){
    console.log("The user has already solved the captcha, now you can submit your form.");
}

检查grecaptcha响应结果：

if(grecaptcha.getResponse().length !== 0){
   console.log("The captcha has been already solved");
}

由于google recaptcha api.js文件已加载到文档中, 因此grecaptcha对象在窗口中可用。

如前所述, 如果用户未解析验证码, 则g-recaptcha-response字段值将为””(空), 因此, 只需使用你的服务器语言检查form字段是否为空。

使用PHP的示例(请注意, 根据你的表格, 方法可能与POST不同)：

if($_POST["g-recaptcha-response"] != ''){
    // The user solved the recaptcha, now verify it if is a robot using the API.
}

玩得开心