reCAPTCHA merupakan sebuah sistem CAPTCHA yang dapat membedakan antara akses manusia dan otomatis di situs-situs web. Versi aslinya meminta para pengguna untuk membaca teks atau mencocokkan gambar. Versi 2 juga meminta pengguna untuk mengetik teks atau mencocokkan gambar-gambar (sc : Wikipedia).
Perbedaan mendasar antara Google reCAPTCHA v2 dan v3 yaitu v2 menggunakan semacam ujian dimana kita harus memilih gambar atau jawaban yang sesuai dengan pertanyaan yang diminta biarpun kita juga bisa memilih tipe invisible seperti v3 sedangkan pada v3 ujian tersebut invisible tanpa ujian tapi dengan perincian skor sehingga ada peningkatan keamanan dari penggunaan bot jahat yang mungkin dipakai untuk melakukan by-pass CAPTCHA . Perbedaan lengkap kamu bisa baca pada laman berikut : developers.google.com/recaptcha/docs/versions
Pada tutorial kali ini, akan dibahas penggunaan sederhana Google reCAPTCHA v3 menggunakan contact form dan PHP sebagai backend handle request yang diterima saat action pada contact form. Mari simak tutorial berikut :
Note : penggunaan localhost tidak bisa dipakai sebagai domain, silahkan gunakan domain hosting yang kamu punya.
Daftar Google reCAPTCHA :
- Pastikan kamu telah mempunyai akun Gmail
- Masuk ke laman google.com/recaptcha/admin/create
- Daftarkan domain kamu seperti gambar di bawah ini :
- Maka kamu akan mendapat kode SITE KEY dan SECRET KEY yang perlukan untuk implementasi Google reCAPTCHA v3
Implementasi pada program :
- Buat file index. php, ganti SITE_KEY dan SECRET_KEY dengan key yang telah kamu dapatkan dan uraian kodenya sebagai berikut :
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form by Pongkagame</title>
<link rel="stylesheet" href="main.css">
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
</head>
<body>
<div class="container">
<div class="title">
<a href="https://pongxkagame.blogspot.com"><h3>Example Google reCAPTHCA v3</h3></a>
<?php if (isset($_SESSION['APP'])): ?>
<h4 style="color:blue;">Sending success to <?php echo $_SESSION['APP']; ?></h4>
<?php elseif (isset($_SESSION['ERROR'])): ?>
<h4 style="color:red;">Fill the form again! <?php print_r($_SESSION['ERROR']); ?></h4>
<?php endif; ?>
</div>
<form id="my-form" action="action.php" method="POST">
<div class="form-item">
<label for="myName">Name</label><br>
<input type="text" name="my-name"/>
</div>
<div class="form-item">
<label for="myEmail">Email</label><br>
<input type="email" name="my-email"/>
</div>
<div class="form-item">
<label for="myMessage">Message</label><br>
<textarea name="my-message" id="" cols="30" rows="10"></textarea>
</div>
<input type="hidden" name="token" id="token"/><br>
<!-- Inline Google reCAPTCHA -->
<div class="g-recaptcha" id="my-captcha"></div>
<!-- End Inline Google reCAPTCHA -->
<button name="submit" type="submit" data-sitekey="SITE_KEY" id="my-submit">Send</button>
</form>
</div>
<script src="main.js"></script>
</body>
</html>
- Buat kode javascript dengan kode sebagai berikut :
const site_key = document.querySelector('#my-submit').getAttribute('data-sitekey');
//Display inline reCAPTCHA on spesific element
var onloadCallback = function() {
grecaptcha.render('my-captcha', {
'sitekey' : site_key,
'theme' : 'dark'
});
}
//Process token CAPTCHA on event submit
var form = document.querySelector("#my-form");
document.querySelector('#my-submit').addEventListener("click", function () {
e.preventDefault();
grecaptcha.ready(function() {
grecaptcha.execute(site_key, {action: 'submit'}).then(function(token) {
document.getElementById('token').value = token;
form.submit();
});
});
});
- Buat file action.php dan uraian kodenya sebagai berikut :
<?php
if(isset($_POST['submit'])){
//Variable Input Form
$name = $_POST['my-name'];
$email = $_POST['my-email'];
$message = $_POST['my-message'];
//Initialize data verify CAPTCHA
$url = 'https://www.google.com/recaptcha/api/siteverify';
$data = [
'secret' => 'SECRET_KEY',
'response' => $_POST['token']
];
$get_response = json_decode(file_get_contents($url . '?secret='. $data['secret'] .'&response=' . $data['response']), true);
//Handle response CAPTCHA
if ($get_response['success'] == true ){
session_start();
$_SESSION['APP'] = $_POST['my-name'];
echo "<script>
alert('Success Response');
window.location.href='index.php';
</script>";
} else {
session_start();
$_SESSION['ERROR'] = $get_response['error-codes'];
echo "<script>
alert('Error Response');
window.location.href='index.php';
</script>";
}
}
- Tampilan Google reCAPTCHA v3 secara default fixed berada pada samping kanan, pada contact form ini implementasi pada element yang telah ditentukan.
- Tampilan Google reCAPTCHA v3 berhasil terintegrasi dengan contact form.
- Jika terjadi error seperti gambar di bawah ini artinya site key yang kamu pakai terdeteksi tidak valid atau tidak cocok (biasanya terjadi ketika menggunakan domain localhost atau domain yang bukan didaftarkan).
- Jika terjadi response error saat proses resquest, maka salah satunya akan tampil error seperti gambar di bawah.
Tidak ada komentar