RECAPTCHAV3 trong Laravel 9

Recaptcha của google là công cụ miễn phí và hiệu quả để chống lại Spam request – DDOS tới trang wed của bạn.

Hiện nay, Recaptcha của google đã có phiên bản 3. Nào cùng mình add nó vào dự án sử dụng Laravel, cụ thể là phiên bản 9 nhé.

Mình add recaptcha vào dự án đã dựng sẵn, các bạn nào chưa có dự án thì cứ tìm kiếm và dựng dự án Laravel rồi hãy quay lại đây sau nhé!

Sau khi đã có dự án, mình muốn thêm Recaptchav3 vào để bảo vệ một trang cụ thể. Ở đây, mình lấy trang đăng nhập để làm ví dụ nhé.

Vào dự án, mình chạy terminal sau để cài package: composer require josiasmontag/laravel-recaptchav3

sau đó tiếp: php artisan vendor:publish –provider=”LunawebRecaptchaV3ProvidersRecaptchaV3ServiceProvider”

Cách sử dụng
Khởi tạo Recaptcha Javascript
Recaptcha v3 hoạt động tốt nhất khi nó được tải trên mọi trang để có được ngữ cảnh nhất về các tương tác. Do đó, hãy thêm vào mẫu đầu trang hoặc chân trang của bạn:

{!! RecaptchaV3::initJs() !!}

Tiếp theo là validate:

Các bạn có thể dùng rules trong formRequest hoặc dùng thư viện Validator:
ở đây mình dùng FormRequest:

public function rules()
{
return [
’email’ => ‘bail|required|email’,
‘password’ => ‘bail|required|min:6|max:32’,
‘g-recaptcha-response’ => ‘bail|required’
];
}

Import FacadesRecaptchaV3 vào controller:
use LunawebRecaptchaV3FacadesRecaptchaV3;
// RecaptchaV3::verify($token, $action)
$score = RecaptchaV3::verify($request->get(‘g-recaptcha-response’), ‘register’)
if($score > 0.7) {
// go
} elseif($score > 0.3) {
// require additional email verification
} else {
return abort(400, ‘You are most likely a bot’);
}

Ngoài ra bạn còn có thể ấn icon Recapcha bằng CSS: .grecaptcha-badge { visibility: hidden !important; }

Cuối cùng: Bạn có thể chọn một vài Score khác nhau để Test xem code đã hoạt động như ý hay chưa:

RecaptchaV3::shouldReceive(‘verify’)
->once()
->andReturn(1.0);

Cám ơn các bạn đã đọc tới đây.
Bài viết còn nhiều thiếu sót, mình sẽ cố gắng hoàn thiện hơn!

Nguồn: https://github.com/josiasmontag/laravel-recaptchav3#readme