Laravel livewire recapTCHA s3 kullanimi

Yazar: | 10 Kasım 2021

Google tarafindan hazirlanan ve web sitelerinin bot aktivitelerine karsi engel olarak recapTCHA kullanilmaktadir. Yeni versiyonda recapTCHA s3 ile ben robot degilim alanini secmek zorunda degilsiniz. Sitede kullanmak istediginiz sayfaya eklemeniz yeterli, tabi bir de server side duzenleme yapilmasi gerekmektedir.

Nasil yapiyoruz, oncelikle aklimizda olmasi gereken local bilgisayarda projeyi kodlarkan recapTCHA calismiyor. Bunu cozmek icin google recapTCHA s3 test edilmesi icin test keyleri veriyor. Detaylarini buradan inceleyebilirsiniz

Laravel projemizde normal controller yapisi yerine liviwere kullanacaksaniz, bu durum genel olarak ciddi avantajlar sunuyor ama bazi duzenlemeler yapmaniz da gerekiyor.

Livewire konusuna bu yazida girmiyorum siz detaylarina bu linkten bakabilirsiniz.

Firstly, load the JavaScript API.

 <script src="https://www.google.com/recaptcha/api.js"></script>
CAPTCHA_SITE_KEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
CAPTCHA_SITE_SECRET=6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe

Livewire blade kisminda contact form alanimiz olmali ve alt kisma google recaptcha js bilgilerini eklemeliyiz.

 <form class="theme-form" wire:submit.prevent="contactForm">
                        <div class="form-row row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="contact-name">{{ __('Name') }}</label>
                                    <input id="name" type="text"
                                        class="form-control  @error('name') border-danger @enderror"
                                        wire:model.defer="name" name="contact-name">
                                    @error('name') <p class="text-danger">{{ $message }}</p> @enderror
                                </div><!-- End .form-group -->
                            </div>

                            <div class="col-md-6">                                
                                    <label for="contact-email">{{ __('E-mail') }}</label>
                                    <input  class="form-control @error('email') border-danger @enderror"
                                        wire:model.defer="email" name="contact-email">
                                    @error('email') <p class="text-danger">{{ $message }}</p> @enderror
                                </div><!-- End .form-group -->
                           


                            <div class="col-md-6">
                                <label for="contact-subject">{{ __('Subject') }}</label>
                                <input type="text" class="form-control " wire:model.defer="subject"
                                    name="contact-subject">

                            </div><!-- End .form-group -->

                            <div class="col-md-6">
                                <label for="contact-subject">{{ __('Phone') }}</label>
                                <input type="text" class="form-control " wire:model.defer="phone"
                                    name="contact-subject">

                            </div><!-- End .form-group -->

                            <div class="form-group mb-0">
                                <label for="contact-message">{{ __('Message') }}</label>
                                <textarea cols="30" rows="5" wire:model.defer="message"
                                    class="form-control @error('message') border-danger @enderror"
                                    name="contact-message"></textarea>
                                @error('message') <p class="text-danger">{{ $message }}</p> @enderror
                            </div><!-- End .form-group -->
                        </div>
                        <button class="btn btn-solid" type="submit"
                            onclick="handle()">{{ __('Send Message') }}</button>
                       
                    </form>
                    <script src="https://www.google.com/recaptcha/api.js?render={{ env('CAPTCHA_SITE_KEY') }}"></script>
                    <script>
                        function handle(e) {
                            
                            grecaptcha.ready(function() {
                                grecaptcha.execute('{{ env('CAPTCHA_SITE_KEY') }}', {
                                        action: 'submit'
                                    })
                                    .then(function(token) {
                                        @this.set('captcha', token);

                                    });
                            })
                        }
                    </script>

livewire controller kismina ise

<?php

namespace App\Http\Livewire\Frontend;

use App\Models\ContactForm;
use App\Models\Setting;
use Illuminate\Support\Facades\Http;
use Livewire\Component;

class ContactComponent extends Component
{
    public $name;
    public $subject;
    public $email;
    public $message;
    public $phone;
    public $isRead = 0;

    public $captcha = 0;

    public function updatedCaptcha($token)
    {
        $response = Http::post('https://www.google.com/recaptcha/api/siteverify?secret='.env('CAPTCHA_SITE_SECRET').'&response='.$token);

     $this->captcha = $response->json(['score']);
        // delete when deployment, check when control in local machine
        $this->captcha = 0.4;

        if ($this->captcha > .3) {
            $this->submit();
        } else {
            $this->emit('alert', ['type' => 'warning', 'message' => __('Google thinks you are a bot, please refresh and try again')]);
        }
    }

    public function validate_form(){
        $this->validate(
            [
                'name' => 'required|min:2',
                'email' => 'required|min:2|email',
                'message' => 'required|min:10',

            ],
            [
                'name.required' => __('Name is required !'),
                'email.required' => __('Email is required !'),
                'message.required' => __('Message is required !')
            ]
        );
    }

    public function contactForm(){
// dont delete this function
    }

    public function submit()
    {
        $this->validate_form();

     

        $form = new ContactForm();

        $form->name = $this->name;
        $form->email = $this->email;
        $form->subject = $this->subject;
        $form->phone = $this->phone;
        $form->message = $this->message;

        $form->isRead = $this->isRead;

        $result =  $form->save();

        $this->name = "";
        $this->email = "";
        $this->subject = "";
        $this->phone = "";        
        $this->message = "";


        if ($result) {
            $this->emit('alert', ['type' => 'success', 'message' => __('Contact form sent successfully')]);
        }
    }


    public function render()
    {
        $contact_info = Setting::find(1)->first();

        return view('livewire.frontend.contact-component', ['contact_info' => $contact_info, 'setting' => Setting::where('id', 1)->first()])->layout('layouts.frontend');
    }
}

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir