Làm cách nào để thêm hình ảnh xác thực của Google vào biểu mẫu trong PHP?

Question

Google đã phát hành reCAPTCHA phiên bản 3 gần đây và phiên bản 2 cũng ở đó để bảo vệ chống lại các bot xấu. Để nâng cao năng suất của biểu mẫu Liên hệ, chúng tôi phải triển khai mã reCAPTCHA trong trang web của mình. Nó xác thực biểu mẫu liên hệ chỉ bằng một cú nhấp chuột và nó ngăn bot gửi thư rác

Nội dung chính Show

Tạo khóa API bảo mật & trang web reCAPTCHA
Tích hợp Google reCAPTCHA trong PHP Contact Form
Xác thực reCAPTCHA của Google trước khi gửi biểu mẫu bằng PHP
Google reCAPTCHA trong PHP Ví dụ về biểu mẫu liên hệ
Phần kết luận
Bài viết đề xuất
Làm cách nào để thêm hình ảnh xác thực vào biểu mẫu liên hệ PHP?
Bạn có thể thêm hình ảnh xác thực vào biểu mẫu Google không?
Làm cách nào để thêm Google captcha V3 trong PHP?
Làm cách nào để triển khai Google captcha v2 trong PHP?

Việc triển khai mã reCaptcha của Google trong biểu mẫu liên hệ PHP rất hữu ích từ góc độ UX. Công cụ này được thiết kế đặc biệt để kiểm tra người dùng thực sự chống lại các chương trình xấu. Người dùng phải nhấp vào hộp kiểm để xác nhận danh tính của mình. Đơn giản phải không

Thông thường, Google reCAPTCHA được sử dụng để bảo vệ khỏi bot; . Chúng tôi đã xuất bản hướng dẫn trước về cách tạo CAPTCHA tùy chỉnh bằng PHP

Quy trình tích hợp Google reCAPTCHA

Tạo khóa API bảo mật & trang web reCAPTCHA
Tạo biểu mẫu HTML bằng Bootstrap
Tích hợp reCAPTCHA dưới dạng PHP
Xác thực phản hồi bằng Google reCAPTCHA
Gửi email để đăng dữ liệu biểu mẫu trong PHP

Tạo khóa API bảo mật & trang web reCAPTCHA

Chúng tôi phải có Trang web Google reCaptcha và Khóa bí mật và nó yêu cầu bạn đăng ký tên miền cần được bảo vệ khỏi thư rác

Truy cập trang web reCAPTCHA và đăng ký ứng dụng của bạn

Nhập tên nhãn. Nó giúp bạn nhận ra tên miền đã đăng ký của mình

Chúng ta có thể thấy reCAPTCHA phiên bản 3 và 2, chọn reCAPTCHA v2 > tùy chọn Tôi không phải người máy bằng cách chọn nút radio

Nhập tên miền của bạn, yêu cầu bảo vệ khỏi bot

Click vào nút “Save”, bạn sẽ được chuyển đến một trang mới

Sao chép Khóa trang web reCAPTCHA và Khóa bí mật của bạn, chúng tôi sẽ cần các khóa API này trong bước tiếp theo

Tích hợp Google reCAPTCHA trong PHP Contact Form

Để thêm Google reCAPTCHA Widget ở dạng HTML, chúng tôi yêu cầu đặt tệp JavaScript reCAPTCHA ở cuối trang web. Chỉ cần dán liên kết sau trước khi đóng thẻ body

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

Tiếp theo, bao gồm thẻ HTML g-recaptcha bên trong phần tử Biểu mẫu HTML, đặt nó chính xác ở nơi bạn muốn hiển thị công cụ reCAPTHCA

Tiện ích g-recaptcha đi kèm với thuộc tính khóa data-site. Chúng tôi cần dán khóa trang web mà chúng tôi đã tạo ở bước trước

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

Chỉ định thuộc tính tên trong các trường đầu vào tương tác với API PHP, Xác định hộp cảnh báo để hiển thị thông báo lỗi và thành công

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>PHP Contact Form with Captcha</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  <div class="container mt-5">
    
    <h2>Implement Google reCAPTCHA in PHP Contact Form</h2>
    <?php include('scripts/form.php'); ?>
    <!-- Error messages -->
    <?php if(!empty($response)) {?>
    <div class="form-group col-12 text-center">
      <div class="alert text-center <?php echo $response['status']; ?>">
        <?php echo $response['message']; ?>
      </div>
    </div>
    <?php }?>
    <!-- Contact form -->
    <form action="" name="contactForm" id="contactForm" method="post" enctype="multipart/form-data" novalidate>
      <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" name="name" id="name">
      </div>
      <div class="form-group">
        <label>Email</label>
        <input type="email" class="form-control" name="email" id="email">
      </div>
      <div class="form-group">
        <label>Subject</label>
        <input type="text" class="form-control" name="subject" id="subject">
      </div>
      <div class="form-group">
        <label>Message</label>
        <textarea class="form-control" rows="4" name="message" id="message"></textarea>
      </div>
      <div class="form-group">
        <!-- Google reCAPTCHA block -->
        <div class="g-recaptcha" data-sitekey="6LfZ4AAVAAAAAFP6tyNYWgycDvXHIfjZg9shDZ05"></div>
      </div>
      <div class="form-group">
        <input type="submit" name="send" value="Send" class="btn btn-dark btn-block">        
      </div>
    </form>
  </div>
  <!-- Google reCaptcha -->
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</body>
</html>

Xác thực reCAPTCHA của Google trước khi gửi biểu mẫu bằng PHP

Xác thực trường biểu mẫu đảm bảo người dùng đã nhập các giá trị được yêu cầu hay chưa. Phản hồi reCAPTCHA của Google được kích hoạt dựa trên yêu cầu bài đăng PHP. Lệnh gọi API xác thực mã thông báo và trả về phản hồi JSON thông qua API reCAPTCHA và Khóa bí mật

Người dùng chọn hộp kiểm reCAPTCHA để hoàn thành thử thách reCaptcha. Nếu phản hồi reCAPTCHA thành công, biểu mẫu sẽ được gửi và thông báo sẽ được hiển thị cho người dùng

<?php
    if(isset($_POST["send"])) {
        $name = $_POST["name"];
        $email = $_POST["email"];
        $subject = $_POST["subject"];
        $message = $_POST["message"];
        
        // Form validation
        if(!empty($name) && !empty($email) && !empty($subject) && !empty($message)){
            // reCAPTCHA validation
            if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])) {
                // Google secret API
                $secretAPIkey = '6LfZ4AAVAAAAAF722GPGWyJ_lf1F2hMSWzPHmuYc';
                // reCAPTCHA response verification
                $verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secretAPIkey.'&response='.$_POST['g-recaptcha-response']);
                // Decode JSON data
                $response = json_decode($verifyResponse);
                    if($response->success){
                        $toMail = "[email protected]";
                        $header = "From: " . $name . "<". $email .">\r\n";
                        mail($toMail, $subject, $message, $header);
                        $response = array(
                            "status" => "alert-success",
                            "message" => "Your mail have been sent."
                        );
                    } else {
                        $response = array(
                            "status" => "alert-danger",
                            "message" => "Robot verification failed, please try again."
                        );
                    }       
            } else{ 
                $response = array(
                    "status" => "alert-danger",
                    "message" => "Plese check on the reCAPTCHA box."
                );
            } 
        }  else{ 
            $response = array(
                "status" => "alert-danger",
                "message" => "All the fields are required."
            );
        }
    }  
?>

Google reCAPTCHA trong PHP Ví dụ về biểu mẫu liên hệ

Đây là ảnh chụp màn hình mô tả tiện ích hộp kiểm Google reCAPTCHA mà chúng tôi đã thêm vào biểu mẫu liên hệ PHP

Phần kết luận

Chúng ta đã hoàn thành hướng dẫn PHP Google reCAPTCHA. Chúng ta đã học được cách tích hợp Google reCAPTCHA vào PHP Form một cách dễ dàng. Ngoài ra, hãy tìm hiểu cách triển khai xác thực phía máy chủ cho Google reCAPTCHA phiên bản 2

Bạn cũng có thể xem phân tích CAPTCHA để tìm hiểu luồng yêu cầu

Nhận mã hoàn chỉnh của hướng dẫn này trên GitHub

máy đào

Tôi là Digamber, một nhà phát triển full-stack và là người đam mê thể dục. Tôi đã tạo trang web này để truyền kinh nghiệm mã hóa của mình cho các lập trình viên mới. Tôi thích viết trên JavaScript, ECMAScript, React, Angular, Vue, Laravel

Twitter GitHub

Bài viết đề xuất

Xây dựng hệ thống xếp hạng 5 sao PHP MySQL bằng jQuery AJAXPHP 8 Tìm kiếm dữ liệu trực tiếp AJAX với MySQL Hướng dẫn PHP 8 Select2 Đa lựa chọn với jQuery AJAX Hướng dẫn PHP 8 Ví dụ mã hóa và giải mã dữ liệu JSON Ví dụ hướng dẫn xác thực biểu mẫu phía máy chủ PHP 8Cách tạo Captcha trong biểu mẫu liên hệ PHPTạo biểu mẫu liên hệ trong . Lấy giá trị đã chọn và thêm kiểu Cách lấy các giá trị đã chọn từ tùy chọn được chọn trong PHP 8Nhận nhiều giá trị của các hộp kiểm đã chọn trong PHP 8Tạo phân trang trong PHP 8 với MySQL và BootstrapBuild Biểu mẫu đăng ký (đăng ký) người dùng PHP 8 với MySQL

Làm cách nào để thêm hình ảnh xác thực vào biểu mẫu liên hệ PHP?

Tích hợp Google reCAPTCHA trong Biểu mẫu liên hệ PHP 8 .

Tạo khóa API bảo mật & trang web reCAPTCHA

Tạo biểu mẫu HTML bằng Bootstrap

Tích hợp reCAPTCHA dưới dạng PHP

Xác thực phản hồi bằng Google reCAPTCHA

Gửi email để đăng dữ liệu biểu mẫu trong PHP

Bạn có thể thêm hình ảnh xác thực vào biểu mẫu Google không?

Thêm Google reCAPTCHA vào biểu mẫu . Trong tab Lưu trữ, hãy nhấp vào Google reCAPTCHA. Bật công tắc Sử dụng Google reCAPTCHA. Lặp lại các bước này cho tất cả các khối biểu mẫu trên trang web của bạn nơi bạn muốn thêm reCAPTCHA.