etchfoda/recaptcha

为 Laravel 提供的无形 reCAPTCHA。

v1.8.5 2018-09-12 12:34 UTC

This package is auto-updated.

Last update: 2024-09-13 04:06:39 UTC


README

php-badge packagist-badge Total Downloads travis-badge

invisible_recaptcha_demo

为什么选择无形 reCAPTCHA?

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

注意

  • 主分支不支持多验证码功能,如果您需要,请使用 multi-forms 分支。(大多数情况下,您在单个页面上放置多个验证码时,是在错误地使用 reCAPTCHA。

安装

composer require etchfoda/recaptcha

Laravel 5

设置

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

EtchFoda\InvisibleReCaptcha\InvisibleReCaptchaServiceProvider::class,

它还支持 Laravel 5.5 的包发现。

配置

在您设置配置之前,请记住在申请密钥时选择 无形 reCAPTCHAinvisible_recaptcha_setting

INVISIBLE_RECAPTCHA_SITEKEYINVISIBLE_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

您可以选择三种不同的验证码样式:bottomrightbottomleftinline

如果将 INVISIBLE_RECAPTCHA_BADGEHIDE 设置为 true,您可以隐藏徽章标志。

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

用法

在您渲染验证码之前,请注意以下事项

  • render() 函数需要在表单元素内调用。
  • 您必须确保提交按钮的 type 属性为 submit
  • 您的表单中只能有一个提交按钮。
在视图中显示 reCAPTCHA
{!! app('reCaptcha')->render(); !!}

// or you can use this in blade
@reCaptcha

支持自定义语言

{!! app('reCaptcha')->render('en'); !!}

// or you can use this in blade
@reCaptcha('en')
验证

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

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

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['reCaptcha'] = new \EtchFoda\InvisibleReCaptcha\InvisibleReCaptcha(
    $this->config->item('reCaptcha.sitekey'),
    $this->config->item('reCaptcha.secret'),
    $this->config->item('reCaptcha.options'),
);

在视图中,在您的表单中

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

然后,在您的控制器中您可以验证它

$reCaptcha->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
];
$reCaptcha = new \EtchFoda\InvisibleReCaptcha\InvisibleReCaptcha($siteKey, $secretKey, $options);

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

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

?>

<form action="?" method="POST">
    <?php echo $reCaptcha->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
        }
    });
};

致谢

  • anhskohbo(无验证码包的作者)
  • 贡献者

在 Beerpay 上提供支持

嘿,兄弟!帮我来一杯啤酒!

Beerpay Beerpay