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ệĐă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à 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 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,...
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ý.
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.
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:
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 ValidRecaptchaTrong 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
Sudo E-Commerce tư vấn, triển khai và xây dựng giải pháp tổng thể về Website, Phần mềm, quảng cáo cho doanh nghiệp.
Liên hệ với chúng tôi:
Tầng 3 - Dolphin Plaza (Tháp 3-4), số 6 Nguyễn Hoàng, P. Mỹ Đình 2, Q. Nam Từ Liêm, Hà Nội.
Tầng 3, Số 19 Cổ Vân, H. Đông Anh, Hà Nội.
Tầng 14 - Dầu Khí Nghệ An (Tháp A), Số 7 Quang Trung, P. Quang Trung, Tp Vinh, Nghệ An.
Dorfstrasse 14, 8956 Killwangen, Thụy Sĩ
Hotline: 0989.022.022 - 0819.022.022 - 0777.161.161 - (84)989022022
Email: [email protected]
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 *