1. Principal
  3. PHP y otros
  5. ReCaptcha V2 de Google con Laravel y Livewire

ReCaptcha V2 de Google con Laravel y Livewire

Más
2 años 1 mes antes - 2 años 1 mes antes #48 por luispindola
ReCaptcha V2 de Google con Laravel y Livewire Publicado por luispindola
Primero necesitamos tener un proyecto Laravel (en este caso utilizo Laravel 8 con Livewire v2)

Vamos a usar No CAPTCHA reCAPTCHA: github.com/anhskohbo/no-captcha

Realizamos la instalacion ingresando en consola:
composer require anhskohbo/no-captcha

En app/config/app.php se agrega lo siguiente:

ServiceProvider to the providers array :
Anhskohbo\NoCaptcha\NoCaptchaServiceProvider::class,

aliases array :
'NoCaptcha' => Anhskohbo\NoCaptcha\Facades\NoCaptcha::class,

Publicamos el archivo de configuración en la carpeta config escribiendo en consola:
php artisan vendor:publish --provider="Anhskohbo\NoCaptcha\NoCaptchaServiceProvider"

y por último en el archivo .env agregamos:
NOCAPTCHA_SECRET=secret-key
NOCAPTCHA_SITEKEY=site-key

Hasta aquí finalizamos la instalación de NoCaptcha en laravel.


Ahora creamos un componente livewire:
En mi caso le puse ContactoComponent.

En contacto-component.blade.php ponemos:
<div class="row">
    <div class="span6">
        <div class="card">
            <h3 class="card-heading simple"><strong>Formulario de contacto</strong></h3>
            <div class="card-body">
                <div class="form-group">
                    <input type="text" 
                            class="form-control" 
                            placeholder="Nombre" 
                            wire:model="nombre">
                    @error('nombre')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                <div class="form-group">
                    <div wire:ignore>
                        {!! NoCaptcha::display(['data-callback' => 'onCallback']) !!}
                    </div>
                </div>
                
            </div>
            <div class="card-actions">
                <button type="button" 
                        class="btn btn-primary" 
                        wire:click="contacto"
                        >
                        ENVIAR
                </button>
            </div>
        </div>
    </div>
</div>

@section('scripts')
{!! NoCaptcha::renderJs() !!}
<script type="text/javascript">
    var onCallback = function() {
        @this.
            set('recaptcha',grecaptcha.getResponse());
    };
</script>
@endsection
(en ésta vista se utiliza bootstrap 2.3, deberán hacer las adaptaciones en los nombres de las clases para otras versiones).

En ContactoComponent.php ponemos:
<?php
namespace App\Http\Livewire;

use Livewire\Component;

class ContactoComponent extends Component
{
    public $nombre;
    public $recaptcha;

    protected $rules = [
        'nombre' => 'required|min:6',        
    ];

    public function render()
    {        
        return view('livewire.contacto-component');
    }

    public function contacto()
    {
        $this->validate();

        $captcha = new \Anhskohbo\NoCaptcha\NoCaptcha($_ENV['NOCAPTCHA_SECRET'], $_ENV['NOCAPTCHA_SITEKEY']);
        if($captcha->verifyResponse($this->recaptcha))
        {
            //Se aprobó el reCaptcha
        }
        else
        {
            //No se aprobó el reCaptcha
        }
    }
}

Al ejecutar el componente veríamos algo como sigue:
Adjuntos:
Última Edición: 2 años 1 mes antes por luispindola.

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

  1. Principal
  3. PHP y otros
  5. ReCaptcha V2 de Google con Laravel y Livewire
Tiempo de carga de la página: 0.059 segundos