Halaman ini menjelaskan cara menampilkan dan menyesuaikan widget reCAPTCHA v2 di halaman web Anda.
Untuk menampilkan widget, Anda dapat:
Lihat Konfigurasi untuk mempelajari cara menyesuaikan widget. Misalnya, Anda mungkin ingin menentukan bahasa atau tema untuk widget tersebut.
Lihat Memverifikasi respons pengguna untuk memeriksa apakah pengguna berhasil memecahkan CAPTCHA.
Merender widget reCAPTCHA secara otomatis
Metode termudah untuk merender widget reCAPTCHA di halaman Anda adalah dengan menyertakan resource JavaScript yang diperlukan dan tag g-recaptcha
. Tag g-recaptcha
adalah elemen DIV dengan nama class g-recaptcha
dan kunci situs Anda di
atribut data-sitekey
:
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
Skrip harus dimuat menggunakan protokol HTTPS dan dapat disertakan dari titik mana pun di halaman tanpa batasan.
Merender widget reCAPTCHA secara eksplisit
Menunda render dapat dilakukan dengan menentukan fungsi callback onload dan menambahkan parameter ke resource JavaScript.
Tentukan fungsi callback
onload
Anda. Fungsi ini akan dipanggil saat semua dependensi dimuat.<script type="text/javascript"> var onloadCallback = function() { alert("grecaptcha is ready!"); }; </script>
Masukkan resource JavaScript, dengan menetapkan parameter
onload
ke nama fungsi callback onload dan parameterrender
keexplicit
.<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer> </script>
Saat callback dieksekusi, Anda dapat memanggil metode
grecaptcha.render
dari JavaScript API.
Konfigurasi
Parameter resource JavaScript (api.js)
Parameter | Nilai | Deskripsi |
---|---|---|
onload | Opsional. Nama fungsi callback Anda yang akan dieksekusi setelah semua dependensi dimuat. | |
render | pemuatan eksplisit |
Opsional. Apakah akan merender widget secara eksplisit. Default-nya adalah onload, yang akan merender widget dalam tag g-recaptcha pertama yang ditemukannya. |
hl | Lihat kode bahasa | Opsional. Memaksa widget untuk merender dalam bahasa tertentu. Otomatis mendeteksi bahasa pengguna jika tidak ditentukan. |
Atribut tag g-recaptcha dan parameter grecaptcha.render
Atribut tag g-recaptcha | Parameter grecaptcha.render | Nilai | Default | Deskripsi |
---|---|---|---|---|
kunci-situs-data | kunci situs | Kunci situs Anda. | ||
tema-data | tema | terang | lampu | Opsional. Tema warna widget. |
ukuran data | ukuran | normal rapat | normal | Opsional. Ukuran widget. |
data-tabindex | tabtab | 0 | Opsional. Indeks tab widget dan tantangan. Jika elemen lain di halaman Anda menggunakan tabindex, elemen tersebut harus ditetapkan untuk mempermudah navigasi pengguna. | |
callback data | callback | Opsional. Nama fungsi callback Anda, dieksekusi saat pengguna berhasil mengirim respons. Token g-recaptcha-response diteruskan ke callback Anda. |
||
data-end-callback | callback berakhir | Opsional. Nama fungsi callback Anda, dieksekusi saat respons reCAPTCHA berakhir dan pengguna perlu memverifikasi ulang. | ||
data-error-callback | callback-error | Opsional. Nama fungsi callback Anda, dieksekusi saat reCAPTCHA mengalami error (biasanya konektivitas jaringan) dan tidak dapat dilanjutkan hingga konektivitas dipulihkan. Jika menentukan fungsi di sini, Anda bertanggung jawab untuk memberi tahu pengguna bahwa mereka harus mencoba lagi. |
JavaScript API
Metode | Deskripsi |
---|---|
grecaptcha.render( penampung,
parameter
|
Merender penampung sebagai widget reCAPTCHA dan menampilkan ID widget yang baru dibuat. container Elemen HTML untuk merender widget reCAPTCHA. Tentukan ID penampung (string) atau elemen DOM itu sendiri. parameter Objek yang berisi parameter sebagai key-value pair, misalnya, ""sitekey": "your_site_key", "theme": "light"}. Lihat parameter grecaptcha.render. |
grecaptcha.reset( id_widget_opt
)
|
Mereset widget reCAPTCHA. opt_widget_id ID widget opsional, ditetapkan secara default ke widget pertama yang dibuat jika tidak ditentukan. |
grecaptcha.getResponse( ) id_widget_opt
)
|
Mendapatkan respons untuk widget reCAPTCHA. opt_widget_id ID widget opsional, ditetapkan secara default ke widget pertama yang dibuat jika tidak ditentukan. |
Contoh
Rendering eksplisit setelah callback onload
<html>
<head>
<title>reCAPTCHA demo: Explicit render after an onload callback</title>
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('html_element', {
'sitekey' : 'your_site_key'
});
};
</script>
</head>
<body>
<form action="?" method="POST">
<div id="html_element"></div>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>
Rendering eksplisit untuk beberapa widget
<html>
<head>
<title>reCAPTCHA demo: Explicit render for multiple widgets</title>
<script type="text/javascript">
var verifyCallback = function(response) {
alert(response);
};
var widgetId1;
var widgetId2;
var onloadCallback = function() {
// Renders the HTML element with id 'example1' as a reCAPTCHA widget.
// The id of the reCAPTCHA widget is assigned to 'widgetId1'.
widgetId1 = grecaptcha.render('example1', {
'sitekey' : 'your_site_key',
'theme' : 'light'
});
widgetId2 = grecaptcha.render(document.getElementById('example2'), {
'sitekey' : 'your_site_key'
});
grecaptcha.render('example3', {
'sitekey' : 'your_site_key',
'callback' : verifyCallback,
'theme' : 'dark'
});
};
</script>
</head>
<body>
<!-- The g-recaptcha-response string displays in an alert message upon submit. -->
<form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
<div id="example1"></div>
<br>
<input type="submit" value="getResponse">
</form>
<br>
<!-- Resets reCAPTCHA widgetId2 upon submit. -->
<form action="javascript:grecaptcha.reset(widgetId2);">
<div id="example2"></div>
<br>
<input type="submit" value="reset">
</form>
<br>
<!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
<form action="?" method="POST">
<div id="example3"></div>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>