حل مشکل ریکپتچا ورژن 2 در لایووایر  . reCAPTCHA v2  in livewire
ﺯﻣﺎﻥ ﻣﻄﺎﻟﻌﻪ: 2 دقیقه

حل مشکل ریکپتچا ورژن 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 حتمن وجود داشته باشه ، اگه نباشه به مشکل بر میخورید
دوستان خوشحال میشم نظرتون در مورد این آموزش با من درمیان بزارید و باعث دلگرمی من میشه تا تجربیاتم بهتون آموزش بدم
البته این یک راه هست و ممکنه راه های بهتری هم وجود داشته باشه
اگر به مشکلی برخورد کردید زیر همین پست بنویسید تا اگر بلد بودم بتونم کمکتون کنم

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

چه امتیازی برای این مقاله میدهید؟

خیلی بد
بد
متوسط
خوب
عالی
4.67 از 6 رای

/@hosseindid
حسین بهرامی
برنامه نویس

حسین بهرامی هستم ساکن شهرستان مبارکه ی استان اصفهان ، سه ساله که بطور حرفه ای کد نویسی میکنم و دو سال است روی پروژه ی شخصی خودم فروشگاه تخصصی لپ تاپ دید کار میکنم . تخصص های من css , php , laravel , livewire,java script , و مقدار کمی سئو است .

دیدگاه و پرسش

برای ارسال دیدگاه لازم است وارد شده یا ثبت‌نام کنید ورود یا ثبت‌نام

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید