一行代码为表单加防护:invisible-recaptcha的@captcha Blade指令完整使用指南
一行代码为表单加防护invisible-recaptcha的captcha Blade指令完整使用指南【免费下载链接】invisible-recaptchaAn invisible reCAPTCHA package for Laravel, Lumen, CI or native PHP.项目地址: https://gitcode.com/gh_mirrors/in/invisible-recaptchainvisible-recaptcha 是一个为 Laravel、Lumen、CodeIgniter 或原生 PHP 集成 Google invisible reCAPTCHA 的免费开源包。它的核心卖点很简单只需在 Blade 模板中写一行captcha就能给登录、注册、留言等表单加上防机器人校验而用户全程看不到任何验证码——无需勾选我不是机器人体验几乎零打扰。本文面向新手带你从零完成安装、配置、使用与验证。为什么选择 invisible reCAPTCHA传统的 reCAPTCHA v2 需要用户点击一个复选框证明自己是人流程生硬、转化易流失。invisible reCAPTCHA 则是完全无感的用户无感知页面上不嵌入验证码框仅右下角保留一个小徽章体验更流畅表单提交瞬间自动完成人机校验接入极简单Laravel 中一行 Blade 指令搞定对于登录页、注册页、联系表单这类高价值入口它是提升安全性又不牺牲体验的常见选择。第一步一条命令安装 invisible-recaptcha 包在你的 Laravel 项目根目录执行composer require albertcht/invisible-recaptchaLaravel 5.5 及以上版本支持包自动发现服务提供机会被自动注册声明见composer.json的extra.laravel.providers无需任何手动配置。如果是 Laravel 5.0~5.4需要在config/app.php的providers数组中手动添加AlbertCht\InvisibleReCaptcha\InvisibleReCaptchaServiceProvider::class,第二步申请密钥并完成 .env 配置 ⚙️⚠️ 注意在 Google 申请密钥时一定要选择invisible reCAPTCHA类型普通 v2 密钥无法使用。拿到密钥后把它们写入项目根目录的.env文件// required INVISIBLE_RECAPTCHA_SITEKEY{siteKey} INVISIBLE_RECAPTCHA_SECRETKEY{secretKey} // optional INVISIBLE_RECAPTCHA_BADGEHIDEfalse INVISIBLE_RECAPTCHA_DATABADGEbottomright INVISIBLE_RECAPTCHA_TIMEOUT5 INVISIBLE_RECAPTCHA_DEBUGfalse这些环境变量最终会被映射到默认配置文件src/config/captcha.php中你可以把它 publish 出来按需调整。各选项含义如下配置项作用默认值siteKey/secretKey前端渲染 / 服务端验证的密钥必填hideBadge是否隐藏页面右下角的 reCAPTCHA 徽章falsedataBadge徽章位置可选bottomright、bottomleft、inlinebottomrighttimeout服务端校验请求超时时间秒5debug在浏览器控制台输出元素绑定状态方便排查false第三步一行 captcha 指令完成表单接入 ✨在 Blade 模板的表单里只需要这一行{!! app(captcha)-render() !!} // 或者直接使用 Blade 指令更简洁 captcha支持自定义语言只需传入一个参数captcha(en)动手前请牢记 3 条硬性要求来自项目 README也是最容易踩的坑captcha必须写在form标签内部表单提交按钮的type属性必须是submit一个表单内只能有一个提交按钮这 4 个 Blade 指令都在src/InvisibleReCaptchaServiceProvider.php中注册它们与后端方法一一对应Blade 指令等价方法建议位置captcharender()表单内部一次性渲染全部内容captchaPolyfillrenderPolyfill()head区域captchaHTMLrenderCaptchaHTML()表单内部隐藏校验容器captchaScripts(en)renderFooterJS()页面底部搭配 VueJS 等前端框架时的拆分用法如果你的模板由 Vue 等框架渲染整块script混在组件里会报错。这时可以把渲染过程拆成三步// 1. 放在 head 附近polyfill 脚本 captchaPolyfill // 2. 放在 form 内部隐藏容器 captchaHTML // 3. 放在页面底部reCAPTCHA 脚本支持语言参数 captchaScripts(en)第四步一行验证规则完成服务端校验 ️前端只是发起校验真正的把关在服务端。invisible-recaptcha 已经注册好了一个名为captcha的验证规则在 Form Request 或控制器中直接使用即可$validate Validator::make($request-all(), [ g-recaptcha-response required|captcha, ]);它的原理是服务提供机在启动时通过extend(captcha)注册规则见src/InvisibleReCaptchaServiceProvider.php验证时由src/InvisibleReCaptcha.php中的verifyResponse()方法携带密钥和用户 IP 向 Google 的 siteverify 接口发请求success为true才放行。整个流程你只需要维护那一行规则。进阶自定义提交行为 默认情况下点击提交按钮会自动触发校验并回表。如果你需要更精细的控制可以在页面中定义两个 JS 函数无需额外配置_beforeSubmit——提交前的拦截钩子返回false可跳过验证码校验_beforeSubmit function(e) { // 例如表单未填写完时先不触发校验 return false; // 或 return true 继续触发 }_submitEvent——完全接管提交逻辑适合改成 AJAX 提交。注意务必手动带上g-recaptcha-response字段_submitEvent function() { $.ajax({ type: POST, url: {{route(message.send)}}, data: { name: $(#name).val(), g-recaptcha-response: $(#g-recaptcha-response).val() // 别忘了它 } }); }常见坑与快速排查清单 按钮无效 / 校验不触发检查按钮是否为typesubmit且表单内唯一指令不生效确认captcha写在form内而非表单外面控制台想看看绑定情况将INVISIBLE_RECAPTCHA_DEBUG设为true会输出_submitForm等 3 个关键元素的绑定状态一页多个表单master 分支不支持同页多验证码请改用multi-forms分支多数多验证码场景其实是误用AJAX 提交失败几乎都是因为漏传g-recaptcha-response字段项目文件速览 文件路径职责src/InvisibleReCaptcha.php核心类HTML/JS 渲染与服务端校验src/InvisibleReCaptchaServiceProvider.php注册 4 个 Blade 指令与captcha验证规则src/config/captcha.php默认配置读取 .env 环境变量src/Facades/InvisibleReCaptcha.php门面类便于在代码中直接调用tests/CaptchaTest.php单元测试可参考各方法的预期输出composer.json包定义兼容 PHP 5.6 与 Laravel 5~9写在最后invisible-recaptcha 把 Google invisible reCAPTCHA 的接入成本压缩到了极致composer装包、.env填密钥、表单里一行captcha、验证规则一行required|captcha——四步走完你的 Laravel 表单就已具备了静默的防机器人防护。对于追求流畅体验的登录与留言场景这套方案值得放进你的默认工具箱。✅【免费下载链接】invisible-recaptchaAn invisible reCAPTCHA package for Laravel, Lumen, CI or native PHP.项目地址: https://gitcode.com/gh_mirrors/in/invisible-recaptcha创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
