Vue SDK

CaptchaLa CAPTCHA için resmi Vue 3 bileşeni — @captcha-la/vue olarak yayınlanmıştır.

Canlı demo

📦

demo-v1.captcha.la/vue — dört ürün modunun tamamıyla çalıştırılabilir demo. Kaynak: Captcha-La/vue-example.

Kurulum

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

Peer bağımlılık: vue@^3.2.0.

Hızlı başlangıç

<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	Tür	Varsayılan	Açıklama
appKey	string	zorunlu	CaptchaLa uygulama anahtarı
serverToken	string	-	Tek seferlik, sunucu tarafından düzenlenen challenge token'ı. Uygulamada server_token_required=true olduğunda zorunlu.
product	'popup' | 'float' | 'embed' | 'bind'	'popup'	Görüntüleme modu
action	string	'default'	Action tanımlayıcı (örn. login, register, checkout)
lang	string	'zh-CN'	Dil kodu (zh-CN, en, ja, …)
bindTo	string | HTMLElement	-	Bağlanılacak eleman seçici veya düğüm (yalnızca product="bind" için)

Olaylar

Olay	Yük	Açıklama
success	{ token, type, action }	Doğrulama başarılı
error	error	Doğrulama başarısız
close	—	CAPTCHA kapatıldı
ready	—	CAPTCHA hazır

Yöntemler (ref aracılığıyla)

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

Yöntem	Açıklama
verify()	Doğrulamayı tetikle
reset()	CAPTCHA durumunu sıfırla
destroy()	Örneği yok et
bindTo(selector)	Elemana bağla (bind modu için)
setLang(lang)	Dili yerinde değiştir

Üretim: serverToken modu

Yüksek değerli akışlar (giriş, kayıt, ödeme) için sunucu tarafından düzenlenen token akışını öneririz. Backend'iniz POST /v1/server/challenge/issue ile tek seferlik bir server_token (5 dakikalık TTL) basar ve bunu tarayıcıya verir:

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

Tam backend sözleşmesi için API Referansı'na bakın.

Bağlantılar

• npm · GitHub · örnek
• Web SDK genel bakışı · API Referansı