Panduan Integrasi Web SDK
Kompatibilitas
| Item | Deskripsi |
|---|---|
| Kompatibilitas | IE9+, Chrome, Firefox, Safari, Opera, browser mobile utama, WebView tertanam di iOS dan Android |
Bentuk Verifikasi
["slide","icon","nine","match"]
["slide","icon","nine","match"]
Tampilkan blok kode ini di jendela mengambang
Bentuk yang saat ini didukung:
| Nama | Deskripsi |
|---|---|
| slide | Puzzle geser |
| icon | Klik ikon secara berurutan |
| nine | Sembilan kotak |
| match | Permainan cocok-tiga |
Mulai Cepat
Impor
File gt4.js
Disediakan oleh EngageLab
Mengimpor gt4.js akan memasang fungsi inisialisasi initGeetest secara global.
<script src="https://captcha-stat.engagelab.com/www/gt4.js"></script>
<script src="https://captcha-stat.engagelab.com/www/gt4.js"></script>
Tampilkan blok kode ini di jendela mengambang
Inisialisasi Captcha
💡 Tips
Sebelum inisialisasi, Anda perlu mendapatkan ID verifikasi dari server. Lihat parameter konfigurasi untuk detailnya.
Gunakan fungsi initGeetest untuk mendapatkan instance captcha. Parameter pertama fungsi ini adalah parameter konfigurasi untuk captcha, dan parameter kedua adalah fungsi callback setelah inisialisasi selesai.
var config = {
captchaId: 'xxxx', // ID Verifikasi
apiServers: ['https://captcha-api.engagelab.com'], // Daftar alamat server verifikasi, wajib dikonfigurasi sesuai kebutuhan
staticServers: ['https://captcha-stat.engagelab.com/www/js'] // Daftar alamat server sumber daya statis, wajib dikonfigurasi sesuai kebutuhan
}
/**
* @desc Callback setelah inisialisasi selesai
* @param { Object } gt Instance captcha
*/
var callback = function(gt) {
// Tangani bisnis terkait berdasarkan instance captcha, seperti memicu jendela captcha, mendengarkan event verifikasi sukses, dll.
}
initGeetest(config, callback)
var config = {
captchaId: 'xxxx', // ID Verifikasi
apiServers: ['https://captcha-api.engagelab.com'], // Daftar alamat server verifikasi, wajib dikonfigurasi sesuai kebutuhan
staticServers: ['https://captcha-stat.engagelab.com/www/js'] // Daftar alamat server sumber daya statis, wajib dikonfigurasi sesuai kebutuhan
}
/**
* @desc Callback setelah inisialisasi selesai
* @param { Object } gt Instance captcha
*/
var callback = function(gt) {
// Tangani bisnis terkait berdasarkan instance captcha, seperti memicu jendela captcha, mendengarkan event verifikasi sukses, dll.
}
initGeetest(config, callback)
Tampilkan blok kode ini di jendela mengambang
Memicu Jendela Captcha
💡 Tips
Dipasangkan dengan parameter konfigurasi
product, terdapat dua cara untuk memicu jendela captcha:
- Klik tombol bawaan yang disediakan untuk memicu. (nilai
productbukanbind) - Panggil metode
showCaptchadari instance captcha. (nilaiproductadalahbind)
<div id="captch_wrap" class="captch-wrap"></div>
var config = {
captchaId: 'xxxx', // ID Verifikasi
apiServers: ['https://captcha-api.engagelab.com'], // Daftar alamat server verifikasi, wajib dikonfigurasi sesuai kebutuhan
staticServers: ['https://captcha-stat.engagelab.com/www/js'], // Daftar alamat server sumber daya statis, wajib dikonfigurasi sesuai kebutuhan
product: 'bind' // Skenario 2
}
/**
* @desc Callback setelah inisialisasi selesai
* @param { Object } gt Instance captcha
*/
var callback = function(gt) {
gt.onReady(function() {
// Skenario 1: Gunakan tombol bawaan dari EngageLab untuk memicu jendela captcha
// Tambahkan tombol bawaan ke area yang ditentukan
gt.appendTo("#captch_wrap")
// Skenario 2: Pemicu kustom untuk jendela captcha
// Panggil metode showCaptcha pada instance saat event tertentu
// Misal, langsung dipicu setelah captcha siap
gt.showCaptcha()
})
}
initGeetest(config, callback)
<div id="captch_wrap" class="captch-wrap"></div>
var config = {
captchaId: 'xxxx', // ID Verifikasi
apiServers: ['https://captcha-api.engagelab.com'], // Daftar alamat server verifikasi, wajib dikonfigurasi sesuai kebutuhan
staticServers: ['https://captcha-stat.engagelab.com/www/js'], // Daftar alamat server sumber daya statis, wajib dikonfigurasi sesuai kebutuhan
product: 'bind' // Skenario 2
}
/**
* @desc Callback setelah inisialisasi selesai
* @param { Object } gt Instance captcha
*/
var callback = function(gt) {
gt.onReady(function() {
// Skenario 1: Gunakan tombol bawaan dari EngageLab untuk memicu jendela captcha
// Tambahkan tombol bawaan ke area yang ditentukan
gt.appendTo("#captch_wrap")
// Skenario 2: Pemicu kustom untuk jendela captcha
// Panggil metode showCaptcha pada instance saat event tertentu
// Misal, langsung dipicu setelah captcha siap
gt.showCaptcha()
})
}
initGeetest(config, callback)
Tampilkan blok kode ini di jendela mengambang
Mendapatkan Hasil Verifikasi
/**
* @desc Callback setelah inisialisasi selesai
* @param { Object } gt Instance captcha
*/
var callback = function(gt) {
// Memicu jendela captcha...
// Mendengarkan hasil verifikasi
gt.onSuccess(function(res) {
console.log(res)
})
}
initGeetest({...}, callback)
/**
* @desc Callback setelah inisialisasi selesai
* @param { Object } gt Instance captcha
*/
var callback = function(gt) {
// Memicu jendela captcha...
// Mendengarkan hasil verifikasi
gt.onSuccess(function(res) {
console.log(res)
})
}
initGeetest({...}, callback)
Tampilkan blok kode ini di jendela mengambang
Parameter Konfigurasi
Parameter Konfigurasi
| Parameter | Tipe | Deskripsi | Nilai Default |
|---|---|---|---|
| captchaId | string | ID Verifikasi, didapatkan dari backend EngageLab | Wajib |
| product | string | Mode tampilan jendela captcha, nilai opsional: float, popup, bind | float |
| language | string | Prioritas pada nilai yang dikirimkan, lalu bahasa browser saat ini. Jika keduanya tidak cocok, gunakan nilai default | zh |
| protocol | string | Protokol jaringan | // |
| apiServers | array | Alamat layanan permintaan verifikasi (tanpa protokol), wajib dikonfigurasi sebagai ['https://captcha-api.engagelab.com'] | - |
| staticServers | array | Alamat layanan sumber daya statis yang dibutuhkan untuk verifikasi (tanpa protokol), wajib dikonfigurasi sebagai ['https://captcha-stat.engagelab.com/www/js'] | - |
| post | boolean | Jika diatur true, metode permintaan adalah ajax; jika tidak, jsonp | false |
| showSuccessTip | boolean | Mengontrol jendela notifikasi sukses saat product adalah bind | true |
| riskType | string | Menentukan bentuk verifikasi seperti geser, klik, dll. (hanya berlaku jika mode verifikasi backend diatur ke mode risk fusion) | - |
| timeout | number | Timeout permintaan verifikasi | 30000 |
| offlineCb | function | Fungsi penanganan offline kustom | - |
| onError | function | Penangkapan error sebelum inisialisasi captcha | - |
| mask | Object | Konfigurasi mask jendela captcha | |
| nativeButton | Object | Konfigurasi terkait tombol bawaan | |
| toolbar | Array | Konfigurasi toolbar | |
| clientType | string | Tipe klien, nilai opsional: web | |
| width | string | Mengatur lebar jendela captcha. Lebar maksimum 340px (tinggi jendela captcha adaptif, rasio aspek sekitar | 340px |
| zoom | number | Nilai skala untuk skenario khusus, tidak dibatasi nilai maksimum (nilai tetap 1 untuk browser Firefox) | 1 |
Konfigurasi Objek Mask
| Parameter | Tipe | Deskripsi | Nilai Default |
|---|---|---|---|
| backgroundColor | string | Nilai warna yang valid | - |
| outside | boolean | Tutup captcha saat klik di luar area captcha | - |
Konfigurasi Objek NativeButton
| Parameter | Tipe | Deskripsi | Nilai Default |
|---|---|---|---|
| width | string | Lebar tombol pemicu bawaan | - |
| height | string | Tinggi tombol pemicu bawaan | - |
Konfigurasi Array Toolbar
initGeetest({..., toolbar: ['close', 'refresh']}, function() {...})
initGeetest({..., toolbar: ['close', 'refresh']}, function() {...})
Tampilkan blok kode ini di jendela mengambang
Konfigurasi Bahasa
initGeetest({..., language: 'zh'}, function() {...})
initGeetest({..., language: 'zh'}, function() {...})
Tampilkan blok kode ini di jendela mengambang
| Nilai Valid | Tipe | Deskripsi |
|---|---|---|
| close | string | Tombol tutup jendela captcha |
| refresh | string | Tombol segarkan jendela captcha |
Bahasa (18 Jenis)
| Nilai Opsional | Bahasa |
|---|---|
| ara | Arab |
| deu | Jerman |
| eng | Inggris |
| fra | Prancis |
| ind | Indonesia |
| jpn | Jepang |
| kor | Korea |
| msa | Melayu |
| pon | Portugis Brasil |
| por | Portugis Eropa |
| rus | Rusia |
| spa | Spanyol |
| tha | Thailand |
| udm | Uighur |
| vie | Vietnam |
| zh | Mandarin Sederhana |
| zho-hk | Mandarin Tradisional (Hong Kong) |
| zho-tw | Mandarin Tradisional (Taiwan) |
Mode Offline Verifikasi Perilaku
Mode offline disiapkan untuk menangani situasi ekstrem, memastikan proses verifikasi captcha yang tidak normal tidak memengaruhi proses bisnis normal.
Mode offline umumnya terjadi ketika server utama situs tidak dapat terhubung ke server verifikasi, sehingga terjadi timeout koneksi dan masalah lainnya.
Dalam mode offline, seluruh proses verifikasi melewati server verifikasi. Integrator perlu menambahkan logika verifikasi atau memiliki rencana downgrade produk.
Saat server verifikasi masuk ke mode offline,
Proses di sisi klien tetap sama, dan pemicu captcha akan langsung lolos, masuk ke onSuccess.
Sistem bisnis mengirimkan verifikasi sekunder ke sistem captcha, dan jika terjadi timeout, maka dipastikan dalam kondisi offline.
initGeetest({...}, function(gt) {
...
gt.onSuccess(function(res) {
console.log(res) // Contoh hasil verifikasi sukses
{
captcha_id: "59bbe0f128f0624fdd185a6a2207aa54",
captcha_output: "X000Q5p.....i-SFRyH1",
client_type: "web",
gen_time: "1648204854",
lot_number: "200e2e58e1d3a6906e08cc9ff5c6e0b5",
offline: true,
pass_token: "e000b4dc372c1397976f7b8f12d66ea8d5c993ab2db5810258e835429f6fa4ae"
}
// Kirim ke sistem bisnis...
})
})
initGeetest({...}, function(gt) {
...
gt.onSuccess(function(res) {
console.log(res) // Contoh hasil verifikasi sukses
{
captcha_id: "59bbe0f128f0624fdd185a6a2207aa54",
captcha_output: "X000Q5p.....i-SFRyH1",
client_type: "web",
gen_time: "1648204854",
lot_number: "200e2e58e1d3a6906e08cc9ff5c6e0b5",
offline: true,
pass_token: "e000b4dc372c1397976f7b8f12d66ea8d5c993ab2db5810258e835429f6fa4ae"
}
// Kirim ke sistem bisnis...
})
})
Tampilkan blok kode ini di jendela mengambang
