README

为什么选择 Invisible reCAPTCHA？

Invisible reCAPTCHA 是 reCAPTCHA v2（无验证码）的改进版本。在 reCAPTCHA v2 中，用户需要点击“我不是机器人”按钮来证明他们是人类。在 invisible reCAPTCHA 中，不会内置一个用户可以点击的验证码窗口。这是完全无感知的！只有在页面底部会显示一个图标，以提示用户您的网站正在使用这项技术。（图标可以隐藏，但不建议这样做。）

安装

composer require darkeum/darklyy-invisible-recaptcha

配置

首先，您需要获取 Invisible reCAPTCHA 的公钥和私钥。

当您获取到密钥后，请将其添加到 .env 文件中的变量 INVISIBLE_RECAPTCHA_SITEKEY 和 INVISIBLE_RECAPTCHA_SECRETKEY。

// обязательно
INVISIBLE_RECAPTCHA_SITEKEY={siteKey}
INVISIBLE_RECAPTCHA_SECRETKEY={secretKey}

// опционально
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

@recaptcha

// или

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

自定义语言

@recaptcha('ru')

// или

{!! app('recaptcha')->render('ru') !!}

验证

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

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

处理提交函数

仅当您需要在提交按钮点击后接管所有控制时，才应使用此函数。如果在此函数中返回 false，则不会启动 Recaptcha 验证。

_beforeSubmit = function(e) {
    console.log('submit button clicked.');
    // ваш код 
    return false;
}

配置提交函数

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

您需要实现的唯一方法是 _submitEvent。

_submitEvent = function() {
    console.log('submit button clicked.');
    // ваш код 
    _submitForm();
}

以下是一个使用 AJAX 的示例（使用 jQuery）

_submitEvent = function() {
    $.ajax({
        type: "POST",
        url: "{{route('message.send')}}",
         data: {
            "name": $("#name").val(),
            "email": $("#email").val(),
            "content": $("#content").val(),
            // важный! не забудьте отправить `g-recaptcha-response`
            "g-recaptcha-response": $("#g-recaptcha-response").val()
        },
        dataType: "json",
        success: function(data) {
            // успех
        },
        error: function(data) {
            // ошибка
        }
    });
};