Web SDK

Web SDK mendukung semua browser modern dengan berbagai metode integrasi.

Lihat dalam 30 detik

demo-v1.captcha.la — HTML + PHP murni, lisensi MIT, view-source di setiap halaman.

• popup.html — mode popup
• float.html — widget mengambang
• bind.html — ikat ke tombol
• inline.html — sematan inline
• server-token.html — token terbitan server (anti-replay)

Mulai cepat

<!-- 1. Load via CDN (or npm install captchala) -->
<script src="https://cdn.captcha-cdn.net/captchala-loader.js"></script>

<button id="login-btn">Sign in</button>

<script>
loadCaptchala(function () {
  Captchala.init({
    appKey: 'YOUR_APP_KEY',
    product: 'bind',
    action: 'login',
    lang: 'auto',
  })
  .onSuccess(res => sendToBackend(res.token))
  .onError(err => console.error(err.message))
  .bindTo('#login-btn');
});
</script>

Instalasi

CDN

<!-- Recommended: auto-fallback loader, ~6 KB gzip -->
<script src="https://cdn.captcha-cdn.net/captchala-loader.js"></script>

NPM

npm install captchala
# or framework wrappers
npm install @captcha-la/vue
npm install @captcha-la/react

import Captchala from 'captchala';
import 'captchala/dist/captchala.css';

Mode

Mode Popup

Captchala.init({ appKey: 'YOUR_APP_KEY', product: 'popup', action: 'login' })
  .bindTo('#login-btn')
  .onSuccess(res => sendToBackend(res.token));

Mode Float

Captchala.init({ appKey: 'YOUR_APP_KEY', product: 'float', action: 'browse' })
  .appendTo('#captcha-container')
  .onSuccess(res => sendToBackend(res.token));

Mode Bind

Captchala.init({ appKey: 'YOUR_APP_KEY', product: 'bind', action: 'login' })
  .bindTo('#submit-button')
  .onSuccess(res => submitForm(res.token));   // fires only after challenge passes

Mode Embed

Captchala.init({ appKey: 'YOUR_APP_KEY', product: 'embed', action: 'register' })
  .appendTo('#captcha-container')
  .onSuccess(res => sendToBackend(res.token));

Opsi umum

Parameter	Tipe	Default	Deskripsi
appKey	string	—	Application Key (wajib)
product	string	popup	Mode tampilan: popup
action	string	default	Scene bisnis (mis. login, register, pay). Server menerapkan kebijakan keamanan yang berbeda per scene.
lang	string	en	Bahasa yang didukung: zh-CN / zh-TW / en / ja / ko / ms / vi / id
serverToken	string	—	Token sekali pakai (sct_xxx) yang diterbitkan server Anda. Sangat direkomendasikan di production untuk mencegah penyalahgunaan refresh challenge tanpa batas.
onServerTokenExpired	() => Promise<string>	—	Dipanggil saat serverToken kedaluwarsa; kembalikan token baru agar SDK dapat melanjutkan tanpa memutus flow.
enableVoice	boolean	true	Tampilkan titik masuk audio captcha (dukungan aksesibilitas bagi pengguna tunanetra).

Validasi sisi server

After onSuccess, send res.token (prefix pt_) to your own backend, then validate it server-side:

POST https://apiv1.captcha.la/v1/validate
X-App-Key: YOUR_APP_KEY
X-App-Secret: YOUR_APP_SECRET
Content-Type: application/json

{ "pass_token": "<token>", "client_ip": "<end-user IP>" }

Lihat Referensi API untuk endpoint validasi lengkap.