SDK Web
O SDK Web é compatível com todos os navegadores modernos e oferece vários métodos de integração.
Veja funcionar em 30 segundos
demo-v1.captcha.la — HTML + PHP puro, licença MIT, com view-source em todas as páginas.
- popup.html — modo popup
- float.html — widget flutuante
- bind.html — vinculado a botão
- inline.html — incorporado inline
- server-token.html — token emitido pelo servidor (anti-replay)
Início rápido
html
<!-- 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>Instalação
CDN
html
<!-- Recommended: auto-fallback loader, ~6 KB gzip -->
<script src="https://cdn.captcha-cdn.net/captchala-loader.js"></script>NPM
bash
npm install captchala
# or framework wrappers
npm install @captcha-la/vue
npm install @captcha-la/reactjs
import Captchala from 'captchala';
import 'captchala/dist/captchala.css';Modos
Modo Popup
js
Captchala.init({ appKey: 'YOUR_APP_KEY', product: 'popup', action: 'login' })
.bindTo('#login-btn')
.onSuccess(res => sendToBackend(res.token));Modo Float
js
Captchala.init({ appKey: 'YOUR_APP_KEY', product: 'float', action: 'browse' })
.appendTo('#captcha-container')
.onSuccess(res => sendToBackend(res.token));Modo Bind
js
Captchala.init({ appKey: 'YOUR_APP_KEY', product: 'bind', action: 'login' })
.bindTo('#submit-button')
.onSuccess(res => submitForm(res.token)); // fires only after challenge passesModo Embed
js
Captchala.init({ appKey: 'YOUR_APP_KEY', product: 'embed', action: 'register' })
.appendTo('#captcha-container')
.onSuccess(res => sendToBackend(res.token));Opções comuns
| Parâmetro | Tipo | Padrão | Descrição |
|---|---|---|---|
appKey | string | — | Application Key (obrigatório) |
product | string | popup | Modo de exibição: popup |
action | string | default | Cenário de negócio (ex.: login, register, pay). O servidor aplica políticas de segurança diferentes por cenário. |
lang | string | auto | Tag BCP-47 (ex.: en, ja, pt-BR) ou auto para seguir navigator.language. Veja Idiomas suportados — 54 locales. |
serverToken | string | — | Token de uso único (sct_xxx) emitido pelo seu servidor. Fortemente recomendado em produção — impede o abuso de atualização ilimitada de desafios. |
onServerTokenExpired | () => Promise<string> | — | Chamado quando o serverToken expira; retorne um novo para que o SDK continue sem interromper o fluxo. |
enableVoice | boolean | true | Mostra o ponto de entrada do CAPTCHA por áudio (suporte de acessibilidade para usuários com deficiência visual). |
Validação no servidor
Após onSuccess, envie res.token (prefixo pt_) para o seu próprio backend e valide-o no servidor:
bash
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>" }Veja a Referência da API para o endpoint completo de validação.