在AJAX|PJAX请求内使用reCAPTCHA验证码

最近做了一个免费SSL签发,在接入验证码的时候选择了reCAPTCHA,然而google的接入文档没有中文,后来经过查找和尝试,找到了方法.

前言

其实一开始就想接入reCAPTCHA的,但是因为文档看不懂而尝试接入极验验证和点触验证,然而接入过程和结果令人恶心,极验验证缺少开发文档,我尝试使用composer来安装其sdk,却发现composer仓库里没有这个包,无奈手动继承,终于照着demo配置好了验证的部分,再去配置html页面,发现爆出了js错误,网上搜索没有发现任何有用的信息,于是换了点触验证,点触也一个样子,js报错,后来还是打算把目标放在reCAPTCHA上,最后在locer提示下在github找到了sdk和文档还有demo,然后google搜索了how to use recaptcha in ajax关键词找到了在ajax中的使用方法,接入很简单,很顺利.

接入部分

先到https://www.google.com/recaptcha/admin填写你的域名选择验证码版本(我使用的是v2版本),你也可以填写本地开发域名,比如xxx.lan,在本地可以正常使用

然后集成reCPTCHA的sdk,这里我使用的thinkphp5,它支持使用composer来安装包,于是我使用composer require google/recaptcha "~1.1"来安装这个包,当然你也可以直接下载包手动集成,地址是:https://github.com/google/recaptcha

然后是php代码

$recaptcha = new \ReCaptcha\ReCaptcha('这里填写google给你的secret');
$resp = $recaptcha->verify('这里是客户表单提交的验证码', '客户的ip');
if (!$resp->isSuccess()) {
    return $this->error('未通过验证!');
}

然后是前端html代码

<div class="g-recaptcha" data-sitekey="google给你的sitekey"></div>
<!-- google验证码 -->
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
        $.ajax({
            url:"/ssl/index/create.html",
            type:'post',
            // async:false,
            data:{
                'fname':$('#srk-fname').val(),
                'lname':$('#srk-lname').val(),
                'email':$('#srk-email').val(),
                'phone':$('#srk-phone').val(),
                'csr':$('#srk-csr').val(),
                // 'captcha':$('#srk-captcha').val()
                'g-recaptcha-response':grecaptcha.getResponse() //获取reCAPTCHA验证码数据
            },
            success:function(data){}
        }
</script>