Hướng dẫn tích hợp Google reCaptcha vào website

Cập nhật: Lượt xem: 1400 [ PHP ]

Việc bắt người dùng nhập Captcha trước khi submit form sẽ giảm thiểu rất nhiều những thư spam từ các robot. Các bạn sẽ chẳng cần phải lập trình gì nhiều để tạo Captcha, mà có thể tận dụng ngay chức năng này từ Google. Hiện nay có rất nhiều trang web hay bog nổi tiếng cũng sử dụng chức năng này từ gã khổng lồ google. Trong bài viết này, mình sẽ chia sẻ cho các bạn từng bước cài đặt Google Captcha cho website.

Hướng dẫn tích hợp Google reCaptcha vào website

Đầu tiên, chúng ta sẽ cần có API key, vào trang https://www.google.com/recaptcha/admin để đăng ký tên miền sẽ sử dụng captcha.

register

Sau khi đăng ký xong, các bạn sẽ nhận được site keysecret key:

keys

Hoàn thành các bước trên, các bạn nhớ chèn đoạn script bên dưới vào bên trong thẻ <head> trong trang web của các bạn.

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

Và các bạn copy đoạn code sau và dán vào nơi mà các bạn muốn hiển thị captcha.

<div class="g-recaptcha" data-sitekey="YOUR SITE KEY"></div>

Để dễ hiểu, mình xin tổng hợp lại như sau:

<!DOCTYPE HTML>
<html>
<head>
<title>Google new reCaptcha</title>
<meta charset="UTF-8" />
<link type='text/css' rel='stylesheet' href='css/reset.css' />
<link type='text/css' rel='stylesheet' href='css/structure.css' />
<script src="https://www.google.com/recaptcha/api.js"></script>
</head>
<body>
<form class="box login" method="post" action="">
<fieldset class="boxBody">
  <label id="msg"><?php echo $message; ?></label>
  <label>Username</label>
  <input type="text" tabindex="1" name="username" value="demo" required>
  <label>
  <a href="#" class="rLink" tabindex="5">Forget your password?</a>Password
  </label>
  <input type="password" name="password" tabindex="2" value="demo" required>
</fieldset>
<div class="g-recaptcha" data-sitekey="YOUR SITE KEY"></div>
<footer>
  <input type="submit" class="btnLogin" value="Login" tabindex="4">
</footer>
</form>
<footer id="main">
</footer>
</body>
</html>

PHP

Đây là phần kiểm tra lại giá trị nhập của người dùng ở phần backend.

<?php
  
class GoogleRecaptcha 
{
    /* Google recaptcha API url */
    private $google_url = "https://www.google.com/recaptcha/api/siteverify";
    private $secret = 'YOUR_SECRET_KEY';
  
    public function VerifyCaptcha($response)
    {
        $url = $this->google_url."?secret=".$this->secret.
               "&response=".$response;
  
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, $url);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
        curl_setopt($curl, CURLOPT_TIMEOUT, 15);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, TRUE);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, TRUE); 
        $curlData = curl_exec($curl);
  
        curl_close($curl);
  
        $res = json_decode($curlData, TRUE);
        if($res['success'] == 'true') 
            return TRUE;
        else
            return FALSE;
    }
  
}
  
$message = 'Google reCaptcha';
  
if($_SERVER["REQUEST_METHOD"] == "POST")
{
    $response = $_POST['g-recaptcha-response'];
  
    if(!empty($response))
    {
          $cap = new GoogleRecaptcha();
          $verified = $cap->VerifyCaptcha($response);
  
          if($verified) {
            $message = "Captcha Success!";
          } else {
            $message = "Please reenter captcha";
          }
    }
}
?>

Mình hy vọng là các bạn sẽ thực hiện thành công chức năng này cho website của mình.