有关验证码接入的不完全指南

这篇文章距离上次修改已过652天，其中的内容可能已经有所变动。

因为接这个验证码四处碰壁，因此把我写好的可用的东西分享在这里，希望别再有人把时间浪费在这个验证码接入上面...
目前我只能找到三款用 HTML+PHP 比较好接入的，市面上也大多是这几款比较流行。
我写博客的原则就是在最短的时间内能看到访问者需要的东西，我上的是直接复制粘贴就可以用的代码，以免浪费时间。

警告：RECAPTCHA和HCAPTCHA不能共存

如果RECAPTCHA和HCAPTCHA都引用的话，经过我的测试，HCAPTCHA会发个假的RECAPTCHA请求导致无法正确识别，目前未找到解决方案（一般也不会这么干hhhc）

1.RECAPTCHA

后台地址(大陆无法访问):http://www.google.com/recaptcha/admin

前端(HTML):

需要更改1处：使用div:data-sitekey="得到的site key"或使用js:'sitekey': 'sitekey填写地址'

<script src="https://recaptcha.net/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<!--以下方法二选一-->

<!--方法1 直接div -->
<div class="g-recaptcha" data-sitekey="得到的site key"></div> 

<!--方法2 用JS渲染-->
<script type="text/javascript">var onloadCallback = function() {
    grecaptcha.render('gcaptcha', {
      'sitekey': 'sitekey填写地址'
    });
  };</script>
<div id="gcaptcha"></div>

后端(PHP):

需要更改1处：$secretKey = "私钥填写";

if (isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])) {
    $secretKey = "私钥填写";
    $responseKey = $_POST['g-recaptcha-response'];
    $userIP = $_SERVER['REMOTE_ADDR'];
    $url = "https://recaptcha.net/recaptcha/api/siteverify?secret=$secretKey&response=$responseKey&remoteip=$userIP";
    $response = file_get_contents($url);
    $response = json_decode($response);
    if ($response->success == true) {
//Success...
}else{
//Failed...
}

2.VAPTCHA

后台地址:https://vaptcha.com

前端(html)

需要更改1处：位于<script>后的vid: 输入你的vid

<!--官方-->
<script src="https://v-cn.vaptcha.com/v3.js"></script>
<div id="vaptchaContainer" style="width: 300px;margin-top: 20px">
  <!--vaptcha-container是用来引入VAPTCHA的容器，下面代码为预加载动画，仅供参考-->
  <div class="vaptcha-init-main">
    <div class="vaptcha-init-loading">
      <a href="/" target="_blank">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="60px" viewBox="0 0 24 30" style="enable-background: new 0 0 50 50; width: 14px; height: 14px; vertical-align: middle" xml:space="preserve">
          <rect x="0" y="9.22656" width="4" height="12.5469" fill="#CCCCCC">
            <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="0.6s" repeatCount="indefinite">
            </animate>
            <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="0.6s" repeatCount="indefinite">
            </animate>
          </rect>
          <rect x="10" y="5.22656" width="4" height="20.5469" fill="#CCCCCC">
            <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="0.6s" repeatCount="indefinite">
            </animate>
            <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="0.6s" repeatCount="indefinite">
            </animate>
          </rect>
          <rect x="20" y="8.77344" width="4" height="13.4531" fill="#CCCCCC">
            <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="0.6s" repeatCount="indefinite">
            </animate>
            <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="0.6s" repeatCount="indefinite">
            </animate>
          </rect>
        </svg>
      </a>
      <span class="vaptcha-text">Vaptcha 准备中...</span>
    </div>
  </div>
</div>
<script>vaptcha({
    vid: '输入你的vid',
    // 验证单元id
    mode: 'click',
    // 显示类型 点击式
    scene: 0,
    // 场景值 默认0
    container: '#vaptchaContainer',
    // 容器，可为Element 或者 selector
    // 可选参数
    // lang: 'auto', // 语言 默认auto,可选值auto,zh-CN,en,zh-TW,jp
    // style: 'dark' //按钮样式 默认dark，可选值 dark,light
    // color: '#57ABFF' //按钮颜色 默认值#57ABFF
    // area: 'auto' //验证节点区域,默认 auto,可选值 auto,sea,na,cn
  }).then(function(vaptchaObj) {
    obj = vaptchaObj //将VAPTCHA验证实例保存到局部变量中
    vaptchaObj.render() // 调用验证实例 vpObj 的 render 方法加载验证按钮
    //获取token的方式一：
    vaptchaObj.renderTokenInput('.login-form'); //以form的方式提交数据时，使用此函数向表单添加server,token值
    //关闭验证弹窗时触发
    vaptchaObj.listen('close',
    function() {
      });
    })
  })</script>

后端：

需要更改2处，位于'id' => '填写你的id'和'secretkey' => '填写你的secretkey'

function send_post($url, $post_data) {
    $postdata = http_build_query($post_data);
    $options = array(
                    'http' => array(
                        'method' => 'POST',
                        'header' => 'Content-type:application/x-www-form-urlencoded',
                        'content' => $postdata,
                        'timeout' => 15 * 60 // 超时时间（单位:s）
    )
                );
    $context = stream_context_create($options);
    @$result = file_get_contents($url, false, $context);
    return $result;
}
$post_data = array(
            'id' => '填写你的id',
            'secretkey' => '填写你的secretkey',
            'scene' => '0',
            'token' => $_POST['vaptcha_token'],
            'ip' => $_SERVER['REMOTE_ADDR']
        );
$response1 = json_decode(send_post($_POST['vaptcha_server'], $post_data));
if ($response1->success == 1) {
    //success...
} else {
    //failed...
}

3.HAPTCHA

后台地址:https://hcaptcha.com

前端：

需要更改1处，位于data-sitekey="站点sitekey"

<script src='https://www.hCaptcha.com/1/api.js' async defer></script>
<div class="h-captcha" data-sitekey="站点sitekey"></div>

后端：

需要更改1处，位于'secret' => "私钥(以0x开头)",

$data = array(
                'secret' => "私钥(以0x开头)",
                'response' => $_POST['h-captcha-response']
            );
$verify = curl_init();
curl_setopt($verify, CURLOPT_URL, "https://hcaptcha.com/siteverify");
curl_setopt($verify, CURLOPT_POST, true);
curl_setopt($verify, CURLOPT_POSTFIELDS, http_build_query($data));
curl_setopt($verify, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($verify);
// var_dump($response);
$responseData = json_decode($response);
if($responseData->success) {
    // success...
}else{
       // Failed...
}