حل مشکل ریکپتچا ورژن 2 در لایووایر . reCAPTCHA v2 in livewire

سلام دوستان برنامه نویس
در این مقاله میخوام مشکلی که خودم بهش برخوردم و پس از کلی تحقیق و جستو جو تونستم حلش کنم را با شما در میان بزارم تا اگر به این مشکل برخوردید به راحتی حلش کنید

خب تو قدم اول ما نیاز به یک پکیج داریم که روی پروژه ی لایو وایریمون نصبش کنیم

composer require google/recaptcha

کد بالا را در ترمینال پروژمون میزنیم تا این پکیج ریکپچا نصب بشه
بعد داخل فایل کانفیگمون میشیم و داخل فایل سرویس میریم و sitekey و secretkey ریکپچامونا وارد میکنیم به این صورت

config/services.php:

'recaptcha' => [
    'site_key' => 'paste your site key here',
    'secret_key' => 'paste your secret key here',
],

بعد که اینکارو انجام دادیم باید بریم یک Rule جدید بسازیم مثلن اسم Rule را میزاریم ReCaptchaRule و کد های زیر را داخل اون کپی میکنیم:

class ReCaptchaRule implements Rule
{

    public function __construct()
    {

    }

    public function passes($attribute, $value)
    {

        $recaptcha = new ReCaptcha(config('services.recaptcha.secret_key'));
        $resp = $recaptcha->verify($value, request()->ip());

        return $resp->isSuccess();
    }

    public function message()
    {
        return 'شما به عنوان ربات تشخیص داده شده اید';
    }
}

خب اینجا دیگه تقریبا کار تمومه و بقیه کار ها تکراری میشه ولی آموزش میدم تا کسی به مشکل برنخوره

حالا میریم سر وقت کامپوننت لایو وایریمون و به این صورت پیاده سازیش میکنیم .

class Register extends Component
{
    public $name, $password, $password_confirmation, $recaptcha;

    public function render()
    {
        return view('auth.register');
    }

    public function register()
    {
        $validator = Validator::make(
            [
                'name' => $this->name,
                'password' => $this->password,
                'password_confirmation' => $this->password_confirmation,
                'recaptcha' => $this->recaptcha,
            ],
            [
                'name' => ['required', 'alpha_dash', 'max:25', 'unique:users'],
                'password' => ['required', 'confirmed'],
                'recaptcha' => ['required', new ReCaptchaRule],
            ]
        );

        if ($validator->fails()) {
            $this->setErrorBag($validator->errors());
            $this->emit('resetReCaptcha');

            return null;
        }

        $user = User::query()->create([
            'name' => $this->name,
            'password' => $this->password,
        ]);

        auth()->login($user, true);

        return redirect()->intended(RouteServiceProvider::HOME);
    }
}

الان کد هایی که لازمه داخل view کامپوننت بزاریم به این شکل باید باشه :

<div class="row justify-content-center">
    <div class="col-md-4">
        <form class="card" wire:submit.prevent="register">
            <div class="card-header">
                Register
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Name</label>
                    <input type="text" class="form-control @error('name') is-invalid @enderror" wire:model.defer="name">
                @error('name')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>

                <div class="mb-3">
                    <label class="form-label">Password</label>
                    <input type="password" class="form-control @error('password') is-invalid @enderror" wire:model.defer="password">
                    @error('password')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>

                <div class="mb-3">
                    <label class="form-label">Confirm Password</label>
                    <input type="password" class="form-control @error('password_confirmation') is-invalid @enderror" wire:model.defer="password_confirmation">
                    @error('password_confirmation')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>

                <div class="text-center overflow-hidden mb-3">
                    <div class="g-recaptcha d-inline-block" data-sitekey="{{ config('services.recaptcha.site_key') }}"
                         data-callback="reCaptchaCallback" wire:ignore></div>
                    @error('recaptcha')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                </div>

                <button type="submit" class="btn btn-primary w-100">Register</button>
            </div>
        </form>
    </div>
</div>

@section('scripts')
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>

    <script>
        function reCaptchaCallback(response) {
            @this.set('recaptcha', response);
        }

        Livewire.on('resetReCaptcha', () => {
            grecaptcha.reset();
        });
    </script>
@endsection

فقط حواستون باشه باید در ویو app.blade.php اصلی سایتتون به صورت زیر این کد را بزارید در زیر همه ی کدهای اسکرپیتی که به صفحتون اضافه کردید تا موقعی که اطلاعات غلط وارد شد ریکپتچا ریسیت بشه و مجددا اعتبار سنجی انجام بشه

 @yield('script') 

.

نکته مهم : توجه کنید باید wire:ignore حتمن وجود داشته باشه ، اگه نباشه به مشکل بر میخورید
دوستان خوشحال میشم نظرتون در مورد این آموزش با من درمیان بزارید و باعث دلگرمی من میشه تا تجربیاتم بهتون آموزش بدم
البته این یک راه هست و ممکنه راه های بهتری هم وجود داشته باشه
اگر به مشکلی برخورد کردید زیر همین پست بنویسید تا اگر بلد بودم بتونم کمکتون کنم

با تشکر از وبسایت آموزشی راکت و سید حسام موسوی