Google reCAPTCHA v2 trong Laravel 11

Trong thế giới kỹ thuật số ngày nay, việc xác minh rằng người tương tác với các trang web và ứng dụng là con người thật, chứ khồng phải robot hay chương trình tự động, nó trở nên vô cùng quan trọng. Điều này giúp ngăn chặn các hành vi spam, lạm dụng hệ thống và bảo vệ an ninh, quyền riêng tư của người dùng. Một trong những giải pháp phổ biến để giải quyết vấn đề này chính là sử dụng Google reCAPTCHA v2

Google reCAPTCHA v2 là gì?

Google reCAPTCHA v2 là một dịch vụ miễn phí do Google cung cấp, giúp các trang web và ứng dụng có thể phân biệt giữa người dùng thật và các hoạt động tự động (như bot, script, v.v.), đồng thời bảo vệ chống lại spam và lạm dụng hệ thống. Nó là phiên bản cập nhật của reCAPTCHA truyền thống, với nhiều cải tiến đáng kể về trải nghiệm người dùng và khả năng chống lại bot.

Khác với phiên bản cũ yêu cầu người dùng phải nhập mã captcha, reCAPTCHA v2 sử dụng một hệ thống xác thực linh hoạt hơn, dựa trên phản ứng và hành vi của người dùng. Nó có thể được triển khai theo hai cách:

Checkbox reCAPTCHA: Người dùng chỉ cần tick vào một hộp kiểm tra để xác nhận rằng họ không phải robot.
Invisible reCAPTCHA: Không yêu cầu bất kỳ tương tác nào từ người dùng, mà thay vào đó sẽ đánh giá hành vi của họ trên trang web để phân loại.

Google reCAPTCHA v2 sử dụng các thuật toán học máy tiên tiến để phân tích hành vi của người dùng, như cách họ di chuyển chuột, nhập liệu, và tương tác với trang web. Điều này giúp nó có thể phát hiện và ngăn chặn các hoạt động tự động một cách hiệu quả hơn so với captcha truyền thống.

Tính năng này đã được tích hợp vào nhiều nền tảng và ứng dụng web phổ biến, bao gồm cả Laravel - một trong những framework PHP nổi tiếng. Trong phần tiếp theo, chúng ta sẽ tìm hiểu cách triển khai Google reCAPTCHA v2 trong Laravel 11 với một form contact nhé.

Triển khai Google reCAPTCHA v2 trong Laravel 11

Bước 1: Install Laravel

Tạo dự án laravel 11 với lệnh:
composer create-project laravel/laravel:^11.0 laravel-google-reCaptcha-v2-app

Bước 2: Add Google API Key

Để sử dụng dịch vụ Google ReCaptcha v2 bạn cần phải có SITE KEY và Secret Key.

Tạo tài khoản tại (nếu chưa có): https://www.google.com/recaptcha/admin/create
Đặt tên ứng dụng, chọn loại xác thực reCAPTCHA, thêm domain. Sau đó nhấn submit sẽ hiện ra giao diện với 2 key như ảnh bên dưới.
Thêm 2 biến đó vào .env của Laravel

GOOGLE_RECAPTCHA_SITE_KEY=6LeAY6UpAAAAAAmZCcvNJZEQkWkeAdwsHtSe-k11
GOOGLE_RECAPTCHA_SECRET_KEY=6LeAY6UpAAAAAKFq-3Chh_zTVxHaImZ5FmyJqbcM

Bước 3: Create Route trong Laravel

Trong bước này, mình tạo 2 route GET, POST
routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\ContactController;
   
<?php

use App\Http\Controllers\ContactController;
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Route::get('contact-us', [ContactController::class, 'index']);
Route::post('contact-us', [ContactController::class, 'store'])->name('contact.us.store');

Bước 4: Create Validation Rule

Trong bước này, chúng Ta sẽ tạo quy tắc xác thực "ReCaptcha" mới để kiểm tra xem người dùng có thật hay không bằng cách sử dụng API google recaptcha v2 với câu lệnh:
PHP artisan make:rule ReCaptcha
Tại app/Rules/ReCaptcha.php update lại các rule validate như sau:

<?php

namespace App\Rules;

use Closure;
use Illuminate\Contracts\Validation\ValidationRule;
use Illuminate\Support\Facades\Http;

class ReCaptcha implements ValidationRule
{
    /**
     * Run the validation rule.
     *
     * @param  \Closure(string): \Illuminate\Translation\PotentiallyTranslatedString  $fail
     */
    public function validate(string $attribute, mixed $value, Closure $fail): void
    {
        $response = Http::get("https://www.google.com/recaptcha/api/siteverify", [
            'secret' => env('GOOGLE_RECAPTCHA_SECRET_KEY'),
            'response' => $value
        ]);

        if (!$response->json()["success"]) {
            $fail('The google recaptcha is required.');
        }
    }
}

Bước 5: Tạo Controller

Trong bước này, chúng ta tạo ContactController và chúng ta cũng cần thêm hai phương thức index() và store(). Chúng ta sẽ sử dụng xác thực reCaptcha trên phương thức store():

php artisan make:controller ContactController

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Rules\ReCaptcha;
  
class ContactController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index()
    {
        return view('contactForm');
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required',
            'email' => 'required|email',
            'phone' => 'required|digits:10|numeric',
            'subject' => 'required',
            'message' => 'required',
            'g-recaptcha-response' => ['required', new ReCaptcha]
        ]);
  
        $input = $request->all();
  
        /*------------------------------------------
        --------------------------------------------
        Write Code for Store into Database
        --------------------------------------------
        --------------------------------------------*/
  
        return redirect()->back()->with(['success' => 'Contact Form Submit Successfully']);
    }
}

Bước 6 Tạo UI Form

Tạo Ui contact trong thư: resources/views/contactForm.blade.php

<!DOCTYPE html>
<html>

<head>
    <title>Laravel Google ReCaptcha V2 Example - ItSolutionStuff.com</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" />
    <script src='https://www.google.com/recaptcha/api.js'></script>
</head>

<body>
    <div class="container">
        <div class="row mt-5 mb-5">
            <div class="col-10 offset-1 mt-5">
                <div class="card">
                    <div class="card-header bg-primary">
                        <h3 class="text-white">Laravel Google ReCaptcha V2 Example</h3>
                    </div>
                    <div class="card-body">

                        <form method="POST" action="{{ route('contact.us.store') }}">
                            {{ csrf_field() }}

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <strong>Name:</strong>
                                        <input type="text" name="name" class="form-control" placeholder="Name"
                                            value="{{ old('name') }}">
                                        @if ($errors->has('name'))
                                            <span class="text-danger">{{ $errors->first('name') }}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <strong>Email:</strong>
                                        <input type="text" name="email" class="form-control" placeholder="Email"
                                            value="{{ old('email') }}">
                                        @if ($errors->has('email'))
                                            <span class="text-danger">{{ $errors->first('email') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <strong>Phone:</strong>
                                        <input type="text" name="phone" class="form-control" placeholder="Phone"
                                            value="{{ old('phone') }}">
                                        @if ($errors->has('phone'))
                                            <span class="text-danger">{{ $errors->first('phone') }}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <strong>Subject:</strong>
                                        <input type="text" name="subject" class="form-control" placeholder="Subject"
                                            value="{{ old('subject') }}">
                                        @if ($errors->has('subject'))
                                            <span class="text-danger">{{ $errors->first('subject') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <strong>Message:</strong>
                                        <textarea name="message" rows="3" class="form-control">{{ old('message') }}</textarea>
                                        @if ($errors->has('message'))
                                            <span class="text-danger">{{ $errors->first('message') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <strong>ReCaptcha:</strong>
                                        <div class="g-recaptcha" data-sitekey="{{ env('GOOGLE_RECAPTCHA_SITE_KEY') }}">
                                        </div>
                                        @if ($errors->has('g-recaptcha-response'))
                                            <span
                                                class="text-danger">{{ $errors->first('g-recaptcha-response') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="form-group text-center">
                                <button class="btn btn-success btn-submit">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>