NHANWEB

Tích hợp Google reCAPTCHA v3 vào CodeIgniter4

Nguyễn Duy Nhân

Bài viết trước mình cũng đã có hướng dẫn Tích hợp Google reCAPTCHA v2 vào CodeIgniter4, trong bài viết tiếp theo này mình sẽ hướng dẫn các bạn tích hợp nốt Google reCAPTCHA v3 vào CodeIgniter4 nữa. Bạn nào chưa đọc bài viết trước liên quan đến chuỗi chủ đề reCaptcha thì đọc lại bài viết đó nhé.

Nọi dung Google reCaptcha là gì và có bai nhiêu loại Google reCaptcha thì vui lòng đọc bài kia (đã dẫn link ở trên), bài viết này sẽ không dài dòng và sẽ tập trung vào việc tích hợp Google reCaptcha vào thôi nhé.

Đăng ký API Google reCaptcha

Tương tự như cách đăng ký reCaptcha V2, để đăng ký reCaptcha V3 bạn vẫn có thể thực hiện bằng một vài thao tác đơn giản mà thôi. Cụ thể như sau:

Sau đó tiến hành lấy API  SITE KEY và SECRET kKEY về xài thôi.

Sau khi có Key giờ là lúc tiến hành lập trình trên CodeIgniter. Let;s go !!

Tích hợp Google reCAPTCHA v3 vào CodeIgniter4

Về cơ bản, cách thích hợp reCaptcha V3 cũng chẳng khác gì tích hợp Google reCAPTCHA v2 cả. Tuy nhiên, vì Google reCaptcha V3 hoạt động dưới nền nên phần trình bày ngoài giao diện người dùng cũng có 1 vài sự thay đổi.

Nếu bạn nào đã đọc vài viết tích hợp Google reCAPTCHA v2 thì sẽ thấy đa phần nội dung cũng sẽ tương tự như V2 mà thôi.

1. Tạo variables lưu trữ SITE KEY và SECRET KEY trên .env

Lưu trữ những chuỗi Site Key và Secrect Key, nơi nào phù hợp hơn file .env

Chúng ta trữ lại như sau:

reCAPTCHA.v3.SITE_KEY = 'xxxxxxxxxx'
reCAPTCHA.v3.SECRET_KEY = 'xxxxxxxxxxxx'

 

2. Bổ sung phương thức Validate

Tạo một file CaptchaValidation.php tại thư mục app/Config File này bạn xây. dựng phương thức xác thực cho reCaptcha. Nội dung của nó như sau:

success && $responseData->score > $score) { // Verified
                    return true;
               }
          }

          $error = "Invalid captacha";

          return false;
     }

}

Cách xác thực của V3 có khác một chút so với V2 là ở phiên bản này reCaptcha sẽ đánh giá mức độ thông qua điểm $score. Giá trị sẽ từ 0 -> 1. Càng về 0 nghĩa lầ Google reCaptcha cho rằng dữ liệu càng giống Bot và ngược lại càng gần với 1 thì Google đánh giá xác thực này đáng tín.

Vậy lám sao Google có thể xác định được ??? Theo những gì mình tìm hiểu được là Google reCaptcha V3 ứng dụng nhiều thông itn mà Google thu thập được; trong đó một trong những yếu tố quan trọng giúp Google xác định được “Human” hay “Bot” là việc nó theo dõi việc di chuyển con trỏ chuột. Cụ thể mình sẽ viết trong một vài viết khác.

Tiếp theo, chúng ta bổ sung phương thức verifyrecaptcha đã tạo trong class CaptchaValidation ở trên vào Validation của CodeIgniter4.

Bạn mở file app/Config/Validation.php và thực hiện một số tinh chỉnh như sau:

Dưới đây là code hoàn chỉnh mà bạn có thể tham khảo và chỉnh theo:


      */
      public $templates = [
          'list' => 'CodeIgniter\Validation\Views\list',
          'single' => 'CodeIgniter\Validation\Views\single',
      ];

      // --------------------------------------------------------------------
      // Rules
      // --------------------------------------------------------------------
}

3. Tạo View

Khác với V2, reCaptcha V3 không cần người dùng thực hiện bất kỳ thao tác nào nên nó cũng ít ảnh hưởng đến layout chung của website. Đây là những việc cụ thể mà bạn cần làm nếu sử dụng V3

  1. Tạo file contact.php trong View để chứa View của tính năng này.
  2. Chèn api.js từ Google vào để kết nối API
  3. Tạo contact form với các dữ liệu bình thường
  4. Tạo script cho sự kiện onSubmit để kiểm tra dữ liệu

Đọc code cho nhanh và đỡ dài dòng nhé:




    
    

    
    

    
    

    
    



    


        

             


                 has('message')){
                 ?>
                      

                           = session()->getFlashdata('message') ?>
                      

                 

                 
Contact US


                 

                 


                     = csrf_field(); ?>

                     
                     getError('recaptcha_response') ) {?>

                          

                                = $validation->getError('recaptcha_response'); ?>
                          

                     

                     

                          
                          

                                
                          


                          
                          getError('name') ) {?>
                                

                                     * = $validation->getError('name'); ?>
                                

                          
                     

                     

                          
                          

                                
                          


                          
                          getError('email') ) {?>
                                

                                     * = $validation->getError('email'); ?>
                                

                          
                     

                     

                          
                          

                                
                          


                          
                          getError('subject') ) {?>
                                

                                     * = $validation->getError('subject'); ?>
                                

                          
                     

                     

                          
                          

                                
                          


                          
                          getError('message') ) {?>
                                

                                     * = $validation->getError('message'); ?>

4.Tạo Controller và Validate reCAPTCHA

Bạn đã có dữ liệu từ View gửi lên với reCaptcha, giờ bạn cần xử lý dữ liệu và gửi email (hoặc tạo thông tin liên hệ gì đó). Cũng như phần trên, mình cũng sẽ chỉ nói đến những thứ liên quan đến reCaptcha.

  1. Tạo Controller
  2. Tạp 2 method chính là index (để load form) và submitContact(để xử lý khi người dùng bấm submit)
  3. Validate dữ liệu đầu vào
  4. Sử dụng phương thức verifyrecaptcha để xác thực reCaptcha
  5. Gửi tin nhắn, email hoặc thông báo sau khi đã validate xong

Đây là code:

validate([
              'name' => 'required',
              'email' => 'required',
              'subject' => 'required',
              'message' => 'required',
              'recaptcha_response' => 'required|verifyrecaptchaV3',
            ],[
              'recaptcha_response' => [
                    'required' => 'Please verify captcha',
              ],
         ]);

         if (!$input) { // Not valid

              $data['validation'] = $this->validator;

              return redirect()->back()->withInput()->with('validation', $this->validator);

         }else{ 
              // Set Session
              session()->setFlashdata('message', 'Request Submitted Successfully!');
              session()->setFlashdata('alert-class', 'alert-success');

         }
         return redirect()->route('/');
     }

}

Vậy là xong ! Cảm ơn bạn makitweb đã viết code cho mình copy cho lẹ :D

Exit mobile version