Web SDK

Web SDK menyokong semua pelayar moden dan menyediakan pelbagai kaedah integrasi.

Lihat ia berfungsi dalam 30 saat

demo-v1.captcha.la — HTML + PHP tulen, lesen MIT, view-source pada setiap halaman.

• popup.html — mod popup
• float.html — widget terapung
• bind.html — ikat pada butang
• inline.html — benam dalam baris
• server-token.html — token diterbitkan pelayan (anti-replay)

Mula pantas

<!-- 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>

Pemasangan

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';

Mod

Mod Popup

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

Mod Float

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

Mod Bind

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

Mod Benam

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

Pilihan biasa

Parameter	Jenis	Lalai	Penerangan
appKey	string	—	App Key (Diperlukan)
product	string	popup	Mod Paparan: popup
action	string	default	Senario Perniagaan
lang	string	en	Bahasa yang disokong: zh-CN / zh-TW / en / ja / ko / ms / vi / id
serverToken	string	—	Token sekali guna (sct_xxx) yang dikeluarkan oleh pelayan anda. Sangat disyorkan dalam persekitaran pengeluaran
onServerTokenExpired	() => Promise<string>	—	Dipanggil apabila serverToken tamat tempoh; pulangkan token baharu supaya SDK boleh meneruskan pengesahan
enableVoice	boolean	true	Sama ada memaparkan pilihan pengesahan audio (sokongan kebolehcapaian untuk pengguna cacat penglihatan)

Pengesahan sebelah pelayan

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 Rujukan API untuk endpoint pengesahan penuh.