README

支持

Laravel 8+，PHP >=7.4。

安装

composer require esyede/hidden-recaptcha

设置

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

Esyede\HiddenReCaptcha\HiddenReCaptchaServiceProvider::class,

配置

调整你的.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，你可以隐藏徽章标志。

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

使用

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

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

在视图中显示reCAPTCHA

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

// or you can use this in blade
@captcha

支持自定义语言

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

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

与VueJS等JavaScript框架一起使用

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

你可以渲染polyfill（可以在HTML的头部这样做：）

{!! 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 \Esyede\HiddenReCaptcha\HiddenReCaptcha(
    $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 \Esyede\HiddenReCaptcha\HiddenReCaptcha($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
        }
    });
};

esyede / hidden-recaptcha

维护者

详细信息