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, ya que hay que cargar el script de una manera especial. El div como tal es lo mismo pero cambia el javascript

En la vista:

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

        document.addEventListener('DOMContentLoaded', () => {
            
            {{-- Para abrir el modal de alerta de precios --}}
            var myModal_alerta = new bootstrap.Modal(document.getElementById('modal_alerta_precio'));

            window.addEventListener('abrir_modal_alerta_precio', event => {
                var script = document.createElement('script');
                script.src = 'https://www.google.com/recaptcha/api.js?onload=handle&render=explicit';
                document.body.appendChild(script);
                myModal_alerta.show();
            });
            window.addEventListener('cerrar_modal_alerta_precio', event => {
                myModal_alerta.hide();
                var alerta_precio = new bootstrap.Modal('#aviso_alerta_precio');
                alerta_precio.show();

            });
            {{-- /Para abrir el modal de alerta de precios --}}
        });

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.