README

为什么选择不可见 reCAPTCHA？

不可见 reCAPTCHA 是 reCAPTCHA v2（无验证码）的改进版本。在 reCAPTCHA v2 中，用户需要点击按钮：“我不是机器人”来证明他们是人类。在不可见 reCAPTCHA 中，不会嵌入验证码框供用户点击。它完全不可见！只在页面底部显示徽章，提示用户您的网站正在使用这项技术。（徽章可以隐藏，但不推荐。）

安装

composer require codewithdiki/invisible-recaptcha

Laravel 5

设置

将 ServiceProvider 添加到 app/config/app.php 中的 providers 数组。

codewithdiki\InvisibleReCaptcha\InvisibleReCaptchaServiceProvider::class,

它还支持 Laravel 5.5 的包发现。

配置

在设置配置之前，请记住在申请密钥时选择 不可见 reCAPTCHA。

将 INVISIBLE_RECAPTCHA_SITEKEY 和 INVISIBLE_RECAPTCHA_SECRETKEY 添加到 .env 文件。

// required
INVISIBLE_RECAPTCHA_SITEKEY={siteKey}
INVISIBLE_RECAPTCHA_SECRETKEY={secretKey}

// optional
INVISIBLE_RECAPTCHA_BADGEHIDE=false
INVISIBLE_RECAPTCHA_DATABADGE='bottomright'
INVISIBLE_RECAPTCHA_TIMEOUT=5
INVISIBLE_RECAPTCHA_DEBUG=false

您可以设置三种不同的验证码样式：bottomright、bottomleft、inline

~~如果将 INVISIBLE_RECAPTCHA_BADGEHIDE 设置为 true，则可以隐藏徽章标志。~~

注意：由于临时样式问题（我可能稍后会修复它），您无法隐藏 recaptcha 徽章，除非您手动添加自己的 CSS 样式。

如何操作？
.grecaptcha-badge {display: none !important;}

您可以通过将 INVISIBLE_RECAPTCHA_DEBUG 设置为 true 来在浏览器控制台中查看这些验证码元素的绑定状态。

使用方法

在渲染验证码之前，请记住以下事项

render() 或 renderHTML() 函数必须在表单元素内部调用。
您必须确保您的提交按钮的 type 属性为 submit。
您的表单中只能有一个提交按钮。

在您的视图中显示 reCAPTCHA

// recommended
{!! app('captcha')->render() !!}

// or you can use this in blade
@captcha

具有自定义语言支持

// recommended
{!! app('captcha')->render('en') !!}

// or you can use this in blade
@captcha('en')

与 VueJS 等JavaScript 框架一起使用

渲染过程包含三个不同的部分，可以在使用 VueJS 等框架时单独渲染，这些框架在模板中包含 <script> 标签时会在控制台抛出错误。

您可以在 HTML 的头部某个位置渲染 polyfill（这样做）

{!! app('captcha')->renderPolyfill() !!}
// Or with blade directive:
@captchaPolyfill

您可以使用以下方法渲染 HTML，这需要在您的 <form> 标签内部进行

{!! app('captcha')->renderCaptchaHTML() !!}
// Or with blade directive:
@captchaHTML

您可以使用以下方法渲染必要的 <script> 标签，包括可选的语言支持

// The argument is optional.
{!! app('captcha')->renderFooterJS('en') !!}

// Or with blade directive:
@captchaScripts
// blade directive, with language support:
@captchaScripts('en')

验证

将 'g-recaptcha-response' => 'required|captcha' 添加到规则数组。

$validate = Validator::make(Input::all(), [
    'g-recaptcha-response' => 'required|captcha'
]);

CodeIgniter 3.x

在 application/config/config.php 中设置

$config['composer_autoload'] = TRUE;

在 application/config/config.php 中添加以下行

$config['recaptcha.sitekey'] = 'sitekey'; 
$config['recaptcha.secret'] = 'secretkey';
// optional
$config['recaptcha.options'] = [
    'hideBadge' => false,
    'dataBadge' => 'bottomright',
    'timeout' => 5,
    'debug' => false
];

在控制器中，使用

$data['captcha'] = new \codewithdiki\InvisibleReCaptcha\InvisibleReCaptcha(
    $this->config->item('recaptcha.sitekey'),
    $this->config->item('recaptcha.secret'),
    $this->config->item('recaptcha.options'),
);

在视图中，在您的表单中

<?php echo $captcha->render(); ?>

然后回到您的控制器中，您可以验证它

$captcha->verifyResponse($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);

无 Laravel 或 CodeIgniter

请参阅以下示例

<?php

require_once "vendor/autoload.php";

$siteKey = 'sitekey';
$secretKey = 'secretkey';
// optional
$options = [
    'hideBadge' => false,
    'dataBadge' => 'bottomright',
    'timeout' => 5,
    'debug' => false
];
$captcha = new \codewithdiki\InvisibleReCaptcha\InvisibleReCaptcha($siteKey, $secretKey, $options);

// you can override single option config like this
$captcha->setOption('debug', true);

if (!empty($_POST)) {
    var_dump($captcha->verifyResponse($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']));
    exit();
}

?>

<form action="?" method="POST">
    <?php echo $captcha->render(); ?>
    <button type="submit">Submit</button>
</form>

控制提交功能

仅在需要完全控制提交按钮后使用此函数。如果在函数中返回 false，则不会触发 recaptcha 验证。

_beforeSubmit = function(e) {
    console.log('submit button clicked.');
    // do other things before captcha validation
    // e represents reference to original form submit event
    // return true if you want to continue triggering captcha validation, otherwise return false
    return false;
}

自定义提交函数

如果您想自定义提交函数，例如：在点击提交按钮后执行某些操作或更改提交为AJAX调用等。

您需要做的只是实现javascript中的_submitEvent。

_submitEvent = function() {
    console.log('submit button clicked.');
    // write your logic here
    // submit your form
    _submitForm();
}

以下是一个使用AJAX提交（使用jQuery选择器）的示例。

_submitEvent = function() {
    $.ajax({
        type: "POST",
        url: "{{route('message.send')}}",
         data: {
            "name": $("#name").val(),
            "email": $("#email").val(),
            "content": $("#content").val(),
            // important! don't forget to send `g-recaptcha-response`
            "g-recaptcha-response": $("#g-recaptcha-response").val()
        },
        dataType: "json",
        success: function(data) {
            // success logic
        },
        error: function(data) {
            // error logic
        }
    });
};

仓库

Repo: https://github.com/robertnicjoo/invisible-recaptcha

此仓库演示了如何以AJAX方式使用此包。

作者：CV. codewithdiki

从albertcht invisible recaptcha分叉并改进。

codewithdiki / invisible-recaptcha

维护者

详细信息