Hướng dẫn capcha của google

Hướng dẫn capcha của google

Mục lục nội dung

  • Google reCAPTCHA là gì ?
  • Cách đăng ký Google reCAPTCHA
    • Đăng ký Google reCAPTCHA v2
    • Đăng ký Google reCAPTCHA v3
    • Hướng dẫn chèn Google reCAPTCHA vào FORM với HTML và PHP
    • Hướng dẫn chèn Google reCAPTCHA v3 vào Contact Form 7

Bạn muốn đăng ký và tích hợp Google reCAPTCHA vào form liên hệ, form đăng ký, form đăng nhập…Bài viết này sẽ hướng dẫn bạn cách làm vô cùng đơn giản và nhanh chóng.

Google reCAPTCHA là công cụ do Google phát hành để chống lại việc đăng ký tự động, đăng ký form, hoạt động trong form của robot, người máy một cách thông minh, bảo mật và hiệu quả nhất.

Giúp bảo mật cho website, hạn chế  bot spam tự động, spam ddos vào hệ thống website.

Từ lúc phát hành đến giờ Google reCAPTCHA đã trải qua 3 phiên bản chính thức gồm: reCAPTCHA v1 với các ký tự chữ được bóp méo mó nhất có thể để khó nhìn hơn đến phiên bản reCAPTCHA v2 là những hình ảnh về cửa hàng, vạch kẻ đường, đèn giao thông, biển báo … cho đến check tick box vào ô reCAPTCHA. Và gần đây nhất và cũng là phiên bản Google reCAPTCHA mới nhất đó là Google reCAPTCHA v3 cực kỳ thông minh, hoạt động ngầm nhưng gần như ngăn chặn tuyệt đối các bot spam tự động khá hiệu quả.

Với Google reCAPTCHA v3 bạn không cần phải làm gì hết hệ thống sẽ hoạt động ngầm và thông báo cho bạn những thông tin chính xác nhất về các bot spam trong trang Dashboard của Google Captcha.

Bạn có thể xem video giới thiệu về Google reCAPTCHA bên dưới:

Video giới thiệu Google reCAPTCHA v2

Video giới thiệu Google reCAPTCHA v3

Cách đăng ký Google reCAPTCHA

Có loại Google reCAPTCHA hiện tại là google cho phép đăng ký đó là Google reCAPTCHA v2 và v3 bạn có thể đăng ký loại nào mà mình thích nhé. Bài viết này mình sẽ hướng dẫn cả 2 cách. Bắt đầu nào.

Bước 1: Truy cập vào đường dẫn Google reCAPTCHA https://www.google.com/recaptcha

Hướng dẫn capcha của google

Nếu đăng ký lần đầu và ở phiên bản cũ thì bạn sẽ click vào Get reCAPTCHA để đăng ký. Hiện tại ở phiên bản mới bạn truy cập vào url > click vào Admin console

Hướng dẫn capcha của google

Bước 2: Đăng nhập bằng tài khoản Gmail của bạn.

Bước 3: Tiến hành đăng ký reCAPTCHA.

Các bạn điền thông tin theo mẫu:

Trong đó:

  • Label: là tiêu đề của CAPTCHA bạn có thể đặt tùy ý sao cho dễ nhớ là được. VD: Google reCAPTCHA v2 trinhcongtri.com
  • Choose the type of reCAPTCHA: Chọn loại reCAPTCHA mà bạn muốn đăng ký là reCAPTCHA v2 hoặc reCAPTCHA v3.

Đăng ký Google reCAPTCHA v2

Nếu bạn đăng ký Google reCAPTCHA v2 thì sẽ có 3 tùy chọn như sau:

  • Check box (Validate requests with the “I’m not a robot” checkbox): Sẽ có một ô check box để click chuột vào “Tôi không phải robot” để vượt qua xác thực CAPTCHA của Google và đôi khi có thêm việc chọn các bức ảnh về một chủ đề nào đó,…
  • Invisible (Validate requests with your own button)”: Xác thực CAPTCHA của Google sẽ được hoạt động ẩn bạn không cần click vào check box.
  • Android (Validate requests in your android app): Xác thực CAPTCHA của Google trên hệ điều hành android.

Ở đây mình sẽ chọn là Check box.

  • Domains (one per line): Nhập tên miền cần đăng ký Google reCAPTCHA, nếu nhiều tên miền thì mỗi tên miền nằm trên một hàng.

VD ở đây mình nhập 1 tên miền demo là: recaptchav2.trinhcongtri.com

Tiếp theo, check vào ô chấp nhận điều khoản của Google (Accept the reCAPTCHA Terms of Service.)

Ô Send alerts to owners? để mặc định được check có nghĩa là Google sẽ gửi cảnh báo cho chủ sở hữu qua email nếu có truy cập bất thường, sự cố về website,…

=> Hoàn tất click vào Register

Hướng dẫn capcha của google

Đợi vài giây sẽ có Keys đăng ký thành công được trả về với 2 giá trị bạn cần quan tâm là:

  • Site key: Mã này dùng để chèn vào file HTML trang web.
  • Secret key: Mã này dùng để kết nối website hoặc form với google (Hãy bảo mật nó !)

Hướng dẫn capcha của google

Như vậy là bạn đã hoàn tất bước đăng ký Google reCAPTCHA rồi đấy.

Đăng ký Google reCAPTCHA v3

Hướng dẫn capcha của google

Tương tự như trên nhưng Google reCAPTCHA v3 không có nhiều tùy chọn như v2.

Để đăng ký thêm Google reCAPTCHA v3 bạn click vào dấu + “Create” ở bên phải bên cạnh nút “Setting” và đăng ký tương tự như hình > Bấm Submit

Hướng dẫn capcha của google

Và đây là kết quả bạn cũng sẽ nhận được 2 giá trị Site KeySecret Key.

Hướng dẫn capcha của google

Giờ thì sẽ tích hợp reCAPTCHA vào form. Ở đây mình sẽ hướng dẫn tích hợp với một số ngôn ngữ phổ biến nha.

Hướng dẫn chèn Google reCAPTCHA vào FORM với HTML và PHP

Bước 1: Chèn đoạn code bên dưới vào file HTML trước thẻ đóng

Mặc định thì Google sẽ tự động nhận diện ngôn ngữ theo ngôn ngữ trình duyệt để hiển thị với 70 ngôn ngữ khác nhau. Để cố định ngôn ngữ là Tiếng Việt bạn có thể sử dụng ?hl=vi (trong đó vi là viết tắt của Vietnamese).

Bạn có thể xem thêm danh sách ngôn ngữ hỗ trợ Tại đây

Đoạn code hoàn chỉnh như sau:

Tiếp theo, dán đoạn code sau đây vào cuối

mà bạn muốn Google reCAPTCHA hiển thị.

<div class="g-recaptcha"data-sitekey="<-Your Site Key->"></div>

Trong đó: <-Your Site Key-> thay bằng Site key bạn đã đăng ký ở bước trên.

Tiếp theo, bạn cần có một đoạn mã code PHP để lấy các tham số xác nhận Google reCAPTCHA. Thay <-Your Secret Key-> bằng Secret Key của bạn.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

if(isset($_POST['submit'])){

   $name;

   $email;

   $message;

   $captcha;

   if(isset($_POST['name'])){

      $name=$_POST['name'];

   }

   if(isset($_POST['email'])){

      $email=$_POST['email'];

   }

   if(isset($_POST['message'])){

      $message=$_POST['message'];

   }

   if(isset($_POST['g-recaptcha-response'])){

      $captcha=$_POST['g-recaptcha-response'];

   }

   if(!$captcha){

      echo'

Xác nhận Google reCAPTCHA v2 trước nhé :)

';

   }else{

      $response =file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=<-Your Secret Key->&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);

      if($response.success ==false){

         echo'

Your account has been logged as a spammer, you cannot continue!

';

      }else{

         echo '

'.$name.' không phải Robot đâu nhé :)

';

      }

   }

}

?>

Và đây là code hoàn chỉnh, mình có thêm chút css cho đẹp nhé.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

if(isset($_POST['submit'])){

   $name;

   $email;

   $message;

   $captcha;

   if(isset($_POST['name'])){

      $name=$_POST['name'];

   }

   if(isset($_POST['email'])){

      $email=$_POST['email'];

   }

   if(isset($_POST['message'])){

      $message=$_POST['message'];

   }

   if(isset($_POST['g-recaptcha-response'])){

      $captcha=$_POST['g-recaptcha-response'];

   }

   if(!$captcha){

      echo'

Xác nhận Google reCAPTCHA v2 trước nhé :)

';

   }else{

      $response =file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=6LeyMY4UAAAAAJi5yo321Fi_U-M9pqyGwS55wGEF&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);

      if($response.success ==false){

         echo'

Your account has been logged as a spammer, you cannot continue!

';

      }else{

         echo '

'.$name.' không phải Robot đâu nhé :)

';

      }

   }

}

?>

<!DOCTYPE html>

<html>

<head>

<title>Demo Google reCAPTCHA v2-TrinhCongTri</title>

<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>

</head>

<body>

<div class="register">

<h2>Demo Google reCAPTCHA v2</h2>

<form method="post">

<input type="text"name="name"placeholder="Tên của bạn"required name="name"/>

<input type="email"name="email"placeholder="Email của bạn"required name="email"/>

<textarea name="message"placeholder="Tin nhắn của bạn"required name="message"></textarea>

<input type="submit" name="submit"value="ĐĂNG KÝ"><br><br>

<div class="g-recaptcha"data-sitekey="6LeyMY4UAAAAAGZvqY5g3dhIvujH1zAVURVvyTD7"></div>

</form>

</div>

</body>

</html>

Hoặc bạn cũng có thể sử dụng code php tùy biến sau:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

if(isset($_POST['g-recaptcha-response'])){

// RECAPTCHA SETTINGS

$captcha=$_POST['g-recaptcha-response'];

$ip=$_SERVER['REMOTE_ADDR'];

$key='<-Your Site Key->';

$url='https://www.google.com/recaptcha/api/siteverify';

// RECAPTCH RESPONSE

$recaptcha_response=file_get_contents($url.'?secret=<-Your Secret Key->'.$key.'&response='.$captcha.'&remoteip='.$ip);

$data= json_decode($recaptcha_response);

   if(isset($data->success)&&  $data->success===true){

// Your code

   }

else{

  die('Your account has been logged as a spammer, you cannot continue!');

   }

}

?>

Hướng dẫn chèn Google reCAPTCHA v3 vào Contact Form 7

Nếu bạn sử dụng WordPress thì việc tích hợp Google reCAPTCHA vào khá đơn giản.

Lưu ý: Plugin Contact Form 7 phiên bản mới nhất yêu cầu bạn phải sử dụng Google reCAPTCHA v3 mới nhất để tích hợp và nó hoạt động ngầm nên sẽ rất phù hợp và không gây khó chịu cho người dùng.

Bước 1: Cài đặt và kích hoạt plugin Contact Form 7

Hướng dẫn capcha của google

Bước 2: Chọn Form liên hệ > Tích hợp > reCAPTCHA > Setup Integration

Hướng dẫn capcha của google

Tiếp theo, dán Site Key và Secret Key vào và click Save Changes

Hướng dẫn capcha của google

Hoàn tất !

Hướng dẫn capcha của google

Chúc các bạn thành công !