Hôm nay chúng ta sẽ tìm hiểu về Google reCAPTCHA và cách chèn vào form trong website.
Nội dung bao gồm:
- Giới thiệu Google reCAPTCHA
- Đăng ký sử dụng Google reCAPTCHA
- Chèn vào Website
Google reCAPTCHA là gì?
Google reCAPTCHA là 1 dạng captcha mới và tiện dụng để chống spam, chống bot tự động đăng ký điền form và thực hiện trên form. Phiên bản mới của google recaptcha rất thân thiện với người dùng và độ bảo mật cao.
Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.
Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều
- Azdigi: Giá rẻ thì dùng gói Pro Gold Hosting còn chất lượng hơn thì em khuyên dùng Business Hosting. Có điều kiện thì lên VPS nhé
- Tino hosting
- iNet
- Nước ngoài thì Vultr
Video giới thiệu về Google reCAPTCHA
Hướng dẫn đăng ký Google reCAPTCHA
Bước 1: vào Đăng ký google recaptcha để đăng ký. Ấn vào Get reCAPTCHA để bắt đầu đăng ký
Khi lần đầu tiên vào đăng ký sẽ có màn hình như bên dưới
Bước 2: điền thông tin
Ô Label để điều tiêu đề của captcha. Trong ví dụ là Demo levantoan.com
Ô Domains để điền những domain mà bạn sẽ đặt reCAPTCHA vào. Trong ví dụ là localhost và levantoan.freevnn.com
Sau đó ấn Register
Khi đăng ký thành công có 2 giá trị mà chúng ta cần quan tâm đó là
- Site key
- Secret key
Đến đây đăng ký đã thành công bước tiếp theo sẽ là chèn vào Form của mình.
Hướng dẫn chèn Google reCAPTCHA vào FORM
Chèn đoạn code sau vào trước thẻ </head>
<script src='https://www.google.com/recaptcha/api.js'></script>
Mặc đinh google sẽ tự nhận diện ngôn ngữ để hiển thị. Để cố định ngôn ngữ bạn thêm ?hl= vào như sau
<script src='https://www.google.com/recaptcha/api.js?hl=vi'></script>
Google reCAPTCHA hỗ trợ hơn 40 ngôn ngữ khác nhau. Xem thêm các ngôn ngữ khác tại đây
Tiếp theo chèn đoạn code sau vào trong <form> của bạn. Thay === Your site key === bằng Site key của bạn
<div class="g-recaptcha" data-sitekey="=== Your site key ==="></div>
Tiếp theo chèn đoạn PHP lên đầu page để xác nhận. Thay ===You Secret Key=== bằng Secret Key của bạn
<?php
if(isset($_POST['submit'])){
$name;
$captcha;
if(isset($_POST['name'])){
$name = $_POST['name'];
}
if(isset($_POST['g-recaptcha-response'])){
$captcha = $_POST['g-recaptcha-response'];
}
if(!$captcha){
echo '<h2>Hay xac nhan CAPTCHA</h2>';
}else{
$response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=6LedT9wSAAAAAHRdSVndnSjeiDtkx6hKWQ-NuWQw&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
if($response.success == false){
echo '<h2>SPAM!</h2>';
}else{
echo '<h2>'.$name.' Khong phai robot :)</h2>';
}
}
}
?>
File demo hoàn thành
<?php
if(isset($_POST['submit'])){
$name;
$captcha;
if(isset($_POST['name'])){
$name = $_POST['name'];
}
if(isset($_POST['g-recaptcha-response'])){
$captcha = $_POST['g-recaptcha-response'];
}
if(!$captcha){
echo '<h2>Hay xac nhan CAPTCHA</h2>';
}else{
$response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=6LedT9wSAAAAAHRdSVndnSjeiDtkx6hKWQ-*****&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
if($response.success == false){
echo '<h2>SPAM!</h2>';
}else{
echo '<h2>'.$name.' Khong phai robot :)</h2>';
}
}
}
?>
<html>
<head>
<title>Google recapcha demo - LeVanToan</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<h1>Google reCAPTHA Demo</h1>
<form id="comment_form" action="" method="post">
<input type="text" placeholder="Tên của bạn" size="40" required name="name"><br><br>
<input type="submit" name="submit" value="Gửi"><br><br>
<div class="g-recaptcha" data-sitekey="6LedT9wSAAAAAJnR8DTfGReNvTgliYWy3MZDb7f3"></div>
</form>
</body>
</html>
Chúc các bạn thành công!
- Bình luận
