padosoft / invisible-recaptcha
为Laravel提供的无痕reCAPTCHA。
Requires
- php: ^5.6.4 || ^7.0 || ^8.0 || ^8.1
- ext-curl: *
- ext-json: *
- illuminate/http: ^5.0|^6.0|^7.0|^8.0|^9.0|^10.0|^11.0
- illuminate/support: ^5.0|^6.0|^7.0|^8.0|^9.0|^10.0|^11.0
Requires (Dev)
- illuminate/view: ^5.0|^6.0|^7.0|^8.0|^9.0|^10.0|^11.0
- phpunit/phpunit: ^8.0|^9.0|^10.0
- roave/security-advisories: dev-latest
This package is auto-updated.
Last update: 2024-09-21 08:29:34 UTC
README
为什么要使用无痕reCAPTCHA?
从albertcht/invisible-recaptcha分叉而来
无痕reCAPTCHA是reCAPTCHA v2(无验证码)的改进版。在reCAPTCHA v2中,用户需要点击“我不是机器人”按钮来证明他们是人类。在无痕reCAPTCHA中,不会嵌入验证码框供用户点击。它完全不可见!只有徽章会显示在页面底部,提示用户你的网站正在使用这项技术。(徽章可以被隐藏,但建议不要隐藏。)
注意
- 主分支不支持多验证码功能,如需此功能,请使用
multi-forms
分支。(大多数情况下,当你尝试在一个页面上放置多个验证码时,你会错误地使用recaptcha。)
安装
composer require padosoft/invisible-recaptcha
Laravel 5
设置
将ServiceProvider添加到app/config/app.php
文件中的providers数组。
Padosoft\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,您可以隐藏徽章标志。
您可以通过将
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>
标签时会抛出控制台错误。
您可以在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 \Padosoft\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 \Padosoft\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 } }); };
示例仓库
仓库地址:https://github.com/albertcht/invisible-recaptcha-example
此仓库展示了如何使用ajax方式使用此包。
展示
致谢
- anhskohbo(无验证码包的作者)
- albertcht(原始包的作者)
- 贡献者