Laravel intégration reCaptcha

Question

Je voudrais mettre en œuvre reCaptcha dans mon projet Laravel sans en utilisant des paquets Laravel. J'ai essayé avec reCaptcha V2 classique qui fonctionne, mais je voudrais implémenter reCaptcha invisible à la place.

Donc ce que je l'ai fait est ceci:

<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> 

je suis arrivé flottant bar reCaptcha à droite apparaissent correctement, mais bien sûr, puisque je besoin d'un bouton pour effectuer la soumission réelle j'ai un bouton de type soumettre, et aucune des fonctions de rappel de reCaptcha div n'est déclenchée. Lorsque je retourne la demande, je reçois g-recaptcha-response vide.

Pourquoi ne pas obtenir soumis indépendante du rappel?

Answer 1

La fonction de rappel de reCaptcha ne se déclenche pas, cela dépend de l'endroit où vous avez défini votre fonction de rappel.

Il ne doit pas être défini à l'intérieur $(document).ready() ou window.onload portée

Pour soumettre le jeton captcha au serveur, placez un champ de saisie caché au sein de votre formulaire

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

Remplacer le bouton soumettre à une régulière Pour que le formulaire ne soit pas envoyé, supprimez le captcha <div> car il n'est pas nécessaire.

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

et vous pouvez remplir la valeur en utilisant la fonction de rappel et soumettre le formulaire

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

et accéder au jeton captcha dans le contrôleur en utilisant Input::get('reCaptchaToken')

Answer 2

Voici comment le faire correctement par étendre le Validator, cependant cette solution utilise le paquet google/recaptcha (qui est beaucoup plus élégant que CURL).

composer require google/recaptcha "~1.1" 

Créez une nouvelle valeur de configuration pour recaptcha_secret_key et recaptcha_site_key dans config/app.php ou un autre fichier de configuration personnalisé.

Dans AppServiceProvider méthode boot():

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(); 
}); 

En resources/lang/validation.php ajouter:

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

, ajoutez également ce au tableau attributes dans le même fichier afin de rendre le message d'erreur plus agréable:

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

En le fichier de vue que vous voulez afficher le reCAPTCHA par ex. 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> 

Ajouter à la data-size="invisible" etc. div si vous le voulez invisible.

Enfin, ajouter la nouvelle règle de validation à votre contrôleur:

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