Vue SDK

CaptchaLa 验证码官方 Vue 3 组件 —— 已发布到 npm：@captcha-la/vue。

在线 Demo

📦

demo-v1.captcha.la/vue —— 可直接体验，含 4 种 product 模式。 源码：Captcha-La/vue-example。

安装

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

Peer 依赖：vue@^3.2.0。

快速上手

<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) {
  // 把 result.token 提交到你自己的后端校验
  console.log('pass_token:', result.token)
}

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

Props

属性	类型	默认值	说明
appKey	string	必填	CaptchaLa 应用 key
serverToken	string	-	服务端签发的一次性 challenge token。当应用配置 server_token_required=true 时必填。
product	'popup' | 'float' | 'embed' | 'bind'	'popup'	显示模式
action	string	'default'	业务场景标识（如 login、register、checkout）
lang	string	'zh-CN'	语言代码（zh-CN、en、ja 等）
bindTo	string | HTMLElement	-	绑定的元素选择器或节点（仅 product="bind"）

事件

事件	Payload	说明
success	{ token, type, action }	验证成功
error	error	验证失败
close	—	验证码关闭
ready	—	验证码就绪

通过 ref 调用方法

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

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

方法	说明
verify()	手动触发验证
reset()	重置验证码状态
destroy()	销毁验证码实例
bindTo(selector)	绑定到指定元素（仅 bind 模式）
setLang(lang)	原地切换语言

生产环境：serverToken 模式

注册 / 登录 / 支付等高价值场景推荐使用 服务端签发的一次性 token。后端调 POST /v1/server/challenge/issue 签发 server_token（TTL 5 分钟，单次消费），下发给前端：

<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')   // 你自己的后端
  serverToken.value = (await r.json()).server_token
})

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

完整契约见 API Reference。

链接

• npm · GitHub · example
• Web SDK 总览 · API Reference