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條顯示正確，但當然，因爲我需要一個按鈕來執行實際提交我有一個類型的按鈕提交，並且沒有任何來自reCaptcha div的回調函數被觸發。當我返回請求時，我得到空的g-recaptcha-response。

爲什麼不提交獨立於回調？

Answer 1

reCaptcha的回調函數不會觸發，這取決於您定義回調函數的位置。

它不應該內部$(document).ready()或window.onload範圍被定義

要提交驗證碼令牌服務器，你的表單中放置一個隱藏的輸入字段

​​3210

替換常規的提交按鈕按鈕，以便表單不提交，刪除驗證碼<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', 

In要顯示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> 

添加data-size="invisible"等等到div如果你想讓它不可見。

最後，添加新的驗證規則到你的控制器：

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