Laravel: tích hợp google recaptcha v3 vào website

Trong bài viết này, mình sẽ hướng dẫn các bạn tích hợp google recaptcha v3 vào website với framework sử dụng là laravel 6x.

Đăng ký recaptcha v3 key ở đây

Bước 1: Đăng ký thông tin site sử dụng recaptcha v3

Label:  Được sử dụng xác định site của bạn một các dễ dàng

reCAPTCHA type: Loại recaptcha site sẽ sử dụng, trong bài viết này mình sẽ chọn giá trị là reCAPCHA v3.

Domains: Tên domain hoặc subdomain  ký Google reCAPTCHA, tên domain hợp lệ thì không chứa path, port, query hoặc fragment.
Ví dụ:
Tên domain hợp lệ: minhhiep.info hoặc profile.minhhiep.info
Tên domain không hợp lệ: minhhiep.info/, minhhiep.info:80, minhhiep.info?laravel, minhhiep.info#laravel

Nhấn check vào Accept the reCAPTCHA Terms of Service

Nhấn check vào Send alerts to owners nếu bạn muốn nhận thông báo của Google khi site có sự truy cập bất thường.

Click vào SUBMIT để đăng ký Google reCAPTCHA. Tham khảo hình ảnh bên dưới

register captcha
register captcha image

Bước 2: Copy site  key và secret key vào project

Sau khi click SUBMIT ở bước 1 bạn sẽ được đưa đến một trang mới, có chứa các key của dự án.
SITE KEY: Sử dụng key này trên client side
SECRET KEY: Sử dụng để kiểm tra ở phía server side

site key recaptcha
site key recaptcha

Bước 3: Tích hợp recaptcha v3 vào site

3.1 Giới thiệu về recaptcha v3:

Khác với recaptcha v2, trong v3 này goole đã cả tiến đáng kể, recaptcha sẽ không làm gián đoạn sự trải nghiệm của người dùng, recaptcha v3 sẽ tính điểm số cho mỗi lần tương tác của user như tải trang, submit form. Dựa vào số điểm để đánh giá xem lượt tương tác đó là hợp lệ hay lạm dụng.
Chú ý:
– Mỗi reCAPTCHA token sẽ có hết hạn sau hai phút. Nếu như bạn có một hành động sử dụng reCAPTCHA để bảo vệ thì phải chắc chắn rằng nó được thực hiện trước khi tải trang lại.
– Mỗi tên action của reCAPTCHA chỉ chứa các ký tự là chữ và số, và dấu /. Không chứa các ký tự đặc biệt khác.

3.2 Tích hợp theo định nghĩa có sẵn của google:

1. Nhúng thư viện JavaScript API:

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

2. Thêm một callback function  xử lý token:

3. Thêm thuộc tính cho button HTML của bạn:

3.3 Tích hơp với code tự định nghĩa:

1. Nhúng thư viện JavaScript API với sitekey:

<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>

2. Gọi grecaptcha.execute cho mỗi request bạn muốn sử dụng recaptcha:

3. Gửi mã token đến backend để verify, chi tiết ở đây

4. Áp dụng thực tế vào dự án

Giả sử bạn đã cài đặt thành công một project laravel dưới đây là các bước tiếp theo. Nếu chưa cài đặt bạn có thể xem bài viết trước đó.

4.1 Cập nhật site key trong file .env

Trong .env nhập site key và secret key mà bạn đăng ký ở bước 1 vào 2 biến SITE_KEY_GOOGLE_APISECRET_KEY_GOOGLE_API trong .env

4.2 Tạo file site.php chứa config site key

Vào folder config, tạo file site.php có các config như sau:

4.3 Tạo route chứa layout contact

Vào routes/web.php tạo mới một route như sau:

4.4 Tạo file PageController để gọi view và xử lý phần lưu trữ contact

Vào app/Http/Controllers tạo file PageController.php có nội dung như sau:

4.5 Tạo file common.php để chứa các tiêu đề, label của layout contact

Trong resources/lang/en tạo file common.php có nội dung như sau:

4.6. Tạo contact.blade.php chứa view layout và mã javascript recaptcha

Vào resources/views tạo file contact.blade.php có nội dung như sau:

Source code

Nguồn tài liệu tham khảo:

  1. https://developers.google.com/recaptcha/docs/v3
  2. https://recaptcha-demo.appspot.com

Hi vọng sẽ giúp được bạn. Thanks