vietnamese Việt Nam

Tích hợp Google reCAPTCHA v2 vào dự án Laravel

Đăng bởi:

Trần Hậu Kiên

Đăng ngày:

Dec 30, 2020

Đăng ở:

Tin Tức Công Nghệ

Trong các tính năng như liên hệ, đăng ký, bình luận bài viết, yêu cầu khảo sát… đôi khi chúng ta cần xác thực xem các hành động nhập dữ liệu là do người dùng thật sự hay do một robot nào đó. Đặc biệt khi càng ngày tình trạng spam diễn ra mạnh mẽ việc xác thực này là cần thiết. Có rất nhiều cách xác thực như gửi email, sms, captcha… tuy nhiên, với những nơi cần xác định xem là người dùng hay robot nhanh thì captcha là giải pháp tốt nhất.

Captcha là gì?

CAPTCHA là một công cụ xác thực trên website để đảm bảo rằng website của bạn không bị SPAM bằng một công cụ tự động. Theo truyền thống captcha là một hình ảnh với dòng các chữ khó phân tích bởi một chương trình tự động, người dùng phải nhập lại dòng chữ giống với chữ trên hình ảnh để chứng minh họ không phải là cái máy. CAPTCHA truyền thống có thể đáp ứng được yêu cầu đặt ra tuy nhiên đôi khi khá phiền phức, các dòng chữ CAPTCHA đôi khi rất khó đọc đối với người dùng.

reCaptcha

reCAPTCHA là một dịch vụ CAPTCHA của Google miễn phí giúp website của bạn chống lại SPAM, các đăng ký độc hại, hoặc các hình thức tấn công khác, nơi mà các chương trình tấn công cố gắng che giấu bản thân tạo ra các hành vi giống con người. reCAPTCHA với giao diện đơn giản, có thể dễ dàng thêm vào blog, forum hoặc website của bạn,...

0e46658d-df65-48ac-a46e-63547a57e071

Đăng ký Google reCAPTCHA

Trước tiên, bạn cần có một tài khoản Google để tạo Google reCAPTCHA cho website, vào trang đăng ký click vào Get reCAPTCHA. Điền thông tin vào form đăng ký. 

6db9beac-e8aa-4ba1-a20b-f95e941ffac0

 

Như vậy bạn đã tạo ra một reCAPTCHA để sử dụng cho website. Chúng ta sẽ thấy Site key và Secret key được sử dụng để tích hợp reCAPTCHA.

3a4600c5-848a-4407-9f97-2273c59fbc3d

 

Thiết lập cấu hình, tạo class xử lý reCAPTCHA

Hai khóa được tạo ra trong bước đăng ký reCAPTCHA sẽ được đưa vào ứng dụng Laravel thông qua .env hoặc config/app.php

GOOGLE_RECAPTCHA_KEY=6Ler6RkaAAAAABMECWHSY1p_isQ3_UZBaMUwib5x
GOOGLE_RECAPTCHA_SECRET=6Ler6RkaAAAAALzSXq6rsFCRXtQm_Q6QiIniQTcY

 

Trong recaptcha\resources\views\layouts\app.blade.php phần<head> tag thêm đoạn script này vào:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Trong recaptcha\resources\views\auth\register.blade.php ta chỉnh sửa 1 chút bằng cách thêm tag Google reCaptcha vào:

<!-- Google reCaptcha -->
                        <div class="g-recaptcha" id="feedback-recaptcha" data-sitekey="{{ env('GOOGLE_RECAPTCHA_KEY')  }}"></div>
                        <!-- End Google reCaptcha -->

 

Bây giờ truy cập vào trang đăng ký sẽ hiển thị như thế này:

416609d1-ee79-4ccf-b411-5f457c206e08

Phần hiển thị đã xong, bây giờ chúng ta tiếp tục với phần xử lý validate phía server.Tạo mới reCaptcha validate rule:

php artisan make:rule ValidRecaptcha

Trong RegisterController.php thêm function validator như sau:

protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => 'required|string|max:255',
            'email' => 'required|string|email|max:255|unique:users',
            'password' => 'required|string|min:6|confirmed',
            'g-recaptcha-response' => ['required', new \App\Rules\ValidRecaptcha]
        ]);
    }

 

Sau đó chúng ta cần tiến hành định nghĩa rule cho class ValidRecaptcha (recaptcha\app\Rules\ValidRecaptcha.php):

<?php

namespace App\Rules;

use Illuminate\Contracts\Validation\Rule;
use GuzzleHttp\Client;

class ValidRecaptcha implements Rule
{
    /**
     * Create a new rule instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Determine if the validation rule passes.
     *
     * @param  string  $attribute
     * @param  mixed  $value
     * @return bool
     */
    public function passes($attribute, $value)
    {
        // Khởi tạo http client
        $client = new Client([
            'base_uri' => 'https://google.com/recaptcha/api/'
        ]);

        // Gửi dữ liệu đến cho google recaptcha xử lý
        $response = $client->post('siteverify', [
            'query' => [
                'secret' => env('GOOGLE_RECAPTCHA_SECRET'),
                'response' => $value
            ]
        ]);

        // Google reCaptcha trả về kết quả đúng/sai
        return json_decode($response->getBody())->success;
    }

    /**
     * Get the validation error message.
     *
     * @return string
     */
    public function message()
    {
        // Message thông báo khi kết quả trả về là sai
        return 'ReCaptcha verification failed.';
    }
}

 

Vậy là đã hoàn thành tích hợp google reCapcha vào dự án laravel. Còn chần chừ gì nữa mà không đưa ngay vào dự án của mình. Chúc các bạn thành công!

Nguồn tham khảo:

- https://chungnguyen.xyz/posts/tich-hop-google-recaptcha-v2-vao-du-an-laravel

- https://viblo.asia/p/tich-hop-google-recaptcha-trong-laravel-07LKXNP4lV4

 

default_image
Tác giả: Trần Hậu Kiên
ADMIN

Bình luận

Để lại bình luận

Email và số điện thoại sẽ không được công khai. Những trường bắt buộc được đánh dấu *

Repository deleted Your repository has remove
Loading