SDK Vue

Componente oficial de Vue 3 para el CAPTCHA de CaptchaLa — publicado como @captcha-la/vue.

Demo en vivo

📦

demo-v1.captcha.la/vue — demo ejecutable con los cuatro modos de producto. Fuente: Captcha-La/vue-example.

Instalación

npm install @captcha-la/vue
# or
yarn add @captcha-la/vue
# or
pnpm add @captcha-la/vue

Dependencia entre pares: vue@^3.2.0.

Inicio rápido

<template>
  <Captchala
    app-key="your-app-key"
    product="popup"
    @success="handleSuccess"
    @error="handleError"
  />
</template>

<script setup>
import { Captchala } from '@captcha-la/vue'

function handleSuccess(result) {
  // Send result.token to your server for validation.
  console.log('pass_token:', result.token)
}

function handleError(error) {
  console.error('verification failed:', error)
}
</script>

Props

Prop	Tipo	Por defecto	Descripción
appKey	string	obligatorio	Clave de aplicación de CaptchaLa
serverToken	string	-	Token de desafío de un solo uso emitido por el servidor. Obligatorio cuando la aplicación tiene server_token_required=true.
product	'popup' | 'float' | 'embed' | 'bind'	'popup'	Modo de visualización
action	string	'default'	Identificador de acción (p. ej. login, register, checkout)
lang	string	'zh-CN'	Código de idioma (zh-CN, en, ja, …)
bindTo	string | HTMLElement	-	Selector o nodo del elemento al que enlazar (solo para product="bind")

Eventos

Evento	Carga útil	Descripción
success	{ token, type, action }	Verificación correcta
error	error	Verificación fallida
close	—	CAPTCHA cerrado
ready	—	CAPTCHA listo

Métodos (vía ref)

<template>
  <Captchala ref="captchaRef" app-key="your-app-key" />
  <button @click="captchaRef?.verify()">Verify</button>
</template>

<script setup>
import { ref } from 'vue'
const captchaRef = ref()
</script>

Método	Descripción
verify()	Lanza la verificación
reset()	Reinicia el estado del CAPTCHA
destroy()	Destruye la instancia
bindTo(selector)	Enlaza al elemento (para el modo bind)
setLang(lang)	Cambia el idioma en caliente

Producción: modo serverToken

Para flujos de alto valor (inicio de sesión, registro, pago) recomendamos el flujo de token emitido por el servidor. Tu backend genera un server_token de un solo uso (TTL de 5 minutos) vía POST /v1/server/challenge/issue y se lo entrega al navegador:

<template>
  <Captchala
    v-if="serverToken"
    :server-token="serverToken"
    app-key="pk_your_public_app_key"
    action="login"
    @success="onSuccess"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Captchala } from '@captcha-la/vue'

const serverToken = ref()

onMounted(async () => {
  const r = await fetch('/api/captcha-token')   // your own backend
  serverToken.value = (await r.json()).server_token
})

function onSuccess(result) {
  console.log('pass_token:', result.token)
}
</script>

Consulta la Referencia de la API para el contrato completo del backend.

Enlaces

• npm · GitHub · ejemplo
• Visión general del SDK Web · Referencia de la API