Recaptcha v2 y Livewire

Para poner en livewire un recaptcha v2, se puede hacer de dos formas.

Poniendo directamente el texto:

<div id="captcha" class="mt-4" wire:ignore></div>

                                @error('captcha')
                                    <p class="mt-3 text-sm text-red-600 text-left">
                                        {{ $message }}
                                    </p>
                                @enderror
                            
                            <script src="https://www.google.com/recaptcha/api.js?onload=handle&render=explicit"
                                async
                                defer>
                            </script>
                            
                            <script>
                                var  handle = function(e) {
                                    widget = grecaptcha.render('captcha', {
                                        'sitekey': '{{ env('RECAPTCHAV2_SITEKEY') }}',
                                        'theme': 'light', // you could switch between dark and light mode.
                                        'callback': verify
                                    });
                            
                                }
                                var verify = function (response) {
                                    @this.set('captcha', response)
                                }
                            </script>Copiando directamente el código completo 

Si hubiera problemas porque hay «modals raros» habría que utilizar esta segunda versión:

En la vista:

  <div id="captcha" class="mt-4" wire:ignore></div>
 
        @error('captcha')
            <p class="mt-3 text-sm text-red-600 text-left">
                {{ $message }}
            </p>
        @enderror

<script src="https://www.google.com/recaptcha/api.js?onload=handle&render=explicit"
    async
    defer>
</script>
 
<script>
    var  handle = function(e) {
        widget = grecaptcha.render('captcha', {
            'sitekey': '{{ env('CAPTCHA_SITE_KEY') }}',
            'theme': 'light', // you could switch between dark and light mode.
            'callback': verify
        });
 
    }
    var verify = function (response) {
        @this.set('captcha', response)
    }
</script>

Y luego en el componente

public $captcha = null;
 
public function updatedCaptcha($token)
{
    $response = Http::post(
        'https://www.google.com/recaptcha/api/siteverify?secret='.
        env('CAPTCHA_SECRET_KEY').
        '&response='.$token
    );
 
    $success = $response->json()['success'];
 
    if (! $success) {
        throw ValidationException::withMessages([
            'captcha' => __('Google thinks, you are a bot, please refresh and try again!'),
        ]);
    } else {
        $this->captcha = true;
    }
}
 
// validate the captcha rule
protected function rules()
{
    return [
        'captcha' => ['required'],
        // ...
    ];
}

Cogido de referencia de la web: https://coderflex.com/blog/enhancing-security-and-user-experience-leveraging-recaptcha-with-laravel-and-livewire#step-9-add-google-recaptcha

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.