Laravel reCaptcha 集成

Question

我想在我的 Laravel 项目中不使用 Laravel 包实现 reCaptcha。我已经尝试过使用经典的 reCaptcha V2，它可以工作，但我想实现隐形 reCaptcha。

所以我做的是这样的：

<form id="subscribeForm" class="form-inline" role="form" method="post" action="/subscribe" style="margin-bottom:70px;">
    ...
    ...
    <button type="submit" class="btn btn-default">{{trans('content.input_submit')}}</button>

    <div id="recaptcha" class="g-recaptcha" data-sitekey="---my---key---" data-size="invisible" data-callback="onSubmit"></div>

    <script> ...callback functions... </script>
</form>

我让右侧的浮动 reCaptcha 条正确显示，但当然因为我需要一个按钮来执行实际提交，所以我有一个类型为 submit 的按钮，并且 reCaptcha div 中的任何回调函数都没有被触发。当我返回请求时，我得到 g-recaptcha-response 为空。

为什么不独立于回调而提交？

Answer 1

reCaptcha 的回调函数不会被触发，这取决于你在哪里定义了你的回调函数。

不应在$(document).ready() 或window.onload 范围内定义它

要将验证码令牌提交到服务器，请在表单中放置一个隐藏的输入字段

<input type="hidden" name="reCaptchaToken" value="" id="reCaptchaToken">

将提交按钮替换为常规按钮，以便不提交表单，删除验证码<div>，因为它不需要。

<button type="button" class="btn btn-default g-recaptcha" data-sitekey="your_site_key" data-callback='onSubmit'>{{trans('content.input_submit')}}</button>

您可以使用回调函数填充值并提交表单

// Google reCaptcha callback
function onSubmit (res) {
    document.getElementById("reCaptchaToken").value = res;
    document.getElementById("subscribeForm").submit();
}

并使用Input::get('reCaptchaToken')访问控制器中的验证码

Answer 2

这里是如何通过扩展 Validator 来正确执行此操作，但是此解决方案使用 google/recaptcha 包（比使用 CURL 更优雅）。

composer require google/recaptcha "~1.1"

在config/app.php 或其他自定义配置文件中为recaptcha_secret_key 和recaptcha_site_key 创建一个新的配置值。

在AppServiceProviderboot()方法中：

Validator::extend('recaptcha', function ($attribute, $value, $parameters, $validator) {
    $recaptcha = new ReCaptcha(config('app.recaptcha_secret_key'));
    $resp = $recaptcha->verify($value, request()->ip());

    return $resp->isSuccess();
});

在resources/lang/validation.php 中添加：

'recaptcha' => 'The :attribute answer is invalid.',

此外，将其添加到同一文件内的 attributes 数组中，以使错误消息更清晰：

'g-recaptcha-response' => 'reCAPTCHA',

在您想要显示 reCAPTCHA 的视图文件中，例如contact.blade.php:

<div class="g-recaptcha" data-sitekey="{{ config('app.recaptcha_site_key') }}"></div>
<script src="https://www.google.com/recaptcha/api.js"></script>

如果您希望 div 不可见，请将 data-size="invisible" 等添加到 div。

最后，将新的验证规则添加到您的控制器：

'g-recaptcha-response' => 'recaptcha'