Google reCAPTCHA
Dokumentasi reCAPTCHACara Pakai
- Masuk ke halaman Google reCAPTCHA. Bila kamu gak punya akun Google, buat dulu, terus balik ke halaman reCAPTCHA.
- Daftarkan websitemu buat dapetin Key-nya.
- Kolom Label, isi terserah.
- Kemudian, pilih reCAPTCHA v2 dan biarkan tetap "I'm not a robot" Checkbox
- Untuk kolom Domain, masukkan nama domain yang bakal kamu online-kan. Kalau masih di lokal, kamu bisa masukin juga
127.0.0.1ataulocalhostmenggunakan icon tambah disana. - Ceklis Accept the reCAPTCHA Terms of Service lalu Submit.
- Kamu bakal dikasih Site key dan Secret key-nya untuk digunain.
Copy-paste script berikut sebelum tag penutup <body>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>
<script>
// INITIALIZATION OF GOOGLE RECAPTCHA
// =======================================================
var onloadCallback = function() {
grecaptcha.render('element (ID)', {
'sitekey' : 'SITE_KEY',
'theme' : 'light'
});
};
</script>
Tema Gelap
Tambahin 'theme': 'dark'
Fungsi Callback
Tambahin 'callback': verifyCallback (function).
<div id="googleReCaptchaCallbackFunction"></div>
<script>
// INITIALIZATION OF GOOGLE RECAPTCHA
// =======================================================
var verifyCallback = function(response) {
alert('Success!');
};
var onloadCallback = function() {
grecaptcha.render('example1', {
'sitekey' : 'SITE_KEY',
'theme' : 'light',
'callback' : verifyCallback
});
};
</script>
Pakai Modal
Google reCAPTCHA
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Open modal
</button>
<!-- End Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Google reCAPTCHA</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
</div>
<div class="modal-body">
<div id="googleReCaptchaModal"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
<button type="button" class="btn btn-primary">Simpan</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->